code-prettifyでブログにソースコードを埋め込む
技術ブログなどでは、ソースコードをサイトに埋め込む機能が必要不可欠です。
ソースコードを埋め込む方法は様々ですが、今回はGoogleが開発を行っている「code-prettify」を使用してソースコードの埋め込みを行ってみます。
「code-prettify」を使ったソースコードの埋め込みを行うとこうなります。
function Method(String getStr) {
var _getStr = getStr + ' ← this return value';
return _getStr;
}
code-prettifyをダウンロード
「code-prettify」は、以下のリンクからダウンロードすることができます。
今回は、最小限の構成である「prettify-small*」をダウンロードします。
ダウンロード後に使用するのは、以下の２つファイルのみとなります。
- prettify.js
- prettify.css
code-prettifyを設定する
WordPressを利用している場合は、header.phpに以下のように記述する。
<link href="<?php echo get_template_directory_uri(); ?>/css/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/prettify.js"></script>
そして、bodyタグにonloadで「prettyPrint()」を指定する。
<body onload="prettyPrint()">
あとは、preタグとcodeタグでソースコード囲い、「prettyprint」クラスを指定することでソースコードに色を付けることができます。
<pre><code class="prettyprint">
function Method(String getStr) {
var _getStr = getStr + ' ← this return value';
return _getStr;
}
</code></pre>
行数を表示させたい場合は、「linenums」をクラスに追加することで左側に行番号を表示させることができます。
<pre><code class="prettyprint linenums">
function Method(String getStr) {
var _getStr = getStr + ' ← this return value';
return _getStr;
}
</code></pre>
monokaiテーマを適応させる
デザインが洗練されているテキストエディタには「Sublime Text」挙げられます。
「Sublime Text」は、「monokai」と呼ばれているテーマが適応されておりますが、これを「code-prettify」へ適応させることができる「google-prettify-monokai-theme」があります。
以下が「google-prettify-monokai-theme」のダウンロードリンクとなります。
ダウンロードしたファイルを解凍すると「prettify.css」が中に入っており、これを上でダウンロードした「prettify.css」から置き換えるだけで「monokai」テーマを適応させることができます。
<pre><code>だけ書くようにして、クラスは自動的に追加されるようにする
WordPressでコードを書いていると、いちいちcodeタグにクラスを書くのは面倒です。
そこで、jQueryを使った画面ロード時に自動的にcodeタグへclassを追加する方法を紹介します。
まずはダウンロードリンク
jQueryには、タグに対してクラスを追加する機能がありますので、画面ロード時にcodeタグにクラスを追加するようにします。
以下のJavascriptをheadに加えることで、ロード時にcodeタグに対して「prettyprint」と「linenums」クラスを追加することができます。
jQuery( document ).ready(function() {
jQuery('code').addClass('prettyprint linenums');
prettyPrint();
});
これにより、headタグのonloadを省略できるメリットも挙げられます。
本サイトもWordPressにより運用されており、文章を書く場合はpreタグとcodeタグのみ書くことでソースコードを埋め込むを簡単に行っております。
ソースコードを埋め込みに時間を使いたくない方に適切です。