[转]JavaScript代码高亮解决方案

最新推荐文章于 2026-02-17 05:31:51 发布

原创最新推荐文章于 2026-02-17 05:31:51 发布 · 191 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js #类库 #代码高亮 #ViewUI

收录于

Rainbow是一款轻量级且易于使用的代码高亮JavaScript类库，支持自定义颜色与字体，并能轻松扩展。只需将代码置于pre标签内即可实现高亮显示。

转自给力技术－轻量级JavaScript代码高亮类库 - Rainbow

Rainbow 是一个想到轻量级且简单易用的代码高亮类库，非常容易扩展。高亮代码的颜色和字体都可以自定义，按一定的规则编辑，并且作为 CSS 样式主题应用上就可以了。

如何使用

　　添加需要使用代码高亮显示的内容，需放在 pre 标签内，这两步完成后就可以了

<pre><code data-language="javascript">function Site518(){
var test = "给力技术";
alert(test);
}</pre>

查看演示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

akaka88

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JS 代码高亮插件

司马懿的西山居

12-28

2121

简介在网页的使用过程中，经常会有代码展示的必要。而不同颜色的关键词，可以让代码看起来更直观、更美观。代码高亮插件官网：https://highlightjs.org/ 点击图中的 “language” 可以切换语言点击图中的“style”可以切换样式支持的语言列表 https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md 在首页点击 “Get Version” 可以定制某几种语言，也可以直接使用

参与评论您还未登录，请先登录后发表或查看评论

JavaScript-高亮显示

丁世杰的博客

07-10

900

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/.

使用 Prism.js 实现漂亮的代码语法高亮

热门推荐

前端，请指教

02-27

2万+

简介 Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。为什么选择 Prism.js ？极致易用引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！天生伶俐语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。轻如鸿毛代码压缩后只有 1.6KB。...

前端代码高亮

weixin_34068198的博客

07-12

464

为什么80%的码农都做不了架构师？>>> ...

JS格式化代码和高亮显示

qijiqiguai的专栏

07-18

2760

前端开发中经常遇到了一个需要，即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理，比如压缩过的JS。格式化之后，为了显示效果，需要进行代码高亮。为解决这两个问题，引入两个常用库。

JS库之Highlight.js高亮代码

花伤情犹在的博客

10-28

5066

Highlight.js介绍官网下载地址：https://highlightjs.org/download/ highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色：支持 92 种语言，49 种代码格式化风格。自动检测语言种类支持多语言混合的代码高亮支持Node.js 支持使用任何HTML标记兼容任意js框架引入 highlight.js 文件我们需要在页面中同时引入一个 js 文件和一个

原生JS实现代码高亮功能

qq_33297737的博客

05-24

2818

原生js实现代码高亮。词法分析，BNF，产生式，乔姆斯基谱系。

javascript实现代码高亮-wangHighLighter.js

王福朋

11-20

1890

wangHighLighter.js是一款应用于富文本编辑器的代码高亮插件，目前支持常用的20多种语言，并提供了7种常见的主题风格供选择。

在Next.js中让md文档转html后高亮代码块

CRMEB小程序商城的博客

04-01

2346

最近是在使用Next.js搭建个人blog,遇到了这个问题。原本以为使用remark插件就能轻松的把md格式转换为html格式，并且代码块自动高亮显示呢。然并没有。简单记录下最后的解决方式。 md转html 在lib的工具函数中，我引入了remark和html import { remark } from "remark"; import html from "remark-html"; ... // Use remark to convert markdown into HTML string con

在vue中使用highlight.js代码高亮

qq_42972625的博客

05-14

6977

在vue中使用highlight让代码实现高亮 highlight官网（查看配色）：https://highlightjs.org highlight查看api地址：https://highlightjs.readthedocs.io 刚开始我是在入口文件main.js里面引入依赖，然后定义了指令这里我选的是tomorrow-night-eighties样式，文件里面还有其他样式可供选择,因为我的样式是基于scss，所以引入的是对应的scss样式，如果是css样式可以引入 import 'highl

highlight.js（代码高亮插件）

小王的技术库

05-28

1万+

highlight.js（代码高亮插件）官网用法查看核心 API Highlight.js 将一些函数导出为hljs对象的方法强调 highlight(code, {language, ignoreIllegals}) 核心高亮功能。接受代码以突出显示（字符串）和选项列表（对象）。该language参数必须存在并指定用于突出显示的语法的语言名称或别名。这ignoreIllegals是一个可选参数，即使在检测到语言的非法语法而不是抛出异常的情况下，真正强制突出显示完成时也是如此。返回具有以下

