快捷導(dǎo)航

使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮

更新時(shí)間：2023年09月21日 08:49:02 作者：ErvinHowell

在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下

在前端開發(fā)中，我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上，同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示。今天我將分享一段代碼，通過Vue指令實(shí)現(xiàn)了這個(gè)功能。

首先，你需要安裝一些依賴。在你的項(xiàng)目中執(zhí)行以下命令：

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

接下來，我們來看一下具體的代碼實(shí)現(xiàn)。

在main.ts文件中，我們需要注冊一個(gè)全局的Vue指令。代碼如下：

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

在Vue組件中，你可以使用v-marked指令來渲染Markdown文本，并對代碼塊進(jìn)行高亮顯示。示例代碼如下：

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

上面的示例代碼中，我們導(dǎo)入了highlight.js的樣式文件，并且使用code.md文件中的Markdown文本作為示例。

接下來，讓我們來看一下具體的實(shí)現(xiàn)代碼。

首先，我們需要導(dǎo)入highlight.js和marked模塊，代碼如下：

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

然后，我們需要?jiǎng)?chuàng)建一個(gè)marked的渲染器，并設(shè)置一些選項(xiàng)，代碼如下：

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

在Vue指令的具體實(shí)現(xiàn)中，我們定義了一個(gè)formatValue函數(shù)，該函數(shù)用于將Markdown文本渲染成HTML，并對代碼塊進(jìn)行高亮顯示。代碼如下：

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函數(shù)作為Vue指令的mounted和updated鉤子的回調(diào)函數(shù)。這樣，每當(dāng)指令所綁定的值發(fā)生變化時(shí)，都會(huì)重新渲染Markdown文本并對代碼塊進(jìn)行高亮顯示。代碼如下：

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

到此為止，我們已經(jīng)完成了整個(gè)功能的實(shí)現(xiàn)。

總結(jié)一下，通過上述代碼，我們可以在Vue項(xiàng)目中使用v-marked指令將Markdown文本渲染成HTML，并對其中的代碼塊進(jìn)行高亮顯示。這對于展示文檔、博客等場景非常有用。

以上就是使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮的詳細(xì)內(nèi)容，更多關(guān)于Vue Markdown渲染和代碼高亮的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具