首页
> 计算机技术
> 前端开发
> 其他
highlight.js代码高亮插件的基本用法
原创 lihf8515于2025年01月21日 10:00发表
来源:本站 阅读:142
一说到前端代码高亮插件，那不得不说highlight.js，它是一个轻量化，支持语言丰富，并且可以自动识别代码语言的一款js高亮插件。用法也相当简单，文中使用的相关文件，请到其官网下载，然后按照以下步骤使用。
首先引入样式文件
<link href="css/highlight.min.css" rel="stylesheet">
再引入以下两个文件，第一个是highlight的库，第二个是第三方库，作用是添加行号显示。
<script src="js/highlight.min.js"></script>
<script src="js/highlightjs-line-numbers.min.js"></script>
下面代码是配合Quill编辑器使用时的示例
<script>
var allElements = document.querySelectorAll('div.ql-code-block-container');
allElements.forEach(ele => {
var firstElement = ele.querySelector('div.ql-code-block-container select');
firstElement.remove();
ele.innerHTML = encodeHTML(ele.innerText);
hljs.highlightElement(ele);
hljs.lineNumbersBlock(ele);
});
</script>
下一篇：PHP如何对中文正确截子串
阅读排行榜
皖公网安备34130202000765号