vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Markdown渲染和代码高亮

使用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.jsmarked模块,代码如下:

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指令的mountedupdated钩子的回调函数。这样,每当指令所绑定的值发生变化时,都会重新渲染Markdown文本并对代码块进行高亮显示。代码如下:

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

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

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

以上就是使用Vue指令实现Markdown渲染和代码高亮的详细内容,更多关于Vue Markdown渲染和代码高亮的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文