admin 管理员组

文章数量: 1087649

highlight.js 设置行号

原文地址：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.atlassianmonmark</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() {@Overridepublic Set<Class<? extends Node>> getNodeTypes() {return Collections.singleton(FencedCodeBlock.class);}@Overridepublic 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;
}

实现的效果正是读者正在看到的效果。（额~其实这是 csdn 默认的效果，具体效果查看原文。）

本文标签： highlightjs 设置行号

版权声明：本文标题：highlight.js 设置行号 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700324503a397240.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。