当前位置: 首页 > news >正文

网页开发中使用highlight.js实现代码高亮 + 行号

一、背景#

笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器,由于不满足其代码高亮的样式,因此选用 highlight.js 插件来实现代码高亮功能。但是,highlight.js 插件不提供行号的设置功能,于是有了该文章。

二、实现原理#

html 的代码块都是通过 <code></code> 进行封装,我们可以将其内容取出封装到 <ol><li></li></ol> 从而实现设置行号的效果。

三、实现方式#

下边提供两种实现方式。

3.1 后端修饰#

笔者使用的是 commonmark 库来实现 markdown 转换成 html。

3.1.1 添加依赖:#
<dependency>
<groupId>com.atlassian.commonmark</groupId>
<artifactId>commonmark</artifactId>
<version>0.11.0</version>
</dependency>
3.1.2 工具类:#
public abstract class MarkdownUtil {public static List<Extension> extensions = Arrays.asList(TablesExtension.create());
private static final Parser parser = Parser.builder().extensions(extensions).build();
private static final HtmlRenderer renderer = HtmlRenderer.builder().extensions(extensions)
// 修饰代码块内容
.nodeRendererFactory(context -> new NodeRenderer() {@Override
public Set<Class<? extends Node>> getNodeTypes() {
return Collections.singleton(FencedCodeBlock.class);
}@Override
public void render(Node node) {HtmlWriter html = context.getWriter();
FencedCodeBlock codeBlock = (FencedCodeBlock) node;
Map<String,String> attrs = new HashMap<>();
if (!StringUtils.isEmpty(codeBlock.getInfo())) {
attrs.put("class","language-" + codeBlock.getInfo());
}
html.line();
html.tag("pre");
html.tag("code",attrs);
html.tag("ol");
String data = codeBlock.getLiteral();
String[] split = data.split("\n");
for (String s : split) {
html.tag("li");
html.text(s + "\n");
html.tag("/li");
}
html.tag("/ol");
html.tag("/code");
html.tag("/pre");
html.line();}
}).build();/**
* markdown 转 html
* @param markdown
* @return
*/
public static String md2html(String markdown) {
Node document = parser.parse(markdown);
String result = renderer.render(document);
return result;
}
}

如果不使用上边的 NodeRendererFactory 对 html 进行修饰,输出的 html 的代码块就只是 <pre><code></code></pre> 的形式。

3.2 前端修饰#

使用 js 代码实现代码修饰:

$("code").each(function(){
$(this).html("<ol><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ol>");
});

3.3 css 样式#

由于 <ol><li></li></ol> 默认行号效果不友好,我们进行样式设置。

.hljs {
border: 0;
font-size: 12px;
display: block;
padding: 1px;
margin: 0;
width: 100%;
font-weight: 200;
color: #333;
white-space: pre-wrap
}
.hljs ol {
list-style: decimal;
margin: 0px 0px 0 40px !important;
padding: 0px;
}
.hljs ol li {
list-style: decimal-leading-zero;
border-left: 1px solid #ddd !important;
padding: 5px!important;
margin: 0 !important;
white-space: pre;
}

 

相关文章:

网页开发中使用highlight.js实现代码高亮 + 行号

一、背景# 笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器&#xff0c;由于不满足其代码高亮的样式&#xff0c;因此选用 highlight.js 插件来实现代码高亮功能。但是&#xff0c;highlight.js 插件不提供行号的设置功能&#xff0c;于是有了该文章。 二、实现…...

访问Apache Tomcat的manager页面

配置访问Tomcat manager页面的用户名、密码、角色 Tomcat安装完成后&#xff0c;包含了一个管理应用&#xff0c;默认安装在 <Tomcat安装目录>/webapps/manager 例如&#xff1a; 要使用管理页面的功能&#xff0c;需要在conf/tomcat-users.xml文件中配置用户、密码及…...

Ubuntu 20.04.6 LTS repo int 提示/usr/bin/env: “python“: 权限不够

这是由于ubuntu20.04默认安装的python3&#xff0c;将python命令配置i为了python3为软连接&#xff0c;此时只需要通过命令添加配置为python软连接即可 sudo ln -s /usr/bin/python3.8 /usr/bin/python 其中/usr/bin/python3.8这个需要看ubuntu下具体的文件&#xff0c;/usr/…...

python随手小练5

1、求1-100的累加和&#xff08;终止条件 1-100&#xff09;&#xff08;while和for两种&#xff09; #while循环 count 0 index 0 while index < 100:count indexindex 1 print(count)#for循环 sum 0 for i in range(0,101):sum i print(sum)结果&#xff1a; 5050 2…...

一分钟!图片生成32种动画;Adobe绘画工具大升级;复盘Kaggle首场LLM比赛;VR科普万字长文 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f525; Adobe Firefly 大升级&#xff01;图像高清、操作便利&#xff0c;体验感拉满 https://firefly.adobe.com Adobe Firefly 升级了&…...

[Framework] Android Handler 工作原理

Android 中的 Handler 都被人说烂了&#xff0c;但是还是想多说一次&#xff0c;因为在 Android 的系统中它真的非常重要而且它的机制并没有很复杂&#xff0c;无论是新手和老手都可以好好学习下&#xff0c;这对理解 Android 系统很重要&#xff0c;所以说学习的性价比非常高。…...

