JavaScript语法高亮插件highlight.js用法详解
什么是highlight.js
highlight.js是一个轻量级的纯JavaScript语法高亮插件，它支持超过170种不同的编程语言，并提供了多种样式主题可供选择。
如何使用highlight.js
-
首先，从highlight.js官网下载highlight.js文件。
-
在你的网页中引入highlight.js文件，可以从本地引入或者使用CDN。
```html
```
- 在网页加载完成后，使用以下代码初始化highlight.js：
javascript
// 初始化highlight.js
hljs.initHighlightingOnLoad();
这行代码将会自动遍历网页上所有的<pre><code>标签，并根据其代码语言进行高亮显示。
- 若需要手动设置高亮显示的语言类型，可以使用以下代码：
javascript
// 手动高亮显示js代码
const jsCode = document.querySelector('#js-code');
hljs.highlightBlock(jsCode);
这里的'#js-code'即为需要高亮显示的代码块的id，可以根据需要自行更改。
- 高亮显示的样式可以通过以下代码进行手动设置：
```html
```
在my-style.css中可以自定义各种样式属性。
示例说明
下面是两个简单的示例来说明highlight.js的用法。
示例一
以下是一段HTML代码，其中包含一个<pre><code>标签，并对JavaScript代码进行了高亮显示：
<html>
<head>
<!-- 引入highlight.js文件 -->
<link rel="stylesheet" href="path/to/styles/default.css">
<script src="path/to/highlight.min.js"></script>
</head>
<body>
<pre><code class="hljs javascript">
function sayHello(){
console.log('hello world!');
}
</code></pre>
<script>
// 初始化highlight.js
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
示例二
以下是一个更复杂的示例，其中包含了手动设置高亮显示语言和自定义样式。
<html>
<head>
<!-- 引入highlight.js文件和自定义样式 -->
<link rel="stylesheet" href="path/to/styles/my-style.css">
<link rel="stylesheet" href="path/to/styles/default.css">
<script src="path/to/highlight.min.js"></script>
</head>
<body>
<!-- 将代码块id设置为'js' -->
<pre><code id="js" class="hljs"></code></pre>
<script>
// 手动高亮显示js代码
const jsCode = document.querySelector('#js');
jsCode.innerHTML = `
function sayHello(){
console.log('hello world!');
}
`;
hljs.highlightBlock(jsCode);
</script>
</body>
</html>
以上两个示例仅作为入门使用highlight.js的参考，更多功能及配置可参考highlight.js官网。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创 - Python技术站
微信扫一扫 
支付宝扫一扫 