ブログにコードを張る方法（Google-code-prettify）

以前、「SyntaxHighlighter」というツールでブログにソースを張る方法を展開していたが、 いつの間にか使えなくなっていた。

なので

新たにファイルのダウンロード不要で、 記事内に書いたコードをかっこよく見せる方法について調べてみた。 

事前準備

Bloggerへログインし「テーマ」⇒「カスタマイズ」⇒「HTMLを編集」

headerタグ内に以下を書く

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>
<style type="text/css">
  .prettyprint ol.linenums > li {
    list-style-type: decimal; 
  }
  pre.prettyprint {
    overflow: auto;
    word-wrap: normal;
  }
</style>

たったこれだけでOK。

実際には2～6行目はなくても動作するが、行番号を1行ずつ表示させたいので付けている。

 

コードを書く方法

記事内に以下のタグでコードを書いていく。

<pre class="prettyprint linenums">
ここにコードを書く
</pre>

言語は自動で判断してくれるらしい。。すごい！