使用Vue指令实现Markdown渲染和代码高亮
在前端开发中，我们经常需要将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渲染和代码高亮的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue实现的仿淘宝购物车功能,结合完整实例形式较为详细的分析了vue.js仿淘宝购物车功能的具体样式、功能相关实现技巧与操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
今天小编就为大家分享一篇快速解决Vue项目在IE浏览器中显示空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中使用Sortable的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了如何在Vue项目中使用vue-json-excel插件实现Excel表格的导出功能,包括安装依赖、引入插件、使用组件、设置表头和数据、处理空数据情况、源代码修改以解决常见问题,需要的朋友可以参考下2025-01-01
vue父组件传值子组件报错Avoid mutating a prop directly解决
这篇文章主要为大家介绍了vue父组件传值子组件报错Avoid mutating a prop directly解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解)，具有很好的参考价值，希望对大家有所帮助2018-03-03
当针对不同客户需要提供不同的图标时,页面其他图标好替换,但是网页图标就不太一样了,下面这篇文章主要给大家介绍了关于vue中修改浏览器图标和名字的几种方式,需要的朋友可以参考下2022-10-10
Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
这篇文章主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vue-resource 拦截器interceptors使用详解
这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论