介绍

如果是编写个人网站内容的时候，往往会需要面临代码的高亮显示需求。

而网上有不少的前端的代码高亮库，例如https://github.com/PrismJS/prism-themes 。针对这个样式我有介绍各种Theme的效果Prism-Themes 代码主题样式效果 (zinyan.com)

但是这种库往往都有一个缺陷，那就是支持的语言种类问题。

因为这些库可能都在很久以前就出来了。后续可能更多的就是样式的调整。而没有扩展针对最新代码的支持。

会造成一种现象，就是你选择一个语言之后代码中的关键字并没有高亮显示，全部代码都显示灰色或者默认颜色。

给我们一种，代码块样式没有生效的感觉。

所以，现在推荐一个库：highlight.js (highlightjs.org)

一直维护到现在，并且还在不断迭代更新的代码高亮库

highlight.js

官网地址：highlight.js (highlightjs.org)

截止到文章发布期间，仍然还在更新。

那么它有什么优势？

支持196种语言和242种代码显示风格。
可以自动检测语言。
多语言代码高亮显示
可以直接用在node.js
适用于任何标记
兼容任何js框架

支持的语言

默认支持的语言Common：（只要集成就支持以下的语言识别并高亮显示）

Bash C C# C++ CSS Diff Go HTML,XML
JSON Java JavaScript Kotlin Less 
Lua Makefile Markdown Objective-C 
PHP PHP Template Perl Plain text 
Python Python REPL R Ruby Rust SCSS 
SQL Shell Session Swift TOML,also 
INI TypeScript Visual Basic .NET 
YAML

然后根据需求，我们还可以自定义决定是否扩展的库Other：

.properties 1C:Enterprise
ARM Assembly AVR Assembly ActionScript Ada 
AngelScript Apache Access Log Apache config 
AppleScript ArcGIS Arcade Arduino AsciiDoc 
AspectJ Augmented Backus-Naur Form AutoHotkey 
AutoIt Awk BASIC Backus–Naur Form Batch file (DOS) 
Brainfuck C/AL CMake CSP Caché Object Script Cap’n 
Proto Ceylon Clean Clojure Clojure REPL CoffeeScript 
Coq Crystal D DNS Zone Dart Delphi Device Tree Django 
Dockerfile Dust ERB (Embedded Ruby) Elixir Elm Erlang 
Erlang REPL Excel formulae Extended Backus-Naur Form 
F# FIX Flix Fortran G-code (ISO 6983) GAMS GAUSS GLSL 
GML Gherkin Golo Gradle Groovy HAML HSP HTTP Handlebars 
Haskell Haxe Hy IRPF90 ISBL Inform 7 Intel x86 
Assembly JBoss CLI Julia Julia REPL LDIF LLVM IR 
LSL (Linden Scripting Language) LaTeX Lasso Leaf Lisp 
LiveCode LiveScript MEL MIPS Assembly Matlab Maxima 
Mercury Microsoft X++ Microtik RouterOS script Mizar 
Mojolicious Monkey MoonScript N1QL NSIS NestedText 
Nginx config Nim Nix Node REPL OCaml OpenSCAD Oracle 
Rules Language Oxygene Packet Filter config Parser3 
Pony PostgreSQL and PL/pgSQL PowerShell Processing 
Prolog Protocol Buffers Puppet PureBASIC Python profiler 
Q QML ReasonML RenderMan RIB RenderMan RSL Roboconf SAS 
SML (Standard ML) SQF STEP Part 21 Scala Scheme Scilab 
Smali Smalltalk Stan Stata Stylus SubUnit TP Tagger 
Script Tcl Test Anything Protocol Thrift Twig VBScript 
VBScript in HTML VHDL Vala Verilog Vim Script WebAssembly 
Wolfram Language Wren XL XQuery Zephir crmsh dsconfig

几乎将市面上所有的语言都给一网打尽了。

demo 样式

highlight.js demo (highlightjs.org)

我们可以通过上面的链接，访问highlight.js 的各种Themes风格的效果。

让我们知道集成后的代码高亮的显示效果。

基本用法

如果是在网页上使用，那么最低的要求是链接到库以及一个主题，然后调用highlightAll

示例：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

然后会自动查找<pre><code>....</code>></pre> 并将该code标签的内容进行高亮显示。

如果想自己指定的话，那么设置代码语言也可以

示例： language后面加上语言名称即可。

<pre><code class="language-java">...</code></pre>
<pre><code class="language-plaintext">...</code></pre>
<pre><code class="language-css">...</code></pre>

如果有些代码不想进行高亮显示，

示例：添加nohighlight 即可

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

在js之中使用

我们如果代码动态生成，那么我们可能会在js中配置

hljs = require('highlight.js'); //第一种，加载全部语言 196种语言
hljs = require('highlight.js/lib/common'); //只加载基础语言。

html = hljs.highlightAuto('<h1>Hello World!</h1>').value

这两种加载有什么区别呢？那是因为加载全部196语言都支持的库，会占用比较大的空间。而加载common占用的空间比较少而已。

如果common里面的语法不满足你的需求，那么可以自定义，然后进行下载相应的库。（ps：官网上有详细介绍）

我们如果代码标记不是使用<pre> <code> 而是其他标签例如：<div class='code'>...</div>

我们需要手动突出显示此类代码块：

示例：

// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el => {
  // then highlight each
  hljs.highlightElement(el);
});

还可以和Vue 一起使用:highlightjs/vue-plugin： Highlight.js Vue Plugin (github.com)

  <div id="app">
    <!-- bind to a data property named `code` -->
    <highlightjs autodetect :code="code" />
    <!-- or literal code works as well -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

GitHub

highlight库是一个开源的库，在GitHub上的项目路径:

highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies. (github.com)

我们如果针对该库有问题，可以通过lssues进行反馈

CDN加速

Highlight.js 的几种通用的版本，在cdnjs 和jsdeliver之中都有加速库。

cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/go.min.js"></script>

jsdelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/languages/go.min.js"></script>

这些托管的高亮显示库，没有捆绑所有语言。只是捆绑了34种常用语言。

目录CONTENT

轻量级Web代码语法高亮库 highlight.js

介绍