新建一个 RenderMarkdown.vue 组件
用于渲染 markdown 内容
<template>
<span v-html="markdownDom"></span>
</template>
安装npm包
pnpm i markdown-it markdown-it-highlightjs markdown-it-code-copy
配置 markdown-it 解析
import { watchEffect, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import markdownItHighlightjs from 'markdown-it-highlightjs'
import markdownItCodeCopy from 'markdown-it-code-copy'
const props = defineProps<{
markdownText: string
}>()
// 用于存放最终解析出来的dom
const markdownDom = ref<any>('')
// 初始化 markdown-it 实例
const md = new MarkdownIt()
// 配置代码高亮插件
md.use(markdownItHighlightjs)
// 配置代码块复制插件
md.use(markdownItCodeCopy)
// 解析markdown
const handleMarkdown = () => {
// 判断markdown为空不解析
if (!props.markdownText) {
return
}
// 解析markdown获取HTML
const html = md.render(props.markdownText)
markdownDom.value = html
}
watchEffect(() => {
handleMarkdown()
})
引入样式
- 安装 highlightjs
- 在全局css内引入
@import url(highlightjs/styles/default.css);
结尾