Toshusai blog

知識の保管庫

nuxt/markdownitでpluginをoption付きで使う

https://github.com/nuxt-community/modules/tree/master/packages/markdownit

公式に載ってなかった

https://www.npmjs.com/search?q=keywords:markdown-it-plugin

ライブラリをインストールすればnuxt.config.jsmarkdownit.useにpluginを適用できる。

{
  modules: [
    '@nuxtjs/markdownit'
  ],

  // [optional] markdownit options
  // See https://github.com/markdown-it/markdown-it
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-div',
      'markdown-it-attrs'
    ]
  }
}

ここでmarkdown-it-anchorをオプション付きで使いたい。 useに配列で['plugin-name', options]にするとオプション付きでプラグインを使える。

  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-prism',
      [
        'markdown-it-anchor',
        {
          level: 6,
          permalink: true,
          permalinkSymbol: '¶',
          permalinkBefore: true
        }
      ]
    ],
  },

References

https://stackoverflow.com/questions/60436593/how-to-use-markdown-it-plugins-options-in-nuxt-js