脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Markdown渲染和代码高亮

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

 更新时间：2023年09月21日 08:49:02   作者：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.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-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤，文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue3 中 Lottie动画库的使用指南

    Vue3 中 Lottie动画库的使用指南

    Lottie 是 Vue3 项目中实现高品质动画的最佳选择之一,通过封装通用组件可快速集成到项目中,结合其丰富的 API 能实现灵活的交互控制,本文来介绍一下Lottie动画库的使用,通过代码介绍的非常详细,需要的朋友可以参考下
    2026-02-02
  • vue项目双滑块组件使用

    vue项目双滑块组件使用

    这篇文章主要介绍了vue项目双滑块组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • ElementUI表格错位修复心得分享

    ElementUI表格错位修复心得分享

    这篇文章主要介绍了ElementUI表格错位修复心得,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • Vue中nvm-windows的安装与使用教程(亲测)

    Vue中nvm-windows的安装与使用教程(亲测)

    nvm全英文也叫node.js version management，是一个nodejs的版本管理工具，这篇文章主要介绍了Vue中nvm-windows的安装与使用,需要的朋友可以参考下
    2023-02-02
  • Vue3中泛型使用unknown优于any问题

    Vue3中泛型使用unknown优于any问题

    在Vue3中,建议优先使用`unknown`而不是`any`,因为`unknown`提供了更好的类型安全保证,在组件Props、组合式函数、事件处理和类型守卫中使用`unknown`,可以有效避免运行时错误,保持TypeScript的类型安全优势
    2025-10-10
  • vue中使用element日历组件的示例代码

    vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • Vue移动端开发的适配方案与性能优化技巧总结大全

    Vue移动端开发的适配方案与性能优化技巧总结大全

    在移动端开发中,vue项目需要解决不同设备尺寸的适配问题,下面这篇文章主要介绍了Vue移动端开发的适配方案与性能优化技巧总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-03-03
  • 深入了解Vue Pinia持久化存储二次封装

    深入了解Vue Pinia持久化存储二次封装

    Pinia 是2019年由vue.js官方成员重新设计的新一代状态管理库,类似Vuex,下面我们就来学习一下如何通过Pinia实现持久化存储的相关知识,感兴趣的小伙伴可以了解下
    2023-12-12
  • Vue路由的模块自动化与统一加载实现

    Vue路由的模块自动化与统一加载实现

    这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论