方便的代码高亮框架highlight.js

howtouse-highlightjs_demo.png

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

一些链接


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

获取


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

bootcdn(強烈推薦)

在网页header处加入

<link href="//cdn.bootcss.com/highlight.js/8.9.1/styles/default.min.css" rel="stylesheet">  

在网页footer处加入

<script src="//cdn.bootcss.com/highlight.js/8.9.1/highlight.min.js"></script>  

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>  

使用


开启功能

只要在底部加入函数

<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即可

标签: typecho, web, highlight.js