目前的很多博客例如 WordpressTypecho 等默认的代码高亮效果都不是太好,我刚用 Wordpress 的时候默认就没有代码高亮功能,浏览器默认的代码高亮也基本和没有差不多,在代码比较多的情况下对于读者来说看起来还是比较费力的。对于一部分博客来说可以通过插件解决,但是如果你对插件的效果不满意的话就可以考虑使用highlight.js。

highlight.js 是一个能实现网页代码高亮功能的JS库,最多可支持185种语言的代码高亮和89种主题样式,目前主流的IDE主题样式在 highlight.js 上都能实现。如果你想在网页 中实现代码高亮 highlight.js 是一个不错的选择,Hexo 默认的代码高亮插件就是用 highlight.js 实现的。

下图是浏览器默认的代码高亮,主要就是 <pre><code> 标签,基本没有什么效果:

浏览器默认代码高亮

这种情况下一旦代码比较多看起来就比较费力了。

下载

highLight.js的官网地址是: https://highlightjs.org ,进入后点击 Get version 9.15.6 下载,版本号显示的可能会和我这里的不一样,选择需要的语言,选择完成后 点击 Download

highlightjs选择需要的语言

下载完成后是一个压缩包,主要需要用到的文件是 highlight.pack.jsstyles 里的css主题,其他的是帮助文件和许可证,如下:

.
├── CHANGES.md
├── highlight.pack.js
├── LICENSE
├── README.md
├── README.ru.md
└── styles
    ├── a11y-dark.css
    ├── a11y-light.css
    ├── agate.css
    ├── androidstudio.css
    ├── an-old-hope.css
    ├── arduino-light.css
    ├── arta.css
    ├── ascetic.css
    ├── atelier-cave-dark.css
    ├── atelier-cave-light.css
    ├── atelier-dune-dark.css
    ├── atelier-dune-light.css
    ├── atelier-estuary-dark.css
    ├── atelier-estuary-light.css
    ├── atelier-forest-dark.css
    ├── atelier-forest-light.css
    ├── atelier-heath-dark.css
    ├── atelier-heath-light.css
    ├── atelier-lakeside-dark.css
    ├── atelier-lakeside-light.css
    ├── atelier-plateau-dark.css
    ├── atelier-plateau-light.css
    ├── atelier-savanna-dark.css
    ├── atelier-savanna-light.css
    ├── atelier-seaside-dark.css
    ├── atelier-seaside-light.css
    ├── atelier-sulphurpool-dark.css
    ├── atelier-sulphurpool-light.css
    ├── atom-one-dark.css
    ├── atom-one-dark-reasonable.css
    ├── atom-one-light.css
    ├── brown-paper.css
    ├── brown-papersq.png
    ├── codepen-embed.css
    ├── color-brewer.css
    ├── darcula.css
    ├── dark.css
    ├── darkula.css
    ├── default.css
    ├── docco.css
    ├── dracula.css
    ├── far.css
    ├── foundation.css
    ├── github.css
    ├── github-gist.css
    ├── gml.css
    ├── googlecode.css
    ├── grayscale.css
    ├── gruvbox-dark.css
    ├── gruvbox-light.css
    ├── hopscotch.css
    ├── hybrid.css
    ├── idea.css
    ├── ir-black.css
    ├── isbl-editor-dark.css
    ├── isbl-editor-light.css
    ├── kimbie.dark.css
    ├── kimbie.light.css
    ├── lightfair.css
    ├── magula.css
    ├── mono-blue.css
    ├── monokai.css
    ├── monokai-sublime.css
    ├── nord.css
    ├── obsidian.css
    ├── ocean.css
    ├── paraiso-dark.css
    ├── paraiso-light.css
    ├── pojoaque.css
    ├── pojoaque.jpg
    ├── purebasic.css
    ├── qtcreator_dark.css
    ├── qtcreator_light.css
    ├── railscasts.css
    ├── rainbow.css
    ├── routeros.css
    ├── school-book.css
    ├── school-book.png
    ├── shades-of-purple.css
    ├── solarized-dark.css
    ├── solarized-light.css
    ├── sunburst.css
    ├── tomorrow.css
    ├── tomorrow-night-blue.css
    ├── tomorrow-night-bright.css
    ├── tomorrow-night.css
    ├── tomorrow-night-eighties.css
    ├── vs2015.css
    ├── vs.css
    ├── xcode.css
    ├── xt256.css
    └── zenburn.css

使用

在网页中引入一个css主题和 highlight.pack 然后初始化,如下:

<link rel="stylesheet" href="css/vs2015.css" type="text/css">
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

我这里选择的是VS2015主题,还有一种方式就是使用官方的CDM,不过在国内不一定稳定:

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

初始化的部分还是一样的,代码使用 <pre><code></code></pre> 包裹,如下:

<pre>
    <code>
        var a = 0;
    
        if (a == 0) {
            for (var i = 0;i < 10;i ++) {
                console.log(i);
            }
        }

        function fn() {
            console.log('Hello');
        }
    </code>
</pre>

最终效果:

highlightjs效果

highlight.js可以自动检测语言,你也可以给 <code> 标签加上类名,如下:

<pre><code class="html"></code></pre>

要查看所有可用的class名可以访问: https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html ,如果要更换主题只需要更换css文件即可,

highlightjs主题截图1

highlightjs主题截图2

如需预览更多样式可以访问: https://highlightjs.org/static/demo/

如果要在Wordpress中使用highlight.js可以选择 外观 -> 编辑header.php 文件中引入css和js即可,需要插入代码的时候在编辑器中选择纯文本,然后加入 <pre><code></code></pre> 标签,或者也可以下载Markdown插件,用Markdown写,最终预览的时候也会被转为代码标签。


版权声明:本文为原创文章,版权归 Mr Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/548/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。