Bloggerでソースコードをきれいに表示する方法

無料で使えるGoogleのブログサービス「Blogger」で、ソースコードを見やすくきれいに表示する方法を紹介します。

方法はいくつかありますが、今回は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 -->