标签 JS框架 下的文章
方便的代码高亮框架highlight.js
Highlight.js是一个开源的JS框架，用于网页代码高亮。当它运行时，会自动读取pre标签的文本并自动识别语言。当然，也可以通过给class赋值做到手动设置语言。
使用方法很简单。
一些链接
获取
可以直接下载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即可