Highlight.js 代码高亮插件的使用详解
什么是 highlight.js
highlight.js 是一个用于 Web 页面的 JavaScript 代码高亮库。它支持超过 180 种编程语言和文档格式的语法高亮。
如何使用 highlight.js
安装
你可以通过 NPM 安装 highlight.js:
npm install highlight.js
或者你也可以在官网下载 highlight.js 的压缩包,然后将 highlight.min.js
和 highlight.min.css
文件添加到你的项目中。
引入
<!-- 加载 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="/path/to/highlight.min.css">
<!-- 加载 highlight.js 的 JavaScript 文件 -->
<script src="/path/to/highlight.min.js"></script>
高亮代码
方式一:自动检测语言并高亮
你可以通过下面的代码来自动检测代码的语言并高亮:
<pre><code>
// Your code here
</code></pre>
<script>
// 在页面加载完成之后,对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
方式二:指定语言类型并高亮
你也可以通过下面的代码来指定代码的语言类型并进行高亮:
<pre><code class="html">
// Your code here
</code></pre>
<script>
// 在页面加载完成之后,对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
上面的 class="html"
即指定了代码的类型为 HTML。
示例说明
示例一:高亮 HTML 代码
下面是一个简单的 HTML 页面示例,演示如何高亮 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Highlight.js 示例一:高亮 HTML 代码</title>
<link rel="stylesheet" href="./node_modules/highlight.js/styles/atom-one-dark.min.css">
</head>
<body>
<pre><code class="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</code></pre>
<script src="./node_modules/highlight.js/lib/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
上面的代码通过指定 class="html"
来高亮 HTML 代码。在 script
标签的最后,使用 hljs.initHighlightingOnLoad()
使高亮库能够自动检测语言并高亮所有代码块。
示例二:高亮 JavaScript 代码
下面是一个简单的 JavaScript 页面示例,演示如何高亮 JavaScript 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Highlight.js 示例二:高亮 JavaScript 代码</title>
<link rel="stylesheet" href="./node_modules/highlight.js/styles/vs2015.min.css">
</head>
<body>
<pre><code class="javascript">
function helloWorld() {
console.log('Hello, World!');
}
helloWorld();
</code></pre>
<script src="./node_modules/highlight.js/lib/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
上面的代码通过指定 class="javascript"
来高亮 JavaScript 代码。在 script
标签的最后,使用 hljs.initHighlightingOnLoad()
使高亮库能够自动检测语言并高亮所有代码块。
总结
以上就是 highlight.js 代码高亮插件的使用详解。通过正确地使用 highlight.js,我们可以很容易地在我们的网站或博客中显示高亮的代码。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:highlight.js 代码高亮插件的使用详解 - Python技术站