方法はいくつかありますが、今回はGoogle-code-prettifyを使います。
テーマのHTMLを編集
テーマのHTMLに、Google-code-prettifyに関する記述を追加します。念のためバックアップをとってからHTMLの編集を行ってください。
Bloggerのメニューの [テーマ] ＞ 右上のその他アイコン
をクリックします。
表示されたメニューの [HTMLを編集] をクリックします。
表示されたHTMLの</head>の前に次の内容を追加します。
<!-- Google-code-prettifyを追加 --> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"/> <!-- /Google-code-prettify -->
画面右下の「保存」ボタンをクリックして保存します。
ソースコードをきれいに表示する
Google-code-prettifyを使ってソースコードを表示する
投稿を作成する際、HTMLモードで次のようにソースコードを<pre>タグで囲います。<pre class="prettyprint"> ソースコード </pre>
ソースコードが、見やすく表示されます。
行番号を表示する
行番号を表示したい場合は、次のように「linenums」という記述を追加します。<pre class="prettyprint linenums"> ソースコード </pre>
白とグレーのしましま表示になって、5行ずつ行番号が表示されました。
オプションを設定する
1行ずつ行番号を表示する
行番号の表示をデフォルトの5行ずつから、1行ずつに変更したい場合は、こちらのcssを追加します。<style type="text/css">
/* Google-code-prettifyの行番号を1行ずつ表示する */
pre.prettyprint.linenums li{
list-style-type: decimal;
}
</style>
1行ずつ行番号が表示されました。
スキンを選択する
Google-code-prettifyには、5種類のスキンが用意されています。Gallery of themes for code prettifyで好みのスキンを選んで、「skin=」で指定します。
ここでは、「sunburst」というスキンを設定してみます。
<!-- Google-code-prettifyを追加 --> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"/> <!-- /Google-code-prettify -->
ソースコードの表示が、「sunburst」に変わりました。
言語を指定する
プログラミング言語を指定することもできます。<pre class="prettyprint lang=python"> pythonのソースコード </pre>
スクロールバーを表示する
長いソースが含まれている場合など、スクロールバーを表示したいときは、次のように指定します。<pre class="prettyprint linenums" style="overflow: auto; white-space: pre; word-wrap: normal;">
スクロールバーが追加されました。
まとめ
ソースコードを見やすく表示できるGoogle-code-prettifyは、オプション指定も簡単なのでとってもおすすめです。このサイトでは、次のように設定しています。
<!-- Google-code-prettifyを追加 -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
<style type='text/css'>
/* Google-code-prettifyの行番号を1行ずつ表示する */
pre.prettyprint.linenums li{
list-style-type: decimal;
}
</style>
<!-- /Google-code-prettify -->
