Bloggerでソースコード(プログラム)を綺麗に表示する方法

Bloggerでソースコード(プログラム)を綺麗に表示する方法。

今回はGoogleが提供している code-prettify を使用する。

Bloggerの管理画面から「テーマ」を選び「HTMLの編集」をクリックします。
そして、</head>タグの直前に、以下の一行を追加して、「保存」。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

次に、ブログの記事を作成する。
まず、通常の「作成」モードで、ソースコードを記入する。

int a = 5;

次に「HTML」モードを使用し、ソースコードを<pre>タグで囲む。

<pre class="prettyprint">
int a = 5;
</pre>

class="prettyprint" と指定するところがポイント。

ちなみに、code-prettifyのスタイルはいくつかある。以下のURLで確認できる。
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html

スタイルを指定するには、パラメータを指定してrun_prettify.jsを読みこむ。以下は本ブログで使用している例。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>