highlight.js用法
时间: 2024-09-02 11:00:33 浏览: 67
Highlight.js是一个JavaScript库,用于语法高亮,主要用于美化代码片段,使其在网页上更易读。以下是使用highlight.js的基本步骤:
1. **添加库**:首先,在HTML文件中引入highlight.js的CDN链接或下载并托管本地。例如,你可以通过CDN添加`<script>`标签:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
```
2. **选择语言**:确定你要高亮显示的编程语言,然后给代码块添加相应的class,如`.language-python`:
```html
<pre class="language-python"><code>
# Python 代码示例
</code></pre>
```
3. **初始化**:在页面加载完成之后,对需要高亮的元素调用`hljs.initHighlightingOnLoad();`函数,使高亮生效。
4. **动态高亮**:如果你有动态生成的代码,可以手动调用`hljs.highlightBlock()`函数,传入元素即可。
```javascript
let codeElement = document.querySelector('.some-code');
hljs.highlightBlock(codeElement);
```
阅读全文