mzlogin.github.io 代码行号

请问有办法让代码块显示行号吗？如果没有这个功能作者是否考虑加一下呢。

May 17 '20 09:05 AccelYu

可以通过 JS 实现，我试了下这个：https://github.com/JS-Zheng/code-line

效果：

但它可能改变原有代码样式，有的代码块首尾会有多余空行等，我觉得不完美，目前没加到模板里。

May 30 '20 12:05 mzlogin

我用prism.js做的效果，https://www.geekplayers.com/2019/12/03/leetcode976-largest-perimeter-triangle/

Jul 26 '20 16:07 yanglr

我用prism.js做的效果，https://www.geekplayers.com/2019/12/03/leetcode976-largest-perimeter-triangle/

可以~这个挺好。

Jul 27 '20 04:07 mzlogin

使用prism.js加入代码行号:

到prism.js官网https://prismjs.com/download.html进行定制，在页面底部预览，我选了代码高亮、line number、toolbar、copy to clipboard等功能。

Change the style in /css/syntax.css

.highlight pre code * {
white-space: pre !important; // this sets all children inside to nowrap
}

_include/header.md的head标签中加入css

_include/footer.md中的body标签中加入js 并调用 jquery

<script type="text/javascript">
  $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
</script>

参考: 使用prismjs实现Jekyll代码语法高亮并显示行号_skillip.com-CSDN博客_prismjs 显示代码行数 https://blog.csdn.net/u013961139/article/details/78853544

Jul 27 '20 07:07 yanglr

mzlogin.github.io mzlogin.github.io copied to clipboard