JavaScript之Highlight.js语法高亮显示神器集成说明

JavaScript之Highlight.js语法高亮显示神器集成说明

1. highlight.js

1. 官网

官网： highlight.js (highlightjs.org)

npmjs: highlight.js - npm (npmjs.com)

2. what is highlight.js?

Highlight.js是一个用JavaScript编写的语法高亮器。它在浏览器和服务器上都能工作。它几乎可以处理任何标记，不依赖于任何框架，并且具有自动语言检测功能。

截止到2024-03-07，最新版本为: 11.9.0,且具有以下特性

• 192种语言和496个主题

• 自动语言检测

• 适用于任何HTML标记

• 零依赖项

• 兼容任何JS框架

• 支持Node.js和Deno

2. 基本使用

highlight.js可以以不同的方式使用，例如使用 CDN、自己托管捆绑包、作为 Vue 插件，作为 ES6 模块，带有 Node.js 和 Web Worker。

有关详细信息，请参阅我们在 GitHub 上的自述文件。

1. 作为一个模块使用

Highlight.js可以与服务器上的 Node 一起使用。第一步是从 npm 安装包：

npm install highlight.js
# or
yarn add highlight.js

现在，可以使用 or 来使用该库。默认情况下，当您导入 主包，所有 192 种语言将自动加载。require``import

// Using require
const hljs = require('highlight.js');

// Using ES6 import syntax
import hljs from 'highlight.js';

但是，导入我们所有的语言会增加捆绑包的大小。如果您只需要几种语言， 您可以单独导入它们：

// Using require
const hljs = require('highlight.js/lib/core');

// Load any languages you need
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
// Using ES6 import syntax
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';

// Then register the languages you need
hljs.registerLanguage('javascript', javascript);

最后，无论以何种方式导入库，都可以使用 or 函数突出显示代码：highlight``highlightAuto

const highlightedCode = hljs.highlight(
  '<span>Hello World!</span>',
  { language: 'xml' }
).value

有关详细信息，请参阅自述文件的“导入库”部分。

2. 作为HTML标签使用

1. cdnjs

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

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

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

2. jsdelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/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.9.0/build/languages/go.min.js"></script>

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

3. unpkg

<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/go.min.js"></script>

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

4. Self hosted(自主管理)

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

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

这将查找并突出显示标签内的代码;它尝试检测语言 自然而然。如果自动检测不适合您，则可以在类中指定语言 属性：<pre><code>

<pre><code class="language-html">...</code></pre>

3. 支持的语言(190+)

github: highlight.js/SUPPORTED_LANGUAGES.md at main · highlightjs/highlight.js (github.com)

下表显示了 Highlight.js 支持的语言（以及相应的类/别名）的完整列表。下面列出包的语言是第三方语言，未与核心库捆绑在一起。您可以通过以下链接找到他们的存储库。

**注意：**可用的语言将取决于你构建库的方式或将库包含在应用中的方式。例如，我们默认的缩小 Web 构建仅包括 ~40 种流行语言。有关如何加载其他/特定语言的示例，请参阅自述文件中的获取库和导入库。

