前端解析markdown处理代码块高亮并添加复制功能实例代码
作者：yuan溜溜
在Markdown中,原生语法并不直接支持文字高亮,不过你可以通过一些扩展的Markdown语法或者HTML标签来实现,这一效果这篇文章主要介绍了前端解析markdown处理代码块高亮并添加复制功能的相关资料,需要的朋友可以参考下
一、Marked.js简介与基本使用
Marked.js是一个轻量级的Markdown解析器，可以将Markdown文本快速转换为HTML。它易于使用且高度可定制。
基本使用方法
首先，安装引入Marked.js库：
npm i marked.js
import { Marked } from 'marked'
然后，使用简单的API进行转换：
// 解析Markdown文本 const markdownText = '# 标题\n\n这是一段**加粗**的文本。'; const htmlContent = marked.parse(markdownText);
二、实现代码语法高亮
虽然Marked.js可以解析代码块，但它本身不提供语法高亮功能。我们需要结合marked-highlight和Highlight.js来实现这一功能。
1. 引入Highlight.js和marked-highlight
marked-highlight是一个专门为Marked.js设计的扩展包，它需要配合highlight.js才能实现代码高亮功能。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, // 如果是异步的，可以设置为 true
langPrefix: 'language-', // 可选：用于给代码块添加前缀
highlight: code => {
return hljs.highlightAuto(code).value
},
})
)
配置完成之后使用
<div v-html="markdown"></div> const markdown = computed(() => marked.parse(mdStr))
效果如下：
三、获取语言类型以及添加代码复制功能
// 复制逻辑
const copyToClipboard = codeBlock => {
const answer = codeBlock.textContent.trim()
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard
.writeText(answer)
.then(() => {
showSuccessToast('复制成功')
})
}
}
// 获取语言类型
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
}
// 添加复制按钮功能
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 = '复制'
copyButtonEle.onclick = () => copyToClipboard(block)
codeBoxEle.appendChild(langEle)
codeBoxEle.appendChild(copyButtonEle)
parent.classList.add('code-box')
parent.appendChild(codeBoxEle)
})
})
}
ve3项目中使用（因为是流式输出，所以需要监听返回内容）
watch(markdown, newValue => {
if (newValue) {
nextTick(() => {
addCopyBtns()
})
}
})
onMounted(() => {
addCopyBtns()
})
效果如下
四、总结
Marked.js本身是一个纯JavaScript编写的Markdown解析器，因此它没有语言限制——它可以在任何支持JavaScript的环境中运行，通过结合Marked.js和Highlight.js，我们可以轻松实现Markdown文档的解析和代码高亮功能。添加复制按钮进一步提升了用户体验，让用户可以方便地获取代码片段。
对于react或者vue项目也可以使用其相应的开源方案，使用更加简洁，比如（需要的可以自行去了解）
Vue生态系统
- vue-markdown - 基于Marked.js的Vue组件
- @vuepress/markdown - VuePress使用的Markdown处理器
- vue-highlightjs - Vue的代码高亮指令
- element-plus - 提供ElCode组件用于代码展示
React生态系统
- react-markdown - 最流行的React Markdown渲染器
- react-syntax-highlighter - 功能强大的代码高亮组件
- highlight.js - 通用的代码高亮库
- @uiw/react-md-editor - 带编辑功能的Markdown组件
到此这篇关于前端解析markdown处理代码块高亮并添加复制功能的文章就介绍到这了,更多相关前端解析markdown代码块高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！