1.安装包
marked
:转换markdown语法为HTMLhighlight.js
:高亮代码块
npm install marked @types/marked highlight.js -S
2.导入使用
当前项目的技术栈是Vue3 + TS
<template>
<n-input type="textarea" v-model:value="value" @input="change" />
<div v-html="markdownToHtml" class="markdown-body"></div>
</template>
<script lang="ts" setup>
import { marked } from 'marked';
import { ref, shallowRef } from 'vue';
import hljs from 'highlight.js'
import 'highlight.js/styles/foundation.css'
const render = new marked.Renderer()
marked.setOptions({
renderer: render, // 这是必填项
gfm: true, // 启动类似于Github样式的Markdown语法
pedantic: false, // 只解析符合Markdwon定义的,不修正Markdown的错误
sanitize: false, // 原始输出,忽略HTML标签(关闭后,可直接渲染HTML标签)
// 高亮的语法规范
highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
})
const value = ref('**Hello,World**')
const markdownToHtml = shallowRef("")
markdownToHtml.value = marked(value.value)
const change = (value: string) => {
markdownToHtml.value = marked(value)
}
</script>
<style>
</style>
一定要记得导入
import 'highlight.js/styles/foundation.css'
否则代码将失去高亮效果
如需切换代码高亮的风格样式请前往highlight官方地址,修改foundation
为你所想要的代码样式名称
最后呈现效果
3.扩展使用
当然本文仅仅只是 演示输入框渲染
的,但是大部分情况我们前端需要渲染的markdown都是来自于后端接口
所以可以考虑将其封装为一个组件,将后端传入的值传入进来