admin 管理员组

文章数量: 1087649

代码高亮highlight.js

实现嵌入文章中的代码带有语法高亮效果
通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮

示例

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import { useEffect } from 'react'
export default function Question () {useEffect(() => {// 配置 highlight.jshljs.configure({// 忽略未经转义的 HTML 字符ignoreUnescapedHTML: true})// 获取到内容中所有的code标签const codes = document.querySelectorAll('.dg-html pre code')codes.forEach((el) => {// 让code进行高亮hljs.highlightElement(el as HTMLElement)})}, [])const content = `<pre><code>console.log(abc)</code><code>console.log(abc)</code>
</pre>
<h3>nihoa</h3>
<pre><code>console.log(abc);xxx.forEach(item=>{console.log(1)})</code>
</pre>`return (<div className="dg-html">Question<div dangerouslySetInnerHTML={{ __html: content }} /></div>)
}

操作步骤

安装包

npm i highlight.js

在页面中引入 highlight.js
import hljs from ‘highlight.js’
import ‘highlight.js/styles/vs2015.css’

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

在文章加载后，对文章内容中的代码进行语法高亮

原理

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

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

本文标签： 代码高亮highlightjs

版权声明：本文标题：代码高亮highlight.js 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700324712a397331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。