BloggerでGoogle-code-prettifyを使って文法ハイライト表示を行う

 　このブログ内で、コードを表示させることが多いので、Preタグをプログラムコード用にする文法ハイライトツールを導入した。目的は、コードを見やすくするためで、以下を条件に検討した。

1. 行番号が表示できること
2. 文法ハイライトが可能なこと
3. 負荷が軽く、簡単に利用できること
4. コード表示の折り返しのありなしに対応できること
5. Bloggerの表示に合わせることができる

の以上4点である。

　検討したのは、以下の3つ。

code-prettify

SyntaxHighLighter

highlight.js

このうち、code-prettifyを採用することにした。理由としては、

• 簡単に導入でき、ページ読み込み時の負荷が低い（ように見える）
• 行番号の表示ができる

が理由である。ただし、Blogger内で利用するには、いくつか追加的な設定が必要になる。

導入

　code-prettifyを動かすには、以下のscriptタグを実行する必要がある。Bloggerのテンプレート（「テーマ」から「HTMLを編集」）に入れてもいいし、投稿内に組み込んでもかまわない。複数のcode-prettifyテーマを切り替えるなら、投稿編集で「HTMLビュー」に切り替えて、適当なところに記述する。この記事では、投稿編集のHTMLビューで記事の最後に直接記述してある。

List01

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian"></script>

上記のコードで「?skin=sons-of-obsidian」の部分がcode-prettifyテーマの指定である。code-prettifyテーマは、「default」、「desert」、「sunburst」、「sons-of-obsidian」、「doxy」5つがあり、以下のギャラリーページで見ることができる。なお、前記のscriptタグ内でcode-prettifyテーマを指定するには、すべて小文字で行う。

Prettify Themes Gallery

使い方

　上記の指定を行ったら、あとは、プログラムコード部分を以下のように記述すればよい。これは、投稿エディタのHTMLビューで可能だが、コード部分は、HTMLのエスケープ処理が必要なので、さきに「作成ビュー」でコードを貼り付けて、エスケープ文字列に変換させて、あとからPREタグで囲むと楽かもしれない。

List02

<pre class="prettyprint linenums lang-js" style="tab-size:4" > 
プログラムコード
</pre>

"lang-js"は言語に対するヒント。"linenus"を指定すると行番号を付けるようになる。行番号はデフォルトでは、5つおきになるが、以下のCSSを指定することで1つづつ番号をふるようになる。

List03

<style>
	pre.prettyprint ol.linenums > li {
		list-style-type: decimal;
	}
</style>

これは、投稿やテンプレートHTMLのどこかにあればOK。行番号の振り方を元に戻すような使い方をするなら、セレクタでidを使って対象を限定する。

行の折り返し

　Blogger内で使う場合、左右の幅が制限されるので、何も指定しないと折り返しになる。List01がその例。しかし、場合によっては、コードを折り返しせず、横スクロールバーを表示させたいこともある。そのときには、以下のスタイルを使う。

List04

<style>
 	pre.prettyprint ol{ 
 		overflow: auto;
   		white-space: pre;
 	}
</style>

　あるいはPreタグを以下のように記述してもよい。

<pre class="prettyprint linenums lang-js" style="overflow: auto; tab-size: 4; white-space: pre;" > 

この指定をした最初のコードブロック(List01)は以下のようになる。

List01-2

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian"></script> 

対象により折り返ししたい、したくないがあるので、Styleタグでページ全体を設定してしまうよりは、Preタグごとに指定したほうがいいかもしれない。

プログラムコードを記述するには、基本的にはこれだけ。あまり凝りすぎるとかえって面倒になるのでこの程度としておいたほうがよいかと。