新建一个 RenderMarkdown.vue 组件

html
复制代码
<template>
    <span v-html="markdownDom"></span>
</template>

安装npm包

bash
复制代码
pnpm i markdown-it markdown-it-highlightjs markdown-it-code-copy

配置 markdown-it 解析

javascript
复制代码
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()
})

引入样式

1. 安装 highlightjs
2. 在全局css内引入

css
复制代码
@import url(highlightjs/styles/default.css);

结尾

原文链接 https://wp-boke.work/blog-details/59