首页 > 基础资料 博客日记

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

2024-04-11 02:00:07基础资料围观295次

这篇文章介绍了JavaScript之Highlight.js语法高亮显示神器集成说明，分享给大家做个参考，收藏Java资料网收获更多编程知识

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(包)
1C1c
4D4dhighlightjs-4d
ABAPsap-abap, abaphighlight-sap-abap
ABNFabnf
Access logsaccesslog
Adaada
Apexapexhighlightjs-apex
Arduino (C++ w/Arduino libs)arduino, ino
ARM assemblerarmasm, arm
AVR assembleravrasm
ActionScriptactionscript, as
Alan IFalan, ihighlightjs-alan
Alanlnhighlightjs-alan
AngelScriptangelscript, asc
Apacheapache, apacheconf
AppleScriptapplescript, osascript
Arcadearcade
AsciiDocasciidoc, adoc
AspectJaspectj
AutoHotkeyautohotkey
AutoItautoit
Awkawk, mawk, nawk, gawk
Ballerinaballerina, balhighlightjs-ballerina
Bashbash, sh, zsh
Basicbasic
BBCodebbcodehighlightjs-bbcode
Blade (Laravel)bladehighlightjs-blade
BNFbnf
BQNbqnhighlightjs-bqn
Brainfuckbrainfuck, bf
C#csharp, cs
Cc, h
C++cpp, hpp, cc, hh, c++, h++, cxx, hxx
C/ALcal
C3c3highlightjs-c3
Cache Object Scriptcos, cls
Candidcandid, didhighlightjs-motoko
CMakecmake, cmake.in
COBOLcobol, standard-cobolhighlightjs-cobol
CODEOWNERScodeownershighlightjs-codeowners
Coqcoq
CSPcsp
CSScss
Cap’n Protocapnproto, capnp
Chaoschaos, kaoshighlightjs-chaos
Chapelchapel, chplhighlightjs-chapel
Cisco CLIciscohighlightjs-cisco-cli
Clojureclojure, clj
CoffeeScriptcoffeescript, coffee, cson, iced
CpcdosC+cpchighlightjs-cpcdos
Crmshcrmsh, crm, pcmk
Crystalcrystal, cr
cURLcurlhighlightjs-curl
Cypher (Neo4j)cypherhighlightjs-cypher
Dd
Dafnydafnyhighlightjs-dafny
Dartdart
Delphidpr, dfm, pas, pascal
Diffdiff, patch
Djangodjango, jinja
DNS Zone filedns, zone, bind
Dockerfiledockerfile, docker
DOSdos, bat, cmd
dsconfigdsconfig
DTS (Device Tree)dts
Dustdust, dst
Dylandylanhighlightjs-dylan
EBNFebnf
Elixirelixir
Elmelm
Erlangerlang, erl
Excelexcel, xls, xlsx
Extemporeextempore, xtlang, xtmhighlightjs-xtlang
F#fsharp, fs, fsx, fsi, fsscript
FIXfix
Flixflixhighlightjs-flix
Fortranfortran, f90, f95
FunCfunchighlightjs-func
G-Codegcode, nc
Gamsgams, gms
GAUSSgauss, gss
GDScriptgodot, gdscripthighlightjs-gdscript
Gherkingherkin
Glimmer and EmberJShbs, glimmer, html.hbs, html.handlebars, htmlbarshighlightjs-glimmer
GN for Ninjagn, gnihighlightjs-GN
Gogo, golang
Grammatical Frameworkgfhighlightjs-gf
Gologolo, gololang
Gradlegradle
GraphQLgraphql
Groovygroovy
GSQLgsqlhighlightjs-gsql
HTML, XMLxml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTPhttp, https
Hamlhaml
Handlebarshandlebars, hbs, html.hbs, html.handlebars
Haskellhaskell, hs
Haxehaxe, hx
High-level shader languagehlslhighlightjs-hlsl
Hyhy, hylang
Ini, TOMLini, toml
Inform7inform7, i7
IRPF90irpf90
Iptablesiptableshighlightjs-iptables
JSONjson
Javajava, jsp
JavaScriptjavascript, js, jsx
Joliejolie, iol, olhighlightjs-jolie
Juliajulia, jl
Julia REPLjulia-repl
Kotlinkotlin, kt
Langhighlightjs-lang
LaTeXtex
Leafleaf
Leanleanhighlightjs-lean
Lassolasso, ls, lassoscript
Lessless
LDIFldif
Lisplisp
LiveCode Serverlivecodeserver
LiveScriptlivescript, ls
LookMLlookmlhighlightjs-lookml
Lualua
Luauluauhighlightjs-luau
Macaulay2macaulay2highlightjs-macaulay2
Makefilemakefile, mk, mak, make
Markdownmarkdown, md, mkdown, mkd
Mathematicamathematica, mma, wl
Matlabmatlab
Maximamaxima
Maya Embedded Languagemel
Mercurymercury
MIPS Assemblermips, mipsasm
Mintminthighlightjs-mint
mIRC Scripting Languagemirc, mrchighlightjs-mirc
Mizarmizar
MKBmkbhighlightjs-mkb
MLIRmlirhighlightjs-mlir
Mojoliciousmojolicious
Monkeymonkey
Moonscriptmoonscript, moon
Motokomotoko, mohighlightjs-motoko
N1QLn1ql
NSISnsis
Neverneverhighlightjs-never
Nginxnginx, nginxconf
Nimnim, nimrod
Nixnix
Oakoakhighlightjs-oak
Object Constraint Languageoclhighlightjs-ocl
OCamlocaml, ml
Objective Cobjectivec, mm, objc, obj-c, obj-c++, objective-c++
OpenGL Shading Languageglsl
OpenSCADopenscad, scad
Oracle Rules Languageruleslanguage
Oxygeneoxygene
PFpf, pf.conf
PHPphp
Papyruspapyrus, pschighlightjs-papyrus
Parser3parser3
Perlperl, pl, pm
Pine Scriptpine, pinescripthighlightjs-pine
Plaintextplaintext, txt, text
Ponypony
PostgreSQL & PL/pgSQLpgsql, postgres, postgresql
PowerShellpowershell, ps, ps1
Processingprocessing
Prologprolog
Propertiesproperties
Protocol Buffersproto, protobuf
Puppetpuppet, pp
Pythonpython, py, gyp
Python profiler resultsprofile
Python REPLpython-repl, pycon
Q#qsharphighlightjs-qsharp
Qk, kdb
QMLqml
Rr
Razor CSHTMLcshtml, razor, razor-cshtmlhighlightjs-cshtml-razor
ReasonMLreasonml, re
Rebol & Redredbol, rebol, red, red-systemhighlightjs-redbol
RenderMan RIBrib
RenderMan RSLrsl
ReScriptrescript, reshighlightjs-rescript
RiScriptrisc, riscripthighlightjs-riscript
RISC-V Assemblyriscv, riscvasmhighlightjs-riscvasm
Roboconfgraph, instances
Robot Frameworkrobot, rfhighlightjs-robot
RPM spec filesrpm-specfile, rpm, spec, rpm-spec, specfilehighlightjs-rpm-specfile
Rubyruby, rb, gemspec, podspec, thor, irb
Rustrust, rs
RVT Scriptrvt, rvt-scripthighlightjs-rvt-script
SASSAS, sas
SCSSscss
SQLsql
STEP Part 21p21, step, stp
Scalascala
Schemescheme
Scilabscilab, sci
SFZsfzhighlightjs-sfz
Shape Expressionsshexchighlightjs-shexc
Shellshell, console
Smalismali
Smalltalksmalltalk, st
SMLsml, ml
Soliditysolidity, solhighlightjs-solidity
Splunk SPLsplhighlightjs-spl
Stanstan, stanfuncs
Statastata
Structured Textiecst, scl, stl, structured-texthighlightjs-structured-text
Stylusstylus, styl
SubUnitsubunit
Supercollidersupercollider, schighlightjs-supercollider
Sveltesveltehighlightjs-svelte
Swiftswift
Tcltcl, tk
Terraform (HCL)terraform, tf, hclhighlightjs-terraform
Test Anything Protocoltap
Thriftthrift
Toittoittoit-highlight
TPtp
Transact-SQLtsqlhighlightjs-tsql
Twigtwig, craftcms
TypeScripttypescript, ts, tsx, mts, cts
Unicorn Rails logunicorn-rails-loghighlightjs-unicorn-rails-log
VB.Netvbnet, vb
VBAvbahighlightjs-vba
VBScriptvbscript, vbs
VHDLvhdl
Valavala
Verilogverilog, v
Vim Scriptvim
WGSLwgslhighlightjs-wgsl
X#xsharp, xs, prghighlightjs-xsharp
X++axapta, x++
x86 Assemblyx86asm
x86 Assembly (AT&T)x86asmatthighlightjs-x86asmatt
XLxl, tao
XQueryxquery, xpath, xq, xqm
YAMLyml, yaml
ZenScriptzenscript, zshighlightjs-zenscript
Zephirzephir, zep
Zigzighighlightjs-zig

Alias Overlap(别名重叠)

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

LanguageOverlap()
SMLml
OCamlml
Lassols

文章来源:https://blog.csdn.net/yuanjinshenglife/article/details/136542349
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：华为OD机试 - 测试用例执行计划（Java & JS & Python & C & C++）
下一篇：【c++】类和对象（四）深入了解拷贝构造函数

相关文章

最新发布

点击排行

本站推荐

标签云