前端解析markdown處理代碼塊高亮并添加復(fù)制功能實例代碼
更新時間：2025年11月12日 09:42:53 作者：yuan溜溜
在Markdown中,原生語法并不直接支持文字高亮,不過你可以通過一些擴展的Markdown語法或者HTML標(biāo)簽來實現(xiàn),這一效果這篇文章主要介紹了前端解析markdown處理代碼塊高亮并添加復(fù)制功能的相關(guān)資料,需要的朋友可以參考下
一、Marked.js簡介與基本使用
Marked.js是一個輕量級的Markdown解析器，可以將Markdown文本快速轉(zhuǎn)換為HTML。它易于使用且高度可定制。
基本使用方法
首先，安裝引入Marked.js庫：
npm i marked.js
import { Marked } from 'marked'
然后，使用簡單的API進(jìn)行轉(zhuǎn)換：
// 解析Markdown文本 const markdownText = '# 標(biāo)題\n\n這是一段**加粗**的文本。'; const htmlContent = marked.parse(markdownText);
二、實現(xiàn)代碼語法高亮
雖然Marked.js可以解析代碼塊，但它本身不提供語法高亮功能。我們需要結(jié)合marked-highlight和Highlight.js來實現(xiàn)這一功能。
1. 引入Highlight.js和marked-highlight
marked-highlight是一個專門為Marked.js設(shè)計的擴展包，它需要配合highlight.js才能實現(xiàn)代碼高亮功能。marked-highlight本身并不包含高亮邏輯，它只是提供了一個橋梁，讓Marked.js能夠方便地使用Highlight.js。
import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css'
2. 配置Marked.js使用Highlight.js和markedHighlight
// 配置Marked.js
const marked = new Marked(
markedHighlight({
async: false, // 如果是異步的，可以設(shè)置為 true
langPrefix: 'language-', // 可選：用于給代碼塊添加前綴
highlight: code => {
return hljs.highlightAuto(code).value
},
})
)
配置完成之后使用
<div v-html="markdown"></div> const markdown = computed(() => marked.parse(mdStr))
效果如下：
三、獲取語言類型以及添加代碼復(fù)制功能
// 復(fù)制邏輯
const copyToClipboard = codeBlock => {
const answer = codeBlock.textContent.trim()
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard
.writeText(answer)
.then(() => {
showSuccessToast('復(fù)制成功')
})
}
}
// 獲取語言類型
const getLanguageCode = codeBlock => {
const classList = codeBlock.className.split(' ')
const langClass = classList.find(class => class.startsWith('language-'))
if (langClass) {
return langClass.replace('language-', '')
}
const parentClassList = codeBlock.parentNode.className.split(' ')
const preLangClass = parentClassList.find(class => class.startsWith('language-'))
if (preLangClass) {
return preLangClass.replace('language-', '')
}
return null
}
// 添加復(fù)制按鈕功能
const addCopyBtns = () => {
nextTick(() => {
const codeBlocks = document.querySelectorAll('pre code')
codeBlocks.forEach(block => {
if (block.parentNode.querySelector('.code-box')) {
return
}
const parent = block.parentNode
const codeBoxEle = document.createElement('div')
codeBoxEle.className = 'code-box'
const language = getLanguageCode(block)
const langEle = document.createElement('span')
langEle.className = 'code-lang'
langEle.textContent = language || 'code'
const copyButtonEle = document.createElement('div')
copyButtonEle.className = 'copy-button'
copyButtonEle.innerHTML = '復(fù)制'
copyButtonEle.onclick = () => copyToClipboard(block)
codeBoxEle.appendChild(langEle)
codeBoxEle.appendChild(copyButtonEle)
parent.classList.add('code-box')
parent.appendChild(codeBoxEle)
})
})
}
ve3項目中使用（因為是流式輸出，所以需要監(jiān)聽返回內(nèi)容）
watch(markdown, newValue => {
if (newValue) {
nextTick(() => {
addCopyBtns()
})
}
})
onMounted(() => {
addCopyBtns()
})
效果如下
四、總結(jié)
Marked.js本身是一個純JavaScript編寫的Markdown解析器，因此它沒有語言限制——它可以在任何支持JavaScript的環(huán)境中運行，通過結(jié)合Marked.js和Highlight.js，我們可以輕松實現(xiàn)Markdown文檔的解析和代碼高亮功能。添加復(fù)制按鈕進(jìn)一步提升了用戶體驗，讓用戶可以方便地獲取代碼片段。
對于react或者vue項目也可以使用其相應(yīng)的開源方案，使用更加簡潔，比如（需要的可以自行去了解）
Vue生態(tài)系統(tǒng)
- vue-markdown - 基于Marked.js的Vue組件
- @vuepress/markdown - VuePress使用的Markdown處理器
- vue-highlightjs - Vue的代碼高亮指令
- element-plus - 提供ElCode組件用于代碼展示
React生態(tài)系統(tǒng)
- react-markdown - 最流行的React Markdown渲染器
- react-syntax-highlighter - 功能強大的代碼高亮組件
- highlight.js - 通用的代碼高亮庫
- @uiw/react-md-editor - 帶編輯功能的Markdown組件
到此這篇關(guān)于前端解析markdown處理代碼塊高亮并添加復(fù)制功能的文章就介紹到這了,更多相關(guān)前端解析markdown代碼塊高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文為大家詳細(xì)介紹下通過jquery和原生javascript判斷瀏覽器信息包括：判斷瀏覽器是否為IE以及IE版本是多少等等，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要介紹了ES6擴展運算符和rest運算符用法,結(jié)合實例形式分析了ES6擴展運算符和rest運算符基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
Typescript 實現(xiàn)函數(shù)重載的方式
函數(shù)重載簡單點說就是,同一個函數(shù)的不同實現(xiàn)方式,根據(jù)傳入的參數(shù)的類型或者長度,決定最終調(diào)用哪一個實現(xiàn),本文給大家介紹了Typescript 實現(xiàn)函數(shù)重載的方式,需要的朋友可以參考下2024-05-05
Bootstrap導(dǎo)航條學(xué)習(xí)使用(一)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
通過flv.js播放監(jiān)控示例深入探究直播流技術(shù)
本文記錄一下在使用 flv.js 播放監(jiān)控視頻時踩過的各種各樣的坑,雖然官網(wǎng)給的?Getting Started?只有短短幾行代碼,跑一個能播視頻的 demo 很容易,但是播放時各種各樣的異常會搞到你懷疑人生,下面我將自己踩過的坑,以及踩坑過程中補充的相關(guān)知識,詳細(xì)總結(jié)一下2023-10-10
iscroll-probe實現(xiàn)下拉刷新和下拉加載效果
這篇文章主要為大家詳細(xì)介紹了iscroll-probe下拉刷新和下拉加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
js實現(xiàn)把圖片的絕對路徑轉(zhuǎn)為base64字符串、blob對象再上傳
本文主要介紹了JavaScript把項目本地的圖片或者圖片的絕對路徑轉(zhuǎn)為base64字符串、blob對象再上傳的方法，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了微信WeixinJSBridge API使用實例,本文直接給出HTML代碼,代碼中包含了很多實用功能,如圖片預(yù)覽、分享到微博、隱藏右上角按鈕、獲取網(wǎng)絡(luò)狀態(tài)、發(fā)起公眾號微信支付等內(nèi)容,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS實現(xiàn)漂亮的時間選擇框效果,結(jié)合實例形式分析了javascript時間選擇框插件的實現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08
利用原生js和jQuery實現(xiàn)單選框的勾選和取消操作的方法
下面小編就為大家?guī)硪黄迷鷍s和jQuery實現(xiàn)單選框的勾選和取消操作的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09