ソースコードをgoogle-code-prettifyでブログに貼り付ける-76log

シンタックスハイライト

google-code-prettifyはソースコードを簡単にブログに設置することができます。
プログラムっぽく色分け（シンタックスハイライト）してくれるので、見易くなりブログでデザインのアクセントにもなりそうです。

使い方が簡単そうだったので導入してみました。

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

上のコードをHTMLの<head>〜</head>の間に追加します。

<pre class="prettyprint">表示したいソースコード</pre>

あとは表示したいところにpreタグで囲んで貼り付けるだけです。

<pre class="prettyprint linenums">表示したいソースコード</pre>

「linenums」を追加することで行番号を表示することができます。

<pre class="prettyprint linenums:5">表示したいソースコード</pre>

「linenums:番号」で行番号を任意の番号から始めることができます。

テーマが用意されていてデサインも簡単に変えれるようです。

Click on a theme name for a link to the file in revision control. Print preview this page to see how the themes work on the printed page.

<、>、&などはエスケープ（参照文字、&、<、> に変換）する必要があります。

これは大変だーっと思っていたら、ワンクリックで変換してくれる素晴らしいツールがありました。

説明基本入力された内容の「&」、「"」、「'」、「<」、「>」を参照文字に変換します。用途ブログにソースコードを貼る際などにご利用ください。

オプションで<code></code>や<pre></pre>で囲むこともできます。