Markdown表示のコードスニペットのシンタックスハイライトをNuxt.jsアプリに実装してみる

Markdown表示に対応した前回の記事の続きで、今回はコード表示の部分をシンタックスハイライトに対応させます。

パッケージをインストールします。

$ npm install markdown-it-highlightjs

package.json の依存性の記述には以下が追加されました。

    "markdown-it-highlightjs": "^4.0.1"

nuxt.config.js に以下のような記述を追加します。cssの中身を追加し、markdownit の use にも追加します。

nuxt.config.js

  css: [
    // ref https://highlightjs.org/static/demo/
    'highlight.js/styles/dark.css',
  ],

  markdownit: {
    // ref https://github.com/markdown-it/markdown-it
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-highlightjs',
    ],
  },

CSSの配色は選ぶことができ、以下のページから選択し、nuxt.config.jsに記載するCSSのファイル名を変えればよいようです。

これだけでシンタックスハイライトに対応できました。

※サンプルのスクショにある表はChatGPTに県庁所在地を聞いたものですが、埼玉県の県庁所在地は「さいたま」です。

追記

次の記事