代码高亮以及每一行都有一个行号

AlexKie — Sat, 01 Jul 2017 15:40:22 +0800

我想在我的 rails app 里面展示一段代码，因此找了一次插件，比如 hightlight，coderay，syntaxhighter, prettify 等等，然后结合 redcarpet 使用。在实现代码高亮的这个问题上都没有问题，但是现在的问题是我想为这些代码添加行号，而上面说的几个插件在展示行号的是将行号和代码内容进行了左右分区，也就是说，所有的代码都是在一个一个的里面，代码的那一块没有区分行的标志，

我找到几个是 html 代码是这样的

<div class="code">
    <div class="linenum">
        <span>1</span>
         ......   #  这一块都是行号
        <span>n</span>
    </div>
    <div class="highlight">
        <span>def</span> 
        ......    #这里是   所有的代码按照语言进行高亮
        <span>end</span>
    </div>
</div>

但是我想要的是这样的的几个都是这样的

<div class="code">
    <div id="linenum_1">
        <a href="#linenum_1">1</a> #这里显示行号
        <div class='highlight'>
            <span>def </span>
            .....              #这里指展示这一行的代码
            <span>end</span>
        </div>
    </div>

    .....

    <div id="linenum_n">
        <a href="#linenum_n">n</a> #这里显示行号
        <div class='highlight'>
            <span>def </span>
            .....              #这里指展示这一行的代码
            <span>end</span>
        </div>
    </div>
</div>

然后我看到了 rouge 这个插件，看到他的 readme 里面这样写

Rouge::Formatters::HTMLLinewise.new(formatter, class_format: 'line-%i') This formatter will split your code into lines, each contained in its own div. The class_format option will be used to add a class name to the div, given the line number.

那么这个 formatter 应该如何构造呢？谢谢大家了

AlexKie (於杰)

代码高亮 以及每一行都有一个行号

代码高亮以及每一行都有一个行号