Pugの中にMarkdownを埋め込んで表示させる方法

pugを使ってレンダリングしている、とあるサイトがあるのだが、ここにmarkdownを使ってコンテンツを追加したくなった。
ただし土台はpugで作ってしまっているし、私自身もこの作業にそこまで時間は割けないので、今の状態からうまーくmarkdownをpugの中に埋め込んでコンテンツを追加していけるようにしたいと考えていた。

というわけで調べてみたところ、pugの公式ドキュメント内にその記述があった。

pugjs.org

どうやらpugではFilterというpugの中で他の言語を利用するための仕組みがあるらしい。

上のページを参考にしつつ、実際にpugの中にmarkdownを仕込んで表示させるところまでをメモがてら書いていく。

前提

expressで作成したサイトで、view engineにpugの設定している状態。
pugの設定方法などはスキップ。

node.jsのバージョンは v16.14.0

jstransformer-markdown-itをインストールする

変換にはjstransformer-markdown-itを利用する。

www.npmjs.com

yarn add jstransformer-markdown-it

versionは 2.1.0 が入った。

あとはmarkdownを埋め込みたい箇所をpug内部に記述すればOK.
( :markdown-it(linkify langPrefix='highlight-') という配下にマークダウンを記述していく）

block content
  h2 テスト
  p test
  :markdown-it(linkify langPrefix='highlight-')
    ## テスト（マークダウン）
    test
    * 1111111
    * 22222222
    * 3333333333
    ```js 
    const a = 'aaaaa';
    console.log(a);
    ```

すると下記のようにレンダリングされる。