文章列表代码高亮通用解决方案

74 阅读 0 评论 49 点赞

我是靠谱客的博主奋斗钥匙，最近开发中收集的这篇文章主要介绍文章列表代码高亮通用解决方案，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有些文章内容一般会有代码那么我们需要对这些代码进行高亮解决

这里提供一个通用解决方案

操作步骤

第一步

npm i highlight.js

第二步在页面中引入 highlight.js

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

原理

对pre>code元素添加样式类名

useEffect(() => {
// 配置 highlight.js
hljs.configure({
// 忽略未经转义的 HTML 字符
ignoreUnescapedHTML: true,
})
// 获取到内容中所有的code标签
const codes = document.querySelectorAll('.dg-html pre code')
codes.forEach((el) => {
// 让code进行高亮
hljs.highlightElement(el as HTMLElement)
})
}, [])