KITTI数据集中的二进制激光雷达数据(.bin文件)转换为点云数据(.pcd文件)(C++代码)

目录 main.cpp CMakeLists.txt main.cpp #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <fstream> #include <iostream> #include <vector>int main() {// Define file pathsstd::string input_filename "/home/f…...

全球AI人工智能领袖:Anthropic联合创始人丹妮拉·阿莫迪!

在创业界中&#xff0c;有许多杰出的女性企业家&#xff0c;而丹妮拉阿莫迪则是其中的佼佼者。作为Anthropic联合创始人&#xff0c;丹妮拉以她的智慧、勇气和远见闻名于世。 她的故事既是启迪&#xff0c;又是励志&#xff0c;让我们一起来看看她的独特之处。 丹妮拉阿莫迪毕…...

CoT 的方式使用 LLM 设计测试用例实践

前期准备 import SparkApi import os from dotenv import load_dotenv, find_dotenv#以下密钥信息从控制台获取_=load_dotenv(find_dotenv()) appid = os.getenv("SPARK_APP_ID") api_secret=os.getenv("SPARK_APP_SECRET") api_key=os.getenv("SPAR…...

神秘的锦衣卫

在看明朝电视剧经常听到的一句台词&#xff1a;锦衣卫办案&#xff0c;闲杂人等速速离开。锦衣卫是明朝特务机构&#xff0c;直接听命于皇帝&#xff0c;是亲军卫之一&#xff0c;也是最重要的一卫。 1、卫所制 卫所制是明代最主要的军事制度&#xff0c;其目标是寓兵于农、屯…...

Springboot中使用Redis

Redis 是一个基于内存的key-value的结构数据库适合存储热点数据 Macos安装Redis https://redis.io/docs/getting-started/installation/install-redis-on-mac-os/安装redis brew install redis查看安装信息&#xff1a; brew info redis前台启动redis: redis-server后台启…...

超声波波形生成电路设计

摘要 随着我国微型电子技术和嵌入式系统的发展&#xff0c;目前行业内相对比较传统的超声波技术无法满足客户的需求。为了改进传统超声波技术在被测设备上的短板问题&#xff0c;在本次毕业设计中&#xff0c;将使用相对先进、快捷、智能的控制机制。该超声波生成控制系统的控制…...

C#和JS交互之Microsoft.ClearScript.V8(V8引擎)

之前测试了很多JS引擎&#xff0c;都只支持es5语法&#xff0c;不支持执行es6&#xff0c;测试了下微软的V8反正能跑通&#xff0c;应该是支持的。还得是微软呀。 如图&#xff1a;安装相关包&#xff1a; 这是参考的官方V8代码 using Microsoft.ClearScript.JavaScript; us…...

9月活动回顾(免费领取PPT)|火山引擎DataLeap、ByteHouse多位专家带来DataOps、实时计算等前沿技术分享!

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 在上月举行的火山引擎开发者社区 Meetup 第12期暨超话数据专场《数智化转型背景下的火山引擎大数据技术揭秘》上&#xff0c;来自火山引擎DataLeap、EMR、DataSail、…...

salesforce的按钮执行js代码如何链接到apex代码

在Salesforce中&#xff0c;你可以通过自定义JavaScript按钮或链接来触发Apex代码的执行。这可以通过使用JavaScript Remoting或Visualforce页面来实现。以下是一些步骤来将JavaScript按钮与Apex代码链接起来&#xff1a; 使用JavaScript Remoting链接JavaScript按钮到Apex代码…...

C语言 —— 操作符

1. 操作符的分类 算术操作符: - * / % 移位操作符: << >> 位操作符: & | ^ 赋值操作符: - 单目操作符 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 2. 算术操作符 - * / % 注意 /操作符: 对于整型的除法运算结果依然是整数…...

物联网AI MicroPython传感器学习 之 CCS811空气质量检测传感器

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 一、产品简介 通过CCS811传感器模块可以测量环境中TVOC(总挥发性有机物质)浓度和eCO2(二氧化碳)浓度&#xff0c;作为衡量空气质量&#xff08;IAQ&#xff09;的指标。 引脚定义 VCC&#xff1a;3.3VGND&…...

TCP/IP(十五)拥塞控制

一 拥塞控制 ① 拥塞控制必要性 思考&#xff1a; 为什么要有拥塞控制呀,不是有流量控制了吗&#xff1f; ② 拥赛窗口 cwnd 什么是拥塞窗口? 和发送窗口有什么关系呢?明白&#xff1a; cwnd、swnd、rwnd 缩写 含义 ③ 如何知道当前网络是否出现了拥塞呢&#xff1f;…...

vue3 404解决方法

在 Vue 3 应用中解决 404 错误通常涉及到 Vue Router&#xff0c;因为 404 错误通常与路由无法匹配到的路径有关. 1. **检查路由配置**&#xff1a;首先确保你的路由配置正确。确保每个路由路径都与你的组件正确匹配&#xff0c;并且在需要时添加必要的路由守卫。 2. **通配符…...

Unity中使用Xlua调用lua相关

//引用命名空间 using XLua; public class L1 : MonoBehaviour {// Start is called before the first frame updatevoid Start(){//Lua解析器 让我们在Unity中使用luaLuaEnv env new LuaEnv();//执行env.DoString("print(OK)");//执行一个Lua脚本 在resource文件夹…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...