Python Markdown の CodeHilite エクステンションを有効にしてみた

※2016年6月27日に書いたブログ記事からの転記です。

Jinja2 で HTML を吐き出すときにカスタムフィルターで Markdown を HTML に変換する際、<code> タグの内容に自動でシンタックス・ハイライトされるように Python Markdown の CodeHilite エクステンションを有効にしてみました。

Python Markdown を Jinja2 のカスタムフィルターとして使う方法は「Jinja2でMarkdown記法をHTMLに変換するカスタムフィルター」の記事でご紹介していますので参考にしてください。

CodeHilite エクステンションは Python Markdown のライブラリにデフォルトで含まれていますので、普通にインストール（またはフォルダを配置してインポート）している場合はそのまま使います。

ただし、CodeHilite エクステンションは Pygments というライブラリを使っているので、それはインストール（またはフォルダを配置）しておく必要があります。

自分の場合は以下のようにフォルダを配置しました。

app_id/
  app.yaml
    appengine_config.py
      main.py
      lib/
        markdown
        pygments

App Engine アプリケーションで lib を PYTHONPATH に加える方法については「appengine_config.pyでパッケージ置き場のパスを通す」の記事を参考にしてください。

次に Jinja2 のカスタムフィルターに少し手を加えます。

import markdown
from markdown.extensions.codehilite import CodeHiliteExtension

def markdown2html(value):
    return markdown.Markdown(
        extensions=[CodeHiliteExtension()]
    ).convert(value)

markdown.Markdown() のオプション引数 extensions に、Python Markdown の extensions の中の codehilite というモジュールの CodeHiliteExtension というクラスのインスタンスを渡してあげます（複数のエクステンションを渡せるよう引数はリスト型）

ここまですると、Jinja2 テンプレートの中で

{{ text | markdown2html | safe }}

としてあげるだけで Jinja2 が吐き出した HTML の code タグの中身が細かく span タグでマークアップされます。

この span タグの各クラスに対応して文字を装飾するスタイルシートを当ててあげれば、キレイにハイライトされるようになるというカラクリです。

スタイルシートは Pygments のドキュメントを読んで Pygments から出力させてもいいですし、Pygments のクラスに対応したサードパーティ製のスタイルシートを拾ってきて使うのも手だと思います。

自分はGitHub - richleland/pygments-css: css files created from pygment's built-in stylesの中から github.css というスタイルシートを拝借しました。

以上です。