首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >轻量级Web代码语法高亮库 highlight.js

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

作者头像
zinyan.com
发布于 2023-07-13 07:15:03
发布于 2023-07-13 07:15:03
2.4K08
代码可运行
举报
文章被收录于专栏:zinyanzinyan
运行总次数:8
代码可运行

介绍

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

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

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

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

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

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

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

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

highlight.js

官网地址:https://highlightjs.org/

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

那么它有什么优势?

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

支持的语言

默认支持的语言Common:(只要集成就支持以下的语言识别并高亮显示)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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 样式

https://highlightjs.org/static/demo/

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

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

基本用法

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

示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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后面加上语言名称即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<pre><code class="language-java">...</code></pre>
<pre><code class="language-plaintext">...</code></pre>
<pre><code class="language-css">...</code></pre>

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

示例:添加nohighlight 即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<pre><code class="nohighlight">...</code></pre>

在js之中使用

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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>

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

示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <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上的项目路径:

https://github.com/highlightjs/highlight.js

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

CDN加速

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

cdnjs:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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种常用语言。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 zinyan 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下。写作也是一种很重要的能力,需要长久坚持和锻炼。
杨永贞
2020/08/04
1.2K0
HTML highlight 代码前端高亮、代码美化
1. 让 pre 按钮在Django 后台 ckeditor 富文本编辑器中显示出来,ckeditor 的 config.js 文件里添加插件:codesnippet
卓越笔记
2023/02/16
3K0
HTML highlight  代码前端高亮、代码美化
Markdown-it实现打字机AI对话效果
markdown-it是一个流行的JavaScript库,用于将Markdown文本转换为HTML格式。它基于CommonMark规范,一个广泛使用的Markdown解析标准。markdown-it 提供了简单易用的AP
一起重学前端
2024/09/23
1.4K0
Web代码语法高亮库 highlight.js
用户8503230
2024/07/08
3760
OAuth2授权服务器Id Server一键生成配置原理
OAuth2客户端的配置参数非常多,虽然Id Server通过控制台可视化解决了创建OAuth2客户端的问题。但是如何进一步降低OAuth2的使用难度,把创建的OAuth2客户端转化为配置成为了刚需,从技术角度上感觉也并不是很难实现。
码农小胖哥
2022/05/22
6810
OAuth2授权服务器Id Server一键生成配置原理
让网站速度更更上一层楼,使用instantclick预加载
InstantClick 是一个 JavaScript 库,可以显着加快您的网站速度,工作原理是预加载你可能点击的链接来欺骗。
王图思睿
2021/06/15
5030
百度编辑器 UEditor 用 highlight.js 库实现代码高亮
首先到官网去下载这个插件:https://highlightjs.org/download/
Savalone
2020/02/11
2.1K0
百度编辑器 UEditor 用 highlight.js 库实现代码高亮
volantis主题修改代码高亮样式
hexo默认的代码高亮样式有时候不够好看,而highlightjs可以自己引用很多好看的样式,比如vs样式。但是它却不支持行号,因此有了这篇修改教程。
GOOPHER
2022/03/31
1.6K0
volantis主题修改代码高亮样式
哇塞!居然用这个框架开发了一款这么好用的 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
Vam的金豆之路
2023/09/01
2890
哇塞!居然用这个框架开发了一款这么好用的 Markdown 编辑器
在Hugo博客中加入代码高亮
相信自己搭建博客的人中有一大半都是玩代码的,所以代码高亮可以说是博客的必备功能。本文提供一个在基于Hugo的博客上使用highlight.js的代码高亮方案。
徐建国
2021/08/04
1.8K0
[WP Code Highlight.js] Project
https://github.com/owt5008137/WP-Code-Highlight.js
owent
2018/08/01
8480
Markdown 语法 Markdown 语法
可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText,而最大灵感来源其实是纯文本电子邮件的格式。
一个会写诗的程序员
2018/08/20
1.7K0
Prism:轻量级的 Javascript 代码高亮库
代码高亮的程序或者 WordPress 插件有很多,但是在碰到 Prism 之前,我爱水煮鱼都没有使用代码高亮的程序,就是因为以前的那些代码高亮的程序或者插件太臃肿或者复杂,使用起来不方便。那么 Prism 有哪些地方吸引了我呢?
Denis
2023/04/14
9270
Prism:轻量级的 Javascript 代码高亮库
居然可以用 js 写 PPT?
用powerpoint或者keynote写演示文稿,对于代码、数学公式等的支持一直是个痛点。而且对于前端同学来说,一身的css功力用不上也是个痛点。对于使用markdown来写文档的同学来说,将文档转成ppt需要重新排版也是件重复性的工作量。
winty
2021/08/24
9.9K0
居然可以用 js 写 PPT?
highlight.js 在 Vue 中使用的一点儿经验
使用 markdown 来给程序写文档是非常方便的,自从用顺了 markdown 之后,都很久没打开过 Word 了。 既然是程序的文档,少不了需要插入一些示例代码,而对代码进行语法高亮渲染并配以合适的颜色主题,会让文档显得更炫,也更便于阅读。 要实现文档代码高亮渲染其实并不难。 实现方法 首先,把 markdown 文件加载为 vue 组件,这需要一个合适的 loader,自己目前使用 vue-markdown-loader。webpack 配置的 module.rules 中进行如下配置: {
overtrue
2018/07/05
2.5K0
comment.js:一个纯JS实现的静态站点评论系统
介绍我用纯JS实现的一个静态站点评论系统,以及实现过程中的心得体会。 前言 我的博客最早是使用 Disqus 来实现评论功能的。Disqus 被墙了之后,改成了多说。今年年初,多说也正式关闭了,于是我被逼着又开始寻找其他的替代评论系统。 我先是试用了网易云跟贴、畅言等几种类似的社会化评论系统。畅言要求站点必须备案,而我实在没有为了评论去申请备案的动力。网易云跟贴的管理后台上有很多不明觉厉的功能,但好像都没多大用处。最致命的问题是我不小心把我的站点绑定到了另一个网易账户,而不是我常用的微博账户。这样的话,我每
HaHack
2018/07/03
2.8K0
如何实现这样一款代码图片生成器
要学好一门技术,最好的方式就是实践。上面这样一个代码图片生成器,就是当初为了学习 React 技术开发,特地找的一个功能不是很复杂,但是涉及的技术点又不至于太单一, 于是找了这样一个工具型的项目(UI 参照 ray.so[2]),代码从零开始实现来检验自己学的知识是否牢固。
老K博客
2023/12/18
3420
改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)
博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~
Enjoy233
2019/03/01
3.9K0
第 09 篇:让博客支持 Markdown 语法和代码高亮
为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写博文。Markdown 是一种 HTML 文本标记语言,只要遵循它约定的语法格式,Markdown 的解析工具就能够把 Markdown 文档转换为标准的 HTML 文档,从而使文章呈现更加丰富的格式,例如标题、列表、代码块等等 HTML 元素。由于 Markdown 语法简单直观,不用超过 5 分钟就可以轻松掌握常用的标记语法,因此大家青睐使用 Markdown 书写 HTML 文档。下面让我们的博客也支持使用 Markdown 写作。
HelloGitHub
2021/05/14
6730
Python 代码语法高亮工具库比较
在 Python 中进行代码语法高亮有几种常见的工具库和方法。这些工具库可以根据需求和使用场景选择适合的:
华科云商小徐
2024/07/05
3190
推荐阅读
相关推荐
想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档