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

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

文章目录

  • JavaScript之Highlight.js语法高亮显示神器集成说明
  • 1. highlight.js
    • 1. 官网
    • 2. what is highlight.js?
  • 2. 基本使用
    • 1. 作为一个模块使用
    • 2. 作为HTML标签使用
      • 1. cdnjs
      • 2. jsdelivr
      • 3. unpkg
      • 4. Self hosted(自主管理)
  • 3. 支持的语言(190+)
    • Alias Overlap(别名重叠)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

市场复盘总结 20240307

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 89% 最常用的…

leetcode:88. 合并两个有序数组

原题地址&#xff1a;https://leetcode.cn/problems/merge-sorted-array/description/ 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&a…

CVE-2024-25600 WordPress Bricks Builder RCE-漏洞分析研究

本次代码审计项目为PHP语言&#xff0c;我将继续以漏洞挖掘者的视角来分析漏洞的产生&#xff0c;调用与利用..... 前方高能&#xff0c;小伙伴们要真正仔细看咯..... 漏洞简介 CVE-2024-25600 是一个严重的&#xff08;CVSS 评分 9.8&#xff09;远程代码执行 (RCE) 漏洞&am…

C++ STL——vector容器

1&#xff0c;vector的容量和大小 功能描述&#xff1a;对vector容器的容量和大小操作 函数原型&#xff1a; empty&#xff08;&#xff09;&#xff1a;判断容器是否为空 capacity&#xff08;&#xff09;&#xff1a;容器的容量 size&#xff08;&#xff09;&#xf…

第2章---初次接触GAS系统

文件结构&#xff1a; 更新文件将高亮显示 Source Private AbilitySystemComponent RPGAbilitySystemComponent.cppRPGAttributeSet.cpp Character PGGameCharacterBase.cppRPGGameEnemy.cppRPGGamePlayerCharacter.cpp Game RPGGameModeBase.cpp Interaction EnemyInterface…

Java 8 Supplier函数式接口介绍及代码样例

介绍 供应商接口&#xff08;Supplier Interface&#xff09;是 Java 8 引入的 java.util.function 包的一部分&#xff0c;用于在 Java 中实现函数式编程。它表示一个函数&#xff0c;该函数不接收任何参数&#xff0c;但会产生一个类型为 T 的值。 T&#xff1a;表示结果的类…

Vue3+ts(day01:Vue3简介、初始化Vue3工程)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学&#xff0c;可以点心心支持一下哈&#xff08;笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】&#xff0c;记录一下学习笔记&#xff0c;用于自己复盘&#xff0c;有需要学…

JavaBean、POJO、Entity、ValueObject区别

JavaBean、POJO、Entity 和 ValueObject&#xff08;也称为VO&#xff09;是软件开发中常用的一些术语&#xff0c;它们在特定上下文中可能有所不同&#xff0c;但通常用于描述数据传输对象或模型的不同概念。以下是它们的一般区别&#xff1a; JavaBean JavaBean是一种符合特定…

基于arduino板的写字机设计

目 录 摘 要 Abstract 引 言 1 总体方案设计 1.1 系统方案设计 1.2 系统工作原理 2 硬件电路的设计 2.1 主控模块设计 2.2 驱动模块设计 2.3 时钟模块设计 2.4 总电路设计 3 软件设计 3.1 Arduino开发环境 3.2 主程序设计 3.3 抬笔落笔的子程序设计 3.4 摆臂子…

【华为OD机试】转盘寿司【C卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 寿司店周年庆,正在举办优惠活动回馈新老客户。 寿司转盘上总共有 n 盘寿司,prices[i] 是第 i 盘寿司的价格, 如果客户选择了第 i 盘寿司,寿司店免费赠送客户距离第 i 盘寿司最近的下一…

LeetCode 2161.根据给定数字划分数组

给你一个下标从 0 开始的整数数组 nums 和一个整数 pivot 。请你将 nums 重新排列&#xff0c;使得以下条件均成立&#xff1a; 所有小于 pivot 的元素都出现在所有大于 pivot 的元素 之前 。 所有等于 pivot 的元素都出现在小于和大于 pivot 的元素 中间 。 小于 pivot 的元素…

Seata 2.x 系列【2】数据库事务

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Spring Boot 版本 3.1.0 本系列Seata 版本 2.0.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 概述2. ACID 模型2.1 原子性2.2 一致性2.3 隔离性2…

题记(48)--L1-016 查验身份证

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{…

Postman报错提示 Could not get any response怎么解决

在通过postman请求做接口测试的过程中&#xff0c;有时候会遇到一些报错&#xff0c;当遇到这些报错我们不要着急&#xff0c;看着具体哪里报错&#xff0c;然后进行解决 postman报错 经常使用postman的小伙伴们都应该遇到过一些报错&#xff0c;遇到报错的时候我们不要着急&…

这可是全网网工华为认证学习笔记最完整,最详细的版本,没有之一

文章篇幅较长&#xff0c;耐心看完你一定有所收获。 华为认证是什么&#xff1f; 其实就是由华为公司所提出的评价网络工程师专业能力的一个认证&#xff0c;它分为三个级别&#xff0c;分别是这个华为认证的工程师&#xff08;HCIA&#xff09;&#xff0c;华为认证的高级工程…

探索程序员职业赛道:中国行业发展趋势与市场需求分析

目录 写在开头1.中国行业发展趋势与市场需求分析1.1. 前端开发1.2. 后端开发1.3. 数据科学与人工智能1.4. 区块链技术1.5 软件工程与项目管理1.6 嵌入式开发与物联网 2.如何选择适合自己的职业赛道写在最后 写在开头 作为程序员&#xff0c;选择适合自己的职业赛道是至关重要的…

CTP-API开发系列之三:柜台系统简介

CTP-API开发系列之三&#xff1a;柜台系统简介 CTP-API开发系列之三&#xff1a;柜台系统简介中国金融市场结构---交易所柜台系统通用柜台系统极速柜台系统主席与次席 CTP柜台系统CTP组件名称对照表CTP柜台系统程序包CTP柜台系统架构图 CTP-API开发系列之三&#xff1a;柜台系统…

重新排序。

问题描述 给定一个数组A和一些查询 L,R求数组中第L至第 R个元素之和。 小蓝觉得这个问题很无聊,于是他想重新排列一下数组使得最终每个查 询结果的和尽可能地大。小蓝想知道相比原数组,所有查询结果的总和最多可 以增加多少? 输入格式 输入第一行包含一个整数n。 第二行包含n个…

钉钉群内自定义机器人发送消息功能实现

文章目录 钉钉群内自定义机器人发送消息功能实现1、设置webhook自定义机器人2、查看官方文档&#xff0c;使用open api3、编写业务代码4、发送成功结果如下 钉钉群内自定义机器人发送消息功能实现 1、设置webhook自定义机器人 设置关键词 添加完成后&#xff0c;获得改机器人的…

直流电磁铁计算公式

直流电磁铁计算公式 1. 磁势2. 磁场强度3. 磁感应强度4. 电磁吸力5. 线圈发热 1. 磁势 产生磁场的磁势计算公式&#xff1a; F N ⋅ I FN \cdot I FN⋅I N&#xff1a;是线圈匝数&#xff0c;I&#xff1a;是线圈中的电流注&#xff1a;线圈过热&#xff0c;可以减小电流&am…