vue-cli 3.0 下 markdown-it 的配置不生效

[weifu2]

markdown-it 的配置不生效，怎么解决？

[showonne]

可以看下README里在chainWebpack配置，是可以的。

[Devil-Cong]

options 直接传递自定义的 markdown-it 实例确实会有问题！ 以下是调试时的一些情况。

markdown 内容：

Hello Wrold

:::thumbnail
![Minion](https://octodex.github.com/images/minion.png)

![Minion](https://octodex.github.com/images/minion.png)
:::

一开始的配置：

var md = require('markdown-it')()
md.use(require('markdown-it-container'), 'thumbnail')
// webpack 配置
{
  loader: 'vue-markdown-loader/lib/markdown-compiler',
  options: md
}

结果：解析结果完全乱掉

然后在源码最后看到这个 于是配置调整为：

var md = require('markdown-it')()
md.use(require('markdown-it-container'), 'thumbnail')
md.raw = true
// webpack 配置
{
  loader: 'vue-markdown-loader/lib/markdown-compiler',
  options: md
}

结果：img 标签能解析出来，但是 use 的插件失效 无奈，改为不通过直接传递自定义 markdown-it 实例的方式：

// webpack 配置
{
  loader: 'vue-markdown-loader/lib/markdown-compiler',
  options: {
    raw: true,
    use: [
      [require('markdown-it-container'), 'thumbnail']
    ]
  }
}

结果：解析正确

[gitwd1998]

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const hljs = require('highlight.js')
const transliteration = require('transliteration')

module.exports = defineConfig({
  transpileDependencies: true,
  parallel: false,
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true,
        html: true,
        linkify: true,
        typographer: true,
        highlight(str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(lang, str, true).value
            } catch (_) { }
          }
          return ''
        },
        use: [
          // [require('markdown-it-prism'), {
          //   plugins: ['show-language', 'copy-to-clipboard', 'inline-color', 'previewers'], // 插件没生效
          // }],
          [require('markdown-it-anchor'), {
            level: 1,
            slugify: transliteration.slugify,
            permalink: true,
            permalinkSpace: true,
            permalinkBefore: true
          }],
          [require('markdown-it-container'), 'demo', {
            validate(params) {
              return params.trim().match(/^demo\s*(.*)$/)
            },
            render(tokens, idx) {
              const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
              if (tokens[idx].nesting === 1) {
                const description = m && m.length > 1 ? m[1] : ''
                const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : ''
                console.log('\x1B[36m%s\x1B[0m', content)
                return `<Preview>
                  ${description}
                  <!--iui-demo: ${content}:iui-demo-->
                `
              }
              return '</Preview>'
            }
          }]
        ]
      })
      .end()
  }
})