Highlight.js是一个开源的JS框架，用于网页代码高亮。当它运行时，会自动读取pre标签的文本并自动识别语言。当然，也可以通过给class赋值做到手动设置语言。
使用方法很简单。

一些链接

官方github地址
官方网站
主题&效果预览
下载地址

获取

可以直接下载JS文件并自行编译使用，或者任选以下两个CDN之一使用

jsdelivr

在header标签中加入

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css">

在网页footer处加入

<script src="//cdn.jsdelivr.net/highlight.js/8.8.0/highlight.min.js"></script>

或者是cdnjs

在网页header处加入

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css">

在网页footer处加入

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>

我推荐使用Jsdelivr。从ping服务器测试可以看到，Jsdelivr在中国境内几乎每个省份都有CDN节点，延迟最低可以达到10ms-。而CloudFlare的cdnjs就显得不那么尽人意。

使用

开启功能

只要在底部加入函数

<script>hljs.initHighlightingOnLoad();</script>

即可

网页标签用法

<pre><code class="php">
    <?php echo 'hello world'; ?>
</code></pre>

以此类推
如果不想让pre中的代码高亮，给class加上nohighlight样式即可

<pre><code class="nohighlight">...</code></pre>

修改主题的方法

highlight.js提供了大量的主题，可以在 主题&效果预览 中挑选。
例如我选择了"vs"主题，只要将引用的css修改为

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/vs.min.css">

就可以了

在博客程序中的用法

Pagekit

site->设置->Code
将代码对应加入header和footer

Wordpress

主题->编辑
手动编辑header.php和footer.php

Typecho

与WordPress同理，直接修改header和footer即可

转自：https://touko.moe/blog/howtouse-highlightjs

标签：JS框架

你的评论