代码高亮highlight.js

2023-10-11 16:59

文章标签 代码 js 高亮 highlight

本文主要是介绍代码高亮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])