【Nuxt】markdown-it-anchorで日本語対応したアンカー記法にする方法

どーも、ぐるたか@guru_takaです。

Nuxt製アプリにmarkdown-it-anchorを導入し、見出しへ自動的にid=”日本語タイトル”を設置させたかったのですが、ひと手間&ハマりどころがあったので、メモします。

参考 valeriangalliat/markdown-it-anchor: Header anchors for markdown-it.

結論

まずはコードから紹介します。

@plugins/markdown-it.js
import MarkdownIt from 'markdown-it'
import uslug from 'uslug'
import markdownItAnchor from 'markdown-it-anchor'
const uslugify = (s) => uslug(s)

export default ({ app }, inject) => {
  const md = new MarkdownIt({
    injected: true,
    breaks: true,
    html: true,
    linkify: true,
    typography: true
  })

  md.use(require('markdown-it-sup'))
  md.use(require('markdown-it-footnote'))
  md.use(markdownItAnchor, {
    slugify: uslugify
  })
  inject('md', md)
}

あとはnuxt.config.js@plugins/markdown-it.jsを読み込ませればOKです。

ハマった点

最初は@nuxtjs/markdownit使っていましたが、markdown-it-anchorを導入すると、以下のようなエラーが発生。

plugin.apply is not a function

【Nuxt】@nuxtjs/markdownitでマークダウンからhtmlに生成する方法

原因を探すと、公式リポジトリのissueに同じ現象が報告されてました。importすれば、Okのようです。
参考 TypeError: plugin.apply is not a function with v5.2.4 · Issue #55valeriangalliat/markdown-it-anchor

参考リンク

参考 markdown-itのアンカー記法プラグインをブラウザで使う方法 - やってみる

コメントを残す