python の markdown のコードブロックをシンタックスハイライトさせる方法

本ブログでは、記事を markdown で執筆して python を使って html に変換して作成しています。

単純に html に変換しただけでは <pre> <code> タグが生成されるだけで、スタイルが適用されません。

そこで、本記事では markdown のコードブロックを html に変換したときに、シンタックスハイライトさせる方法を説明します。

markdown のコードブロックとは次のような記述です。

```python
import markdown
```

シンタックスハイライトには、Prism.js を使用します。

では、解説していきます。

シンタクスハイライト Prism.js の構文

Prism.js を適用するためには、Prism.js が期待する html を出力する必要があります。
👉 Prism

公式サイトによると、Prism.js が期待する html は次のようになります。

<pre><code class="language-css">p { color: red }</code></pre>

これに合わせて python の markdown の html 変換を設定していきます。

拡張機能 fenced_code を使う

python の markdown に用意されている fenced_code という拡張機能を使えば、Prism.js が期待する html を出力することができます。

公式サイトと同じ html を出力するための python コードは次のとおりです。

import markdown

md = markdown.Markdown(extensions=[
    "fenced_code",
])
html = md.convert('''
```css
p { color: red }
```
''')

print(html)

python の markdown がわからない方は以下の解説を参考にしてください。
👉 python で markdown を html に変換する方法

Prism.js の JavaScript と CSS

私は、WordPress のテーマ Luxeritas を使っており、このテーマは Prism.js を標準で備えています。

なので、さっきの python コードで Prism.js が期待する html を出力さえすれば、ハイライトされるようになっています。

Luxeritas 使ってなかったり、WordPress じゃない Web サイトを構築するための用途であれば、Prism.js の JavaScript と CSS をページに読み込む必要があります。

といっても、2つのファイルを読むだけなので簡単です。
公式サイトを参考にしてください。
👉 Prism

fenced_code で行番号を表示する方法

Prism.js ではコードに行番号を表示できます。

そのためには、<pre> タグに CSS のクラス line-numbers を追加する必要があります。

fenced_code では、次のような記載方法で、任意の CSS クラスを <pre> タグに埋め込むことができます。

```{ .css .line-numbers }
p { color: red }
```

カッコの先頭の.cssは言語です。

このように line-numbers の CSS クラスを追加すると、次のように行番号を表示できます。

p { color: red }

スニペットに登録する

行番号の CSS クラスまで指定すると、毎回手入力するのはミスが多くなるのでスニペットの利用をおすすめします。

VSCode であれば、以下の定義を markdown のスニペットに登録すると便利です。
VSCode のスニペットの使い方については以下で解説しています。
👉 VSCode で定型文を繰り返し入力する方法 | 瓦ブログ

    "blog code": {
        "prefix": "code",
        "body": [
            "```{ .$1 .line-numbers}",
            "$2",
            "```"
        ]
    },

まとめ

本記事では、python で markdown でコードブロックを html に変換したときのシンタックスハイライトする方法を解説しました。

以上です、参考になれば幸いです。

Python

Posted by 鬼猿