js实现代码高亮显示

圆静居士的专栏

01-16

3439

<template> <div> <div class="operation"> <input type="text" id="text" placeholder="请输入关键字"/> <el-button @click="highlightBtn">高亮&l...

microlight.js完全指南：从入门到精通的代码高亮解决方案

最新发布

gitblog_00525的博客

02-17

1008

microlight.js 是一款轻量级代码高亮库，仅 2.2k 大小，无需额外语言包或样式文件，就能提升任意编程语言代码片段的可读性。它通过智能识别代码结构，为关键词、字符串、注释等元素应用不同样式，让代码展示更加清晰易读。 ## 为什么选择 microlight.js？🌟 在众多代码高亮工具中，microlight.js 凭借其独特优势脱颖而出： - **超轻量级**：minified

Highlight.js代码高亮使用方法

学海无涯，回头是岸

11-07

3849

highlight.js 本文接上篇博客在html中引入和显示markdown文件由于转化后的md 没有了基本样式，在写文档时又需要引入代码段，所以便找到highlight.js这个插件。一、使用步骤： (1)下载插件引入相关文件 highlight.js官网地址：https://highlightjs.org/ 点击Get Version 进入后选择你需要高亮的语言，一般Common里的足......

Django学习第五天：Highlight.js的用法-代码高亮

百锦再的博客

12-09

1万+

是一个用于在网页中高亮显示代码的 JavaScript 库，它支持多种编程语言，能够自动识别代码块并进行高亮处理。以下是它的基本用法：你可以通过 CDN 或者下载文件来引入。以下是使用 CDN 的方法： 2. 准备 HTML 代码块代码块通常是通过和标签包裹的。示例如下： 3. 启动代码高亮在页面加载完成后，通过方法进行高亮处理： 4. 使用特定的语言进行高亮如果你知道代码块的语言类型，也可以为标签添加类名（如），会自动识别该语言并应用对应的高亮规则： 5. 使用自定义主题

代码语法高亮插件highlight.js

ChibiMarukoChan的博客

09-27

5849

highlight.js主要特点如下： 176种语言和79种风格；自动语言检测多语言；代码突出显示；可用于node.js；与任何标记一起使用；兼容任何js框架；在你的网站中使用highlight.js非常简单哦，只要引入对应的css和js,下面来作详细的说明： 1）需要引入相关的文件，并调用initHighlightingOnLoad方法： link rel="

Prism.js 代码高亮原理

zk031217的博客

10-03

938

Prism.js通过正则表达式匹配和递归解析实现代码高亮：首先定义语言的语法规则（Grammar），将代码转换为Token树，再生成带class的HTML结构，最后通过CSS主题文件上色。其核心是正则匹配+递归解析，适合小片段代码高亮，具有较好扩展性但性能不如专业编辑器方案（如Monaco）。相比其他工具，Prism.js更轻量灵活，主要应用于文档和博客场景。

【vue】 vue引入highlight.js高亮显示代码

WANGHUAN-

05-24

6549

1.安装 npm install --save vue-highlightjs npm install --save highlight.js 这里解释一下为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的安装包里是没有css的样式文件的，因此我们还需要安装一个highlight.js来实现真正的样式。 2.引入在我们的入口文件main.js中引用依赖 imp...

js显示格式化代码并高亮（vue中实现代码高亮）

Jioho的博客

07-04

4462

文章目录js 实现代码格式化调用 api实现代码高亮引入用法highlight.js 高亮代码不换行innerText 和 innerHTML 有什么区别解决 innerHTML 渲染为真实节点的问题上色后都是 span 标签，是怎么做到换行的？vue 中使用 highlight.js用指令使用 js_beautify关于文章开头的编辑器实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）用的是 vue+ Highlight.js + js-beautify 效果如下图 js

基于正则表达式的JavaScript/C++语法高亮(js版)

Wind__Fantasy的专栏

10-26

3961

JavaScript的语法高亮一直是个难点，因为需要语义分析以确定/是除法操作的开始还是正则表达式的开始。目前关于高亮js的语法高亮都不是很理想，尤其是syntaxhighlighter(你待会看到的代码高亮效果就是它弄的, csdn说, 就用sh了)的效果算是最差的了，根本就不高亮正则、数字等，太不敬业了。假设你写的代码是足够规范的，而且不考虑效率的话，那么你使用我这个高亮js一般不会有问题。