如何在vue3中使用markdown-it解析markdown

新建一个 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()
})

引入样式

1. 安装 highlightjs
2. 在全局css内引入 @import url(highlightjs/styles/default.css);

结尾

原文链接 wp-boke.work/blog-detail…