markdown-it + Prism.jsでシンタックスハイライト

Nuxt + Contentful + Netlifyでブログ作成の関連記事です。

当ブログでは、記事はContentful上にてMarkdown記法で作成、保存しています。
そして、Markdown記法からHTMLへの変換には"markdown-it"を使用しています。

しかし、"markdown-it"だけではソースコード部分が見づらかったため、"Prism.js"でシンタックスハイライトする設定をしました。
Nuxt.js + markdown-itでPrism.jsを使用している記事があまりなかったので、簡単にまとめてみました。

Prism.jsの導入方法

@nuxtjs/markdownitはインストール済みとして、Prism.jsをインストール

$ npm install prismjs

pluginsフォルダにprism.jsを作成します。

import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'

export default Prism

2行目でimportしているcssファイルを変更すればスタイルを変更できます。
テーマは/node_modules/prismjs/themes/に入っています。
スタイルの比較はPrism.jsを参照してください。

nuxt.config.jsのプラグインに~/plugins/prism.jsを追加

  plugins: [
    '~/plugins/contentful',
    '~/plugins/prism',
  ],

Prism.jsを有効にするページのmounttdにPrism.highlightAll()を追加。

/pages/posts/_slug.vue

  mounted() {
    Prism.highlightAll()
  }

ここまでの設定で、ソースコードのシンタックスハイライトを有効にできました。
Contentful上で、以下のようにバッククォート(`)3つで囲むことでコードブロックにできます。
バッククォートの後に言語を指定することができます。

```js
export default {
  mounted() {
    console.log("mounted!")
  }
}
```

上のコードが↓のように表示されます。

Line Numbersで行番号を表示

より見やすさを向上するため、行番号を表示するプラグインを有効にします。 プラグインは/node_modules/prismjs/plugins/に入っています。

先ほど作成した/plugins/prism.jsにline-numbersのプラグインを追加

import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

export default Prism

そして、<pre>またはその親の要素にclass="line-numbers"を設定すると、行番号が表示されるようになります。 Contentfulから取得した記事本文を表示する要素のクラスにline-numbersを追加します。

/pages/posts/_slug.vue

  <div class="post-content line-numbers" v-html="$md.render(post.fields.content)"></div>

すると行番号が表示されます。

以上で設定完了になります。
markdown-itだけの状態と比べるとかなり見やすくなりました。