使用JavaScript技巧为代码添加行号和语法高亮

最新推荐文章于 2025-12-04 17:39:28 发布
最新推荐文章于 2025-12-04 17:39:28 发布
阅读量175 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CsCufft/article/details/133732694
js 专栏收录该内容
299 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用JavaScript结合Prism.js库，为网页中的代码示例添加行号并进行语法高亮显示。首先，创建HTML结构，然后引入Prism.js的脚本和CSS文件，接着使用JavaScript获取代码元素，添加行号并调用Prism.js的highlight方法进行语法高亮。最后，通过CSS自定义行号样式，实现美观的代码展示效果。

在Web开发中，我们经常需要展示代码示例，并希望能够给代码添加行号并进行语法高亮显示。本文将介绍一种使用JavaScript技巧来实现这个功能的方法。

首先，我们需要一个HTML容器来显示代码，并带有行号。以下是一个示例的HTML结构：

<div id="codeContainer">
  <pre><code
了解本专栏 订阅专栏 解锁全文
Highlight.js实现显示行号（改造highlightjs-line-number）
JianguoChow的博客
04-06 5869
一、问题描述 看到csdn官方博客在代码块内实现了添加行号的功能，于是百度了一下实现方案，简单的概括一下就是通过正则表达式匹配代码块中换行符替换为<li>以实现添加行号的功能，但是该方法存在多行注释失效的问题，如下图所示，想了好久都没能找到解决的办法 二、解决方案 我通过打开csdn页面，调用浏览器控制台进行搜索发现了csdn使用的添加行号插件的名称，那就是highlightjs-line-numer，但是该插件的语法仍然是老版本的语法，并且代码也存在一些问题，于是直接下载到本地，
highlight.js扩展代码行号
chlung
11-27 2992
从GitHub下载highlightjs的源代码,下载地址:https://github.com/highlightjs/highlight.js 在文件highlight.js中进行源代码的修改: (function(factory) { //highlightjs源代码 return hljs; }); /** * 加入源代码行号 */ (function(windo...
利用js高亮代码并显示行号
09-26
一个利用SyntaxHighlighter工具高亮代码并显示行号的demo，可用来做代码展示页面用。 工具网址：http://alexgorbatchev.com/SyntaxHighlighter/
js获取当前代码行号
60rzvvbj的博客
02-11 9437
声明：前面是需求的来源和详解，想看最后效果的可以直接翻到最后面 为什么会需要获取代码的行号？ 如何获取代码的行号？ 最终效果 为什么会需要获取代码的行号？ 在我们开发项目的过程中，有些地方可能理论上是没有问题的，但是为了以防万一，还是加了一个判断用来预防。 例如： function f1() { return parseInt(Math.random() * 2 + 1); } function f2() { let x = f1(); if (x == 1) {
JavaScript 获得代码行号和脚本文件名
weixin_30814319的博客
08-21 911
如果你使用的是 V8 引擎，Chrome 和 Node.js 所用的，那么你可以利用JavaScriptStackTraceApi 来获得行号信息，有两个 API: Error.captureStackTrace()Error.prepareStackTrace() 在 Chrome 中可运行下面的代码： 01 02 03 04 05 06 07 08...
Prism.js实现代码高亮并添加行号
YUE
12-02 1424
Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。使用 Prismjs 可以快速为网站添加代码高亮功能，支持超过113中编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。
代码预览并语法高亮、增加行号
MFWSCQ的博客
12-11 2907
原理：highlight.js 将代码格式化以后，可以通过样式设定代码行高，然后计算代码总高度，再用总高度/行高 = 行数，最后生成行号。为什么不把每一行代码放入一个元素呢，因为 highlight.js 格式化后的代码是 span 标签字符组合，也不是使用一个元素包裹一行的，是通过类控制换行。如果需要将一行代码装入一个元素中，需要去了解 highlight.js 中的规则。`;});
js实现代码示例（高亮、行号和格式）
12-27
在JavaScript编程中，为了提高代码可读性和用户体验，我们经常需要对代码进行高亮显示、添加行号以及格式化处理。这些功能在开发在线编辑器、文档教程或代码分享平台时尤为重要。以下将详细介绍如何使用JavaScript...
JS库 Highlightjs 添加代码行号的实现代码
10-19
Highlightjs 是一款广泛使用的JavaScript库，专门用于代码高亮显示，它可以为多种编程语言的代码块添加美观的语法样式。然而，Highlightjs 的默认功能并不包括显示代码行号。为了在使用Highlightjs时添加代码行号，...
Highlight.js的行号插件可在每个代码块上自动显示行号。-JavaScript开发
05-26
这个`language-javascript`类是用于指定代码的语言类型，Highlight.js会根据这个类来应用相应的语法高亮。 在实际开发中，你可能会遇到一些高级用法。比如，如果你想要为特定的代码块禁用行号，可以添加`data-line-...
支持行号显示的语法高亮代码编辑器工具
“显示行号的语法高亮编辑器”是一种专为开发者和程序员设计的文本编辑工具，其核心功能在于能够对代码进行语法高亮显示，并在编辑区域左侧显示每一行的行号。这类编辑器极大地提升了代码的可读性、调试效率以及开发...
【前端】语法高亮 Prism.js 使用
lsdqyz的博客
12-01 7565
Prism 是一款轻量级、可扩展的语法高亮器，根据现代 Web 标准构建，应用广泛。 本文将介绍 Prism.js 的基础使用。
html的输入框加序号,JS给Textarea文本框添加行号的方法
weixin_34139050的博客
06-03 1762
本文实例讲述了JS给Textarea文本框添加行号的方法。分享给大家供大家参考。具体如下：这里使用JS实现让Textarea文本框显示行号的功能，每一行的前面都会有下数字序号，如果用来显示代码的话，可以直接找到某一行，如果不显示行号，则还要自己手功去查，想要此功能，你只需设置好TextArea ID，并加入代码中的JavaScript代码部分即可，文本框的长宽则是由CSS来控制的，你可试着修改一下...
JS获取行号/列号，获取指定行/列数据
王世洪的博客
01-02 9822
在报表的使用过程中，有时候需要获取将某行或某列上的单个、一些、所有数据，并将数据传给接口进行处理，并将处理后的结果赋值到页面中。如下图： 在报表制作过程中，因为数据往往都是通过数据集中的字段扩展出来的，在javascript获取数据时，如果使用公式去取某个单元格中的数据，都是拿到一整个字段数组，不能根据触发获取值事件的所在行/列来获取指定值，更不能实现在指定位置赋值处理后的数据；此时需要用j...
Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手
JEECG官方博客
12-04 658
Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。
vue实现页面不断插入内容并且自动滚动功能
最新发布
weixin_50606255的博客
12-04 111
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
网络安全漏洞之React 框架分析
anquan2233的博客
12-04 736
昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值