Open weifu2 opened 6 years ago
可以看下README里在chainWebpack
配置,是可以的。
options
直接传递自定义的 markdown-it
实例确实会有问题!
以下是调试时的一些情况。
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']
]
}
}
结果:解析正确
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()
}
})
markdown-it 的配置不生效,怎么解决?