markdown渲染组件及语法扩展
需求描述
实现markdown渲染组件,并且增加如下语法扩展:
感兴趣的同学可以完成下面的练习:
::: card pack/somepackid 测试题包 :::
渲染后将card部分显示为卡片样式。
实现机制
-
在 common/components/MarkdownIt.vue
中,仿照 VueMarkdown 实现基本的渲染功能(可删减大多数 props)。 -
增加常用插件,如 katex 等 -
使用 markdown-it-container 将 card container 替换为 PackInlineCard component(将来替换为 InlineSmartCard)(见下方参考代码) -
在 markdown component 的 render 函数中,渲染 markdown 渲染结果中的 vue component
参考代码:
const md = require('markdown-it')()
md.use(require('markdown-it-container'), 'card', {
render(tokens, idx) {
const m = tokens[idx].info.trim().match(/^card\s+([^\s]*)(\s+([^\s:]*))?/)
if (tokens[idx].nesting === 1) {
const url = md.utils.escapeHtml(m[1])
const name = md.utils.escapeHtml(m[3])
// opening tag
return `<PackInlineCard :url="${url}"${
name && ' :name="' + name + '"'
}>\n`
} else {
return '</PackInlineCard>'
}
},
})
console.log(md.render('::: card pack/someid 测试题包\ntest\n:::\n'))
// outputs:
// <PackInlineCard :url="pack/someid" :name="测试题包">
// <p>test</p>
// </PackInlineCard>