JS库之Highlight.js的用法详解
Highlight.js 是一个轻量级、易于使用且支持语法高亮的 JavaScript 库。它适用于各种开发语言，并且内置大量的代码样式和主题，用户可以自定义自己需要的样式。
安装
安装 Highlight.js 非常简单，可以通过 CDN 或者直接下载源代码来引用。可以在 HTML 文件中直接引用 Highlight.js 的 CSS 和 JavaScript 文件，例如：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>
使用
基本用法
使用 Highlight.js 需要在 HTML 文件中标记出需要高亮的代码块，并在 JavaScript 中调用 highlightBlock 方法，例如：
<pre><code class="html">Hello, World!</code></pre>
<script>
hljs.highlightBlock(document.querySelector('code'));
</script>
注意，code 标签中需要设置 class 为要高亮的语言名称，例如上面的例子中使用了 html 的语言名称。
更多实例
下面是一个更加复杂的实例，可以参考 Highlight.js 的官方示例：https://highlightjs.org/static/demo/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Highlight.js Demo</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/10.7.2/styles/vs2015.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>My Awesome Site</h1>
<h2>JavaScript Example</h2>
<pre><code class="javascript">
function highlightMyCode() {
var codeBlocks = document.querySelectorAll('pre code');
for (var i = 0; i < codeBlocks.length; i++) {
hljs.highlightBlock(codeBlocks[i]);
}
}
highlightMyCode();
</code></pre>
<h2>HTML Example</h2>
<pre><code class="html">
<!DOCTYPE html>
<html>
<head>
<title>My Cool Site</title>
</head>
<body>
<p>Welcome to my cool site!</p>
</body>
</html>
</code></pre>
</body>
</html>
在这个例子中，我们使用了 VS2015 这个主题，同时定义了两个代码块并使用了 JavaScript 自动高亮功能。
自定义
除了使用内置的主题外，用户还可以使用 CSS 和 JavaScript 自定义 Highlight.js 的样式。具体的可以参考官方文档或者其他教程。
结论
Highlight.js 是一个功能完善且易于使用的 JavaScript 库，支持多种编程语言的语法高亮功能并且提供了多种样式主题，用户在使用中需要根据自己的需要进行调整。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！