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

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

typescript 复制代码
export const markedDirective: Directive = {
  mounted: formatValue,
  updated: formatValue
}

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

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

相关推荐
我命由我123458 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
快起来别睡了13 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
张旭超1 小时前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
亿坊电商1 小时前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
程序猿小D2 小时前
[附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
数据库·vue.js·spring boot·mysql·毕业设计·推荐算法·学生咨询系统
我爱加班、、2 小时前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉2 小时前
vue快速上手
前端·javascript·vue.js
大菠萝学姐2 小时前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
掘金012 小时前
吊炸天!Vue 3组件生命周期全掌控 —— 可复用Composable黑科技封装指南
vue.js
咔咔咔索菲斯3 小时前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js