Search code examples
javascriptnuxt.jsmarkdown-it

How to use markdown-it plugins options in nuxt.js


I'm using @nuxtjs/markdownit to parse markdown files, I want to enable creating permanent links feature in 'markdown-it-anchor' plugin, I used following code in nuxt.config.js but not working:

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    typographer: true,
    html: false,
    use: [
      'markdown-it-anchor',
      'markdown-it-attrs',
      'markdown-it-div',
      'markdown-it-toc-done-right',
      'markdown-it-emoji'
    ]
  },
  'markdown-it-anchor': {
    level: 1,
    // slugify: string => string,
    permalink: true,
    // renderPermalink: (slug, opts, state, permalink) => {},
    permalinkClass: 'header-anchor',
    permalinkSymbol: '¶',
    permalinkBefore: true
  },

Solution

  • Self answering: I found the syntax in this post

    markdownit: {
        preset: 'default',
        linkify: true,
        breaks: true,
        typographer: true,
        html: false,
        use: [
          [
            'markdown-it-anchor',
            {
              level: 1,
              // slugify: string => string,
              permalink: true,
              // renderPermalink: (slug, opts, state, permalink) => {},
              permalinkClass: 'header-anchor',
              permalinkSymbol: '¶',
              permalinkBefore: true
            }
          ],
          'markdown-it-attrs',
          'markdown-it-div',
          'markdown-it-toc-done-right',
          'markdown-it-emoji'
        ]
      },