BloggerでcodeのSyntax Highlighting

Bloggerに限りませんが、Blog PostでcodeをSyntax Highlightingする一つの方法は、google-code-prettifyを使用することです。

https://code.google.com/p/google-code-prettify/

他の方法としてはGithub GISTをembedすれば簡単ですが、一つのPageで多用するとPageが重くなるのでそちらを使いたい場合は適度に自重してください。

以下、Bloggerでのgoogle-code-prettifyの導入方法です。

スタイルの選択

好みのスタイルをhttp://google-code-prettify.googlecode.com/svn/trunk/styles/index.html から選択します。本ブログではSunburstを採用します。異論は認めません。 URLをコピーします。Sunburstの場合は、https://code.google.com/p/google-code-prettify/source/browse/trunk/styles/sunburst.css です。以下の手順は、Sunburstと仮定して書いています。

HTMLエディタ

Blogger Admin PanelにあるSide Menuの、Template -> Edit HTMLでHTMLエディタ画面を開きます。

スタイルの貼り付け

head tag内の末尾に以下のコードを貼り付けます。

<link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css">

templateがxmlである場合、末尾に / が必要です。

<link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css" />

スクリプトの貼付け

HTMLエディタ内のbody tagの末尾に以下のコードを貼り付けます。

<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> <script type="text/javascript">prettyPrint();</script>

Save templateボタンを押下します。これで設定は完了です。

---

動作確認

preタグ

pre tagのclassにprettyprintを指定すると、syntax highlightされます。

    var logging = context.services.logging;
    logging.debug('Got request ${request.uri} .');