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

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

import { markedDirective } from './path/to/markedDirective'
app.directive('marked', markedDirective)

<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>

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

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

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)
    })
  }
}

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