使用Vue指令实现Markdown渲染和代码高亮

在前端开发中，我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上，同时还希望能够对代码块进行高亮显示。今天我将分享一段代码，通过Vue指令实现了这个功能。

首先，你需要安装一些依赖。在你的项目中执行以下命令：

bash 复制代码

pnpm add highlight.js marked @types/marked -D

接下来，我们来看一下具体的代码实现。

在main.ts文件中，我们需要注册一个全局的Vue指令。代码如下：

typescript 复制代码

import { markedDirective } from './path/to/markedDirective'

app.directive('marked', markedDirective)

在Vue组件中，你可以使用v-marked指令来渲染Markdown文本，并对代码块进行高亮显示。示例代码如下：

html 复制代码

<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模块，代码如下：

typescript 复制代码

import hljs from 'highlight.js'
import { marked } from 'marked'
import { Directive, DirectiveHook, nextTick } from 'vue'

然后，我们需要创建一个marked的渲染器，并设置一些选项，代码如下：

typescript 复制代码

const render = new marked.Renderer()
marked.setOptions({
  renderer: render,
  gfm: true,
  pedantic: false
})

在Vue指令的具体实现中，我们定义了一个formatValue函数，该函数用于将Markdown文本渲染成HTML，并对代码块进行高亮显示。代码如下：

typescript 复制代码

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文本并对代码块进行高亮显示。代码如下：

typescript 复制代码

export const markedDirective: Directive = {
  mounted: formatValue,
  updated: formatValue
}

到此为止，我们已经完成了整个功能的实现。

总结一下，通过上述代码，我们可以在Vue项目中使用v-marked指令将Markdown文本渲染成HTML，并对其中的代码块进行高亮显示。这对于展示文档、博客等场景非常有用。