zoukankan      html  css  js  c++  java
  • highlight.js 设置行号

    原文地址: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("
    ");
                        for (String s : split) {
                            html.tag("li");
                            html.text(s + "
    ");
                            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(/
    /g,"
    </li><li>") +"
    </li></ol>");
    });
    

    3.3 css 样式

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

    .hljs {
    	border: 0;
    	font-size: 12px;
    	display: block;
    	padding: 1px;
    	margin: 0;
    	 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;
    }
    

    实现的效果正是读者正在看到的效果。

  • 相关阅读:
    88. Merge Sorted Array
    87. Scramble String
    86. Partition List
    85. Maximal Rectangle
    84. Largest Rectangle in Histogram
    83. Remove Duplicates from Sorted List
    82. Remove Duplicates from Sorted List II
    81. Search in Rotated Sorted Array II
    80. Remove Duplicates from Sorted Array II
    计算几何——点线关系(叉积)poj2318
  • 原文地址:https://www.cnblogs.com/moonlightL/p/9221740.html
Copyright © 2011-2022 走看看