highlight.jsを使ってBloggerでコードをハイライトする

Blogger上でコードを見やすくする方法について調べたのでメモ。

色々やり方はあるようですが、「highlight.js」を使ってみることにします。

使い方もシンプルで、CDNで提供されているため簡単に導入できそうです。

まず公式ページにアクセスし、「Get version」をクリックします。

• highlight.js

２つあるCDNのうち、好きな方ほうからstylesheetとJavaScriptのタグをコピーします。

次に再びTOPページに戻り、「Usage」をクリックします。

そして、一番下のscriptタグをコピーします。

まとめると、以下のような３行になります。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これをBloggerの管理画面のレイアウト画面にて「ガジェットを追加」で「HTML/JavaScript」を選択し、

コピーした３行を貼り付ければ準備は完了です。タイトルは任意です。

なお、stylesheetはdefault以外にも種類があり、デモ画面で確認できます。

今回スタイルは「railscasts」を選びました。

では、早速以下のPythonコードをハイライトしてみたいと思います。

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

Bloggerの投稿画面で「HTML」の編集を選択し、コードを以下のタグで囲みます。

<pre><code class="python">...</code></pre>

こんな感じです。

<pre><code class="python">@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
</code></pre>

なお、先頭の改行は改行として認識されますが、後尾の改行は自動的に削られます。

そのため、先頭(<code>の直後)には改行を入れないようにします。

結果はこのようになります。

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

ハイライトされましたね！

なお、コードの種類はclass属性で指定しますが、指定しなくても自動で判別してハイライトしてくれるようです。

参考リンク

• ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
• Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう