使用Vue指令实现Markdown渲染和代码高亮
作者：ErvinHowell
在前端开发中,我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上,同时还希望能够对代码块进行高亮显示,今天我将分享一段代码,通过Vue指令实现了这个功能,需要的朋友可以参考下
在前端开发中，我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上，同时还希望能够对代码块进行高亮显示。今天我将分享一段代码，通过Vue指令实现了这个功能。
首先，你需要安装一些依赖。在你的项目中执行以下命令：
pnpm add highlight.js marked @types/marked -D
接下来，我们来看一下具体的代码实现。
在main.ts文件中，我们需要注册一个全局的Vue指令。代码如下：
import { markedDirective } from './path/to/markedDirective'
app.directive('marked', markedDirective)在Vue组件中，你可以使用v-marked指令来渲染Markdown文本，并对代码块进行高亮显示。示例代码如下：
<template> <div v-marked:hl="code"></div> </template> <script setup lang="ts"> import 'highlight.js/styles/atom-one-dark.css' import code from '@/config/code.md?raw' </script>
上面的示例代码中，我们导入了highlight.js的样式文件，并且使用code.md文件中的Markdown文本作为示例。
接下来，让我们来看一下具体的实现代码。
首先，我们需要导入highlight.js和marked模块，代码如下：
import hljs from 'highlight.js'
import { marked } from 'marked'
import { Directive, DirectiveHook, nextTick } from 'vue'然后，我们需要创建一个marked的渲染器，并设置一些选项，代码如下：
const render = new marked.Renderer()
marked.setOptions({
renderer: render,
gfm: true,
pedantic: false
})在Vue指令的具体实现中，我们定义了一个formatValue函数，该函数用于将Markdown文本渲染成HTML，并对代码块进行高亮显示。代码如下：
const formatValue: DirectiveHook = async (el, binding) => {
const html = marked(binding?.value ?? '')
el.innerHTML = html
await nextTick()
if (binding.arg === 'hl') {
const blocks = el.querySelectorAll('pre code')
blocks.forEach((block: any) => {
hljs.highlightBlock(block)
})
}
}最后，我们将formatValue函数作为Vue指令的mounted和updated钩子的回调函数。这样，每当指令所绑定的值发生变化时，都会重新渲染Markdown文本并对代码块进行高亮显示。代码如下：
export const markedDirective: Directive = {
mounted: formatValue,
updated: formatValue
}到此为止，我们已经完成了整个功能的实现。
总结一下，通过上述代码，我们可以在Vue项目中使用v-marked指令将Markdown文本渲染成HTML，并对其中的代码块进行高亮显示。这对于展示文档、博客等场景非常有用。
以上就是使用Vue指令实现Markdown渲染和代码高亮的详细内容，更多关于Vue Markdown渲染和代码高亮的资料请关注脚本之家其它相关文章！