使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中，我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上，同時還希望能夠對代碼塊進行高亮顯示。今天我將分享一段代碼，通過Vue指令實現(xiàn)了這個功能。
首先，你需要安裝一些依賴。在你的項目中執(zhí)行以下命令：
pnpm add highlight.js marked @types/marked -D
接下來，我們來看一下具體的代碼實現(xiàn)。
在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文本作為示例。
接下來，讓我們來看一下具體的實現(xiàn)代碼。
首先，我們需要導入highlight.js和marked模塊，代碼如下：
import hljs from 'highlight.js'
import { marked } from 'marked'
import { Directive, DirectiveHook, nextTick } from 'vue'然后，我們需要創(chuàng)建一個marked的渲染器，并設置一些選項，代碼如下：
const render = new marked.Renderer()
marked.setOptions({
renderer: render,
gfm: true,
pedantic: false
})在Vue指令的具體實現(xiàn)中，我們定義了一個formatValue函數(shù)，該函數(shù)用于將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函數(shù)作為Vue指令的mounted和updated鉤子的回調函數(shù)。這樣，每當指令所綁定的值發(fā)生變化時，都會重新渲染Markdown文本并對代碼塊進行高亮顯示。代碼如下：
export const markedDirective: Directive = {
mounted: formatValue,
updated: formatValue
}到此為止，我們已經(jīng)完成了整個功能的實現(xiàn)。
總結一下，通過上述代碼，我們可以在Vue項目中使用v-marked指令將Markdown文本渲染成HTML，并對其中的代碼塊進行高亮顯示。這對于展示文檔、博客等場景非常有用。
以上就是使用Vue指令實現(xiàn)Markdown渲染和代碼高亮的詳細內容，更多關于Vue Markdown渲染和代碼高亮的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue實現(xiàn)的仿淘寶購物車功能,結合完整實例形式較為詳細的分析了vue.js仿淘寶購物車功能的具體樣式、功能相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-01-01
基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
今天小編就為大家分享一篇快速解決Vue項目在IE瀏覽器中顯示空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue純前端如何實現(xiàn)導出簡單Excel表格的功能
這篇文章主要介紹了如何在Vue項目中使用vue-json-excel插件實現(xiàn)Excel表格的導出功能,包括安裝依賴、引入插件、使用組件、設置表頭和數(shù)據(jù)、處理空數(shù)據(jù)情況、源代碼修改以解決常見問題,需要的朋友可以參考下2025-01-01
vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決
這篇文章主要為大家介紹了vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
下面小編就為大家分享一篇在vue項目中引入highcharts圖表的方法(詳解)，具有很好的參考價值，希望對大家有所幫助2018-03-03
當針對不同客戶需要提供不同的圖標時,頁面其他圖標好替換,但是網(wǎng)頁圖標就不太一樣了,下面這篇文章主要給大家介紹了關于vue中修改瀏覽器圖標和名字的幾種方式,需要的朋友可以參考下2022-10-10
Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)
這篇文章主要介紹了Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01