原文地址:highlight.js 设置行号

博客地址:http://www.extlight.com

一、背景

笔者在开发这套博客系统时使用 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 设置行号的更多相关文章

  1. gedit 没有preference项,使preference回归,并用命令行设置行号,text wrapping等

    1.最简单的,使preference选项回来: gsettings set org.gnome.settings-daemon.plugins.xsettings overrides '@a{sv} ...

  2. DevExpress GridControl 显示行号、设置行号宽

    显示行号类 /// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="g ...

  3. vi设置行号

     首先,我们先打开一个文件,用vim 文件名 就可以直接使用vim打开   我们事先写了一些内容在这个txt里面,我们可以看到如下内容   在这里,我们可以直接敲命令, :set number 或者 ...

  4. gedit 没有preference项,使preference回归,并用命令行设置行号,解决centos7下中文乱码,text wrapping等问题

    1. 最简单的,使preference选项回来: gsettings set org.gnome.settings-daemon.plugins.xsettings overrides '@a{sv} ...

  5. GridView 显示行号 设置行号列的宽度

    /// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="gv" ...

  6. vi编辑器设置行号可见

    vi 设置行号 需要切换到命令模式下,输入set number :set number 按下回车即可

  7. vs2010设置 "行号显示"

    Microsoft Visual Studio 2010 默认情况下是不显示代码的行号的.在编译出错时,可点击下面输出窗口中的错误提示进行定位. 但是这样操作起来你有没有感觉到不方便呢. 不显示行号时 ...

  8. vim(ubuntu) 设置行号和缩进

    在终端 输入以下命令来编辑vimrc配置文件: sudo vim /etc/vim/vimrc 或者 sudo gedit /etc/vim/vimrc 1.显示行号 在文件末端添加一新行,输入 se ...

  9. vi命令设置行号

    1. :set nu :显示行号

随机推荐

  1. postman--实现接口自动化测试

    postman使用 开发中经常用postman来测试接口,一个简单的注册接口用postman测试: 接口正常工作只是最基本的要求,经常要评估接口性能,进行压力测试. postman进行简单压力测试 下 ...

  2. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  3. Linux内核分析08

    进程的切换和系统的一般执行过程 一,进程切换的关键代码switch_to分析 进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时 ...

  4. IDEA类和方法注释模板设置

    在开发中使用idea的注释总结:由于IDEA自带的注释模板不是太好用,所以整理一下适用于自己的模板: 一.首先我们来设置IDEA中类的模板:(IDEA中在创建类时会自动给添加注释) 1.File--& ...

  5. 注解装配Bean

    @Service用于标注业务层组件@Controller用于标注控制层组件@Repository用于标注数据访问组件,即DAO组件@Component泛指组件,当组件不好归类的时候,我们可以使用这个注 ...

  6. springboot属性类自动加载配置文件中的值

    springboot属性类自动加载配置文件中的值,如Person类加载在yml中配置的name,age等属性值,可以通过如下步骤获取: 类上添加@ConfigurationProperties注解,p ...

  7. 如何在官网下载JDK(版本、系统类型、字节位等)

    JDK官网地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 步骤1: 此步注意不要下载运行时jre

  8. 【postman】利用谷歌浏览器插件生成代码

    Postman这款工具可以让你很方便的测试你的Web API,那如果你实在是没办法用Postman,必须手写代码,又或者你有别的需求是Postman没法实现的,你必须写一个特殊的script或App来 ...

  9. burnside引理&polya定理

    burnside引理&polya定理 参考资料: <polya计数法的应用>--陈瑜希 黄学长 置换: 置换即是将n个元素的染色进行交换,产生一个新的染色方案. 群: 一个元素的集 ...

  10. Spring Cloud 开发的一些推荐规划

    1.提供一个统一的 父 pom 依赖    作用:统一版本与引入必要依赖 2.提供一个模板模型. 作用: 开发人员不必关系具体基础启动项 3.提供一个统一基础配置模型 作用: 开发人员不比太过关注与必 ...