JavaScript之Highlight.js语法高亮显示神器集成说明

// 引入highlight.js库
const hljs = require('highlight.js');
 
// 设置Highlight.js主题，这里以'github'为例
hljs.configure({
  tabReplace: '  ', // 定义使用空格来替换制表符，默认为4个空格
  useBR: true, // 启用 <br> 标签作为换行，而不是使用换行符
  languages: ['javascript', 'css', 'xml'] // 预加载指定的语言
});
 
// 在页面上对指定的代码块进行高亮显示
document.querySelectorAll('pre code').forEach((block) => {
  hljs.highlightBlock(block);
});
 
// 在页面上对指定的代码块进行高亮显示，并添加行号
document.querySelectorAll('pre code').forEach((block) => {
  hljs.highlightBlock(block);
  block.innerHTML = hljs.lineNumbersMarker(block);
});

这段代码演示了如何在一个网页中集成和配置Highlight.js库，以及如何对页面上的代码块进行语法高亮显示。代码中使用了document.querySelectorAll来选取页面上所有的<pre><code>元素，并对它们调用hljs.highlightBlock方法以应用语法高亮。如果需要显示行号，可以使用hljs.lineNumbersMarker方法。