こんにちは。下記のようにソースコードの文字を色付けしたり、イタリックに自動でしたりする方法を紹介します。
俗にいう
シンタックスハイライトってやつですね。
var main = function(){
var sample = "どーもこんにちは";
for(var i=0;i<10;++i){
console.log("i=:"+i);
};
/* 今回はこんな感じでブログに
** ソースコードを載せる方法を
** 紹介します。
*/
}
使用するライブラリ
今回使用するのはGoogle Code Prettifyというライブラリです。ソースコードに色付けをして、見やすくすることができます。
はてなブログでの設定方法
ライブラリの読み込みは以下の一行です。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"?skin=sunburst"></script>
これでSkinのテーマがSunburstのライブラリが読み込まれます。
はてなブログでは以下の場所に設定します。
・管理画面から「デザイン」を選択
・「カスタマイズ」の「フッタ」に先ほどのライブラリ読み込みの1行を追記します。
・スマホも同じように「フッタ」に設定する
これでライブラリの読み込みは可能となりました！
記事の書き方
記事は以下のように書きます。
class="prettyprint"のついたpreタグでソースコードを囲みます。
<pre class="prettyprint">
console.log("ここにソースコード");
</pre>
基本的にはこれだけでいい感じにソースコードに色付けしてくれます。
応用編
対して応用編ということでもないですが、いくつか設定できる項目があるので説明しておきます。
テーマの変更
Google Code Prettifyでは、いくつかのテーマが用意されています。
テーマの設定方法はライブラリの読み込み箇所のskin=sunbursの部分を変更することで可能です。
テーマは「Default」「Desert」「Sunburst」「Sons-Of-Obsidian」「Doxy」から選べるようです。
詳しくは
このページを見てください。
行数の表示
デフォルトでは、行番号が表示されていません。ソースコードを載せて「〇行目でうんたらかんたら」みたいな記事が書けるので、表示しておくとそれなりにメリットがあるかもしれません。
classに
linenumsを追加します。
<pre class="prettyprint linenums">
console.log("ここにソースコード");
console.log("ここにソースコード");
console.log("ここにソースコード");
</pre>
このままだとなぜか5の倍数の行数にしか行番号が表示されません。
1行ごとに表示したい場合は、以下のcssを追加します。はてなブログでは、デザイン⇒ヘッダ⇒タイトル下などに以下のコードを設置するとよいと思います。
<!--↓コード行数表示-->
<style>
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
</style>
その他設定
その他の設定や詳細は
このページに詳しく載っています。
注意点
私も実際困ったのですが"<"がpreの内側に入っているとうまく表示してくれません。
その時は「<」を「<」に置き換えて見るとうまく表示されます。
まとめ
今回はGoogle Code Prettifyの導入方法を説明しました。
割と簡単に導入できるので、技術系のブログを書きたい人にとっては必須なのではないでしょうか。
ぜひ皆さま試してみてください。