加行号~

2016/04/09 | 1分钟阅读 | 更新于 2016/04/09

代码高亮区域没有行号，farbox 的渲染我又改不了，只能曲线实现，看了一下别人带行号的代码是 ol > li 实现行，于是用 jQuery 获取代码区域的 html，用正则匹配替换，就实现了代码加行号~ ** 首先请确保你的模板资源里有 jQuery ** 没有的话可以用百度的cdn

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

然后把下面这段代码复制进一个 js 文件，放在你的模板文件夹下面的某个地方，比如我是放在template/js/lineid.js 位置，比如 lineid.js 同样用上面的格式引用

/* lineid.js */
(function ($) {
  $(document).ready(function () {
    $(".codehilite pre").each(function () {
      $(this).html(
        "<ol>" +
          $(this)
            .html()
            .replace(/(.+)\n/gm, "<li>$1</li>") +
          "</ol>",
      );
    });
  });
})($);

在你用到代码高亮的模板文件里引用，比如 html 的话就像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="/template/js/lineid.js"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

jade 的话是这样的格式

script(src='http://libs.baidu.com/jquery/1.9.0/jquery.js')
script(src='/template/js/lineid.js')