highlightjs 样式
时间: 2023-09-03 09:15:33 浏览: 39
highlight.js是一个代码高亮库,它支持多种编程语言,可以轻松地将代码高亮显示在网页上。要使用highlight.js,您需要包含它的CSS和JavaScript文件:
```
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
```
其中,`default.min.css`是highlight.js默认提供的样式文件,也可以使用其他样式文件,比如:
- `github.min.css`: GitHub风格的样式
- `monokai-sublime.min.css`: Monokai Sublime风格的样式
使用时,在需要高亮显示代码的`<pre>`和`<code>`标签中添加对应的语言类名,比如:
```
<pre><code class="html">...</code></pre>
```
其中,`html`是要高亮显示的代码的语言类型。如果您不知道代码的语言类型,可以将类名设置为`auto`,highlight.js会自动检测代码语言类型。
除了使用类名来指定语言类型,还可以在JavaScript中进行配置:
```
<script>
hljs.configure({languages: ['javascript', 'ruby', 'python']});
hljs.initHighlightingOnLoad();
</script>
```
其中,`languages`是要高亮显示的语言列表。在页面加载完成后,调用`initHighlightingOnLoad()`方法将页面上的代码进行高亮显示。