SHIMMER
如何在vue3中使用markdown-it解析markdown
前端|vue3
发布于2023-08-18 最近修改2023-12-25
1688
0
Shimmer

新建一个 RenderMarkdown.vue 组件

用于渲染 markdown 内容
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);

结尾

目录