【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です。