Language(语言)	Aliases(别名)	Package(包)
1C	1c
4D	4d	highlightjs-4d
ABAP	sap-abap, abap	highlight-sap-abap
ABNF	abnf
Access logs	accesslog
Ada	ada
Apex	apex	highlightjs-apex
Arduino (C++ w/Arduino libs)	arduino, ino
ARM assembler	armasm, arm
AVR assembler	avrasm
ActionScript	actionscript, as
Alan IF	alan, i	highlightjs-alan
Alan	ln	highlightjs-alan
AngelScript	angelscript, asc
Apache	apache, apacheconf
AppleScript	applescript, osascript
Arcade	arcade
AsciiDoc	asciidoc, adoc
AspectJ	aspectj
AutoHotkey	autohotkey
AutoIt	autoit
Awk	awk, mawk, nawk, gawk
Ballerina	ballerina, bal	highlightjs-ballerina
Bash	bash, sh, zsh
Basic	basic
BBCode	bbcode	highlightjs-bbcode
Blade (Laravel)	blade	highlightjs-blade
BNF	bnf
BQN	bqn	highlightjs-bqn
Brainfuck	brainfuck, bf
C#	csharp, cs
C	c, h
C++	cpp, hpp, cc, hh, c++, h++, cxx, hxx
C/AL	cal
C3	c3	highlightjs-c3
Cache Object Script	cos, cls
Candid	candid, did	highlightjs-motoko
CMake	cmake, cmake.in
COBOL	cobol, standard-cobol	highlightjs-cobol
CODEOWNERS	codeowners	highlightjs-codeowners
Coq	coq
CSP	csp
CSS	css
Cap’n Proto	capnproto, capnp
Chaos	chaos, kaos	highlightjs-chaos
Chapel	chapel, chpl	highlightjs-chapel
Cisco CLI	cisco	highlightjs-cisco-cli
Clojure	clojure, clj
CoffeeScript	coffeescript, coffee, cson, iced
CpcdosC+	cpc	highlightjs-cpcdos
Crmsh	crmsh, crm, pcmk
Crystal	crystal, cr
cURL	curl	highlightjs-curl
Cypher (Neo4j)	cypher	highlightjs-cypher
D	d
Dafny	dafny	highlightjs-dafny
Dart	dart
Delphi	dpr, dfm, pas, pascal
Diff	diff, patch
Django	django, jinja
DNS Zone file	dns, zone, bind
Dockerfile	dockerfile, docker
DOS	dos, bat, cmd
dsconfig	dsconfig
DTS (Device Tree)	dts
Dust	dust, dst
Dylan	dylan	highlightjs-dylan
EBNF	ebnf
Elixir	elixir
Elm	elm
Erlang	erlang, erl
Excel	excel, xls, xlsx
Extempore	extempore, xtlang, xtm	highlightjs-xtlang
F#	fsharp, fs, fsx, fsi, fsscript
FIX	fix
Flix	flix	highlightjs-flix
Fortran	fortran, f90, f95
FunC	func	highlightjs-func
G-Code	gcode, nc
Gams	gams, gms
GAUSS	gauss, gss
GDScript	godot, gdscript	highlightjs-gdscript
Gherkin	gherkin
Glimmer and EmberJS	hbs, glimmer, html.hbs, html.handlebars, htmlbars	highlightjs-glimmer
GN for Ninja	gn, gni	highlightjs-GN
Go	go, golang
Grammatical Framework	gf	highlightjs-gf
Golo	golo, gololang
Gradle	gradle
GraphQL	graphql
Groovy	groovy
GSQL	gsql	highlightjs-gsql
HTML, XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTP	http, https
Haml	haml
Handlebars	handlebars, hbs, html.hbs, html.handlebars
Haskell	haskell, hs
Haxe	haxe, hx
High-level shader language	hlsl	highlightjs-hlsl
Hy	hy, hylang
Ini, TOML	ini, toml
Inform7	inform7, i7
IRPF90	irpf90
Iptables	iptables	highlightjs-iptables
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Jolie	jolie, iol, ol	highlightjs-jolie
Julia	julia, jl
Julia REPL	julia-repl
Kotlin	kotlin, kt
Lang		highlightjs-lang
LaTeX	tex
Leaf	leaf
Lean	lean	highlightjs-lean
Lasso	lasso, ls, lassoscript
Less	less
LDIF	ldif
Lisp	lisp
LiveCode Server	livecodeserver
LiveScript	livescript, ls
LookML	lookml	highlightjs-lookml
Lua	lua
Luau	luau	highlightjs-luau
Macaulay2	macaulay2	highlightjs-macaulay2
Makefile	makefile, mk, mak, make
Markdown	markdown, md, mkdown, mkd
Mathematica	mathematica, mma, wl
Matlab	matlab
Maxima	maxima
Maya Embedded Language	mel
Mercury	mercury
MIPS Assembler	mips, mipsasm
Mint	mint	highlightjs-mint
mIRC Scripting Language	mirc, mrc	highlightjs-mirc
Mizar	mizar
MKB	mkb	highlightjs-mkb
MLIR	mlir	highlightjs-mlir
Mojolicious	mojolicious
Monkey	monkey
Moonscript	moonscript, moon
Motoko	motoko, mo	highlightjs-motoko
N1QL	n1ql
NSIS	nsis
Never	never	highlightjs-never
Nginx	nginx, nginxconf
Nim	nim, nimrod
Nix	nix
Oak	oak	highlightjs-oak
Object Constraint Language	ocl	highlightjs-ocl
OCaml	ocaml, ml
Objective C	objectivec, mm, objc, obj-c, obj-c++, objective-c++
OpenGL Shading Language	glsl
OpenSCAD	openscad, scad
Oracle Rules Language	ruleslanguage
Oxygene	oxygene
PF	pf, pf.conf
PHP	php
Papyrus	papyrus, psc	highlightjs-papyrus
Parser3	parser3
Perl	perl, pl, pm
Pine Script	pine, pinescript	highlightjs-pine
Plaintext	plaintext, txt, text
Pony	pony
PostgreSQL & PL/pgSQL	pgsql, postgres, postgresql
PowerShell	powershell, ps, ps1
Processing	processing
Prolog	prolog
Properties	properties
Protocol Buffers	proto, protobuf
Puppet	puppet, pp
Python	python, py, gyp
Python profiler results	profile
Python REPL	python-repl, pycon
Q#	qsharp	highlightjs-qsharp
Q	k, kdb
QML	qml
R	r
Razor CSHTML	cshtml, razor, razor-cshtml	highlightjs-cshtml-razor
ReasonML	reasonml, re
Rebol & Red	redbol, rebol, red, red-system	highlightjs-redbol
RenderMan RIB	rib
RenderMan RSL	rsl
ReScript	rescript, res	highlightjs-rescript
RiScript	risc, riscript	highlightjs-riscript
RISC-V Assembly	riscv, riscvasm	highlightjs-riscvasm
Roboconf	graph, instances
Robot Framework	robot, rf	highlightjs-robot
RPM spec files	rpm-specfile, rpm, spec, rpm-spec, specfile	highlightjs-rpm-specfile
Ruby	ruby, rb, gemspec, podspec, thor, irb
Rust	rust, rs
RVT Script	rvt, rvt-script	highlightjs-rvt-script
SAS	SAS, sas
SCSS	scss
SQL	sql
STEP Part 21	p21, step, stp
Scala	scala
Scheme	scheme
Scilab	scilab, sci
SFZ	sfz	highlightjs-sfz
Shape Expressions	shexc	highlightjs-shexc
Shell	shell, console
Smali	smali
Smalltalk	smalltalk, st
SML	sml, ml
Solidity	solidity, sol	highlightjs-solidity
Splunk SPL	spl	highlightjs-spl
Stan	stan, stanfuncs
Stata	stata
Structured Text	iecst, scl, stl, structured-text	highlightjs-structured-text
Stylus	stylus, styl
SubUnit	subunit
Supercollider	supercollider, sc	highlightjs-supercollider
Svelte	svelte	highlightjs-svelte
Swift	swift
Tcl	tcl, tk
Terraform (HCL)	terraform, tf, hcl	highlightjs-terraform
Test Anything Protocol	tap
Thrift	thrift
Toit	toit	toit-highlight
TP	tp
Transact-SQL	tsql	highlightjs-tsql
Twig	twig, craftcms
TypeScript	typescript, ts, tsx, mts, cts
Unicorn Rails log	unicorn-rails-log	highlightjs-unicorn-rails-log
VB.Net	vbnet, vb
VBA	vba	highlightjs-vba
VBScript	vbscript, vbs
VHDL	vhdl
Vala	vala
Verilog	verilog, v
Vim Script	vim
WGSL	wgsl	highlightjs-wgsl
X#	xsharp, xs, prg	highlightjs-xsharp
X++	axapta, x++
x86 Assembly	x86asm
x86 Assembly (AT&T)	x86asmatt	highlightjs-x86asmatt
XL	xl, tao
XQuery	xquery, xpath, xq, xqm
YAML	yml, yaml
ZenScript	zenscript, zs	highlightjs-zenscript
Zephir	zephir, zep
Zig	zig	highlightjs-zig

Alias Overlap(别名重叠)

如果您同时使用这些语言中的任何一种，请务必 使用全名而不是别名以避免任何歧义。

Language	Overlap()
SML	ml
OCaml	ml
Lasso	ls