highlight.js 添加行号

最新推荐文章于 2024-08-23 09:10:41 发布

LucienShui

最新推荐文章于 2024-08-23 09:10:41 发布

阅读量4k

点赞数 1

分类专栏：工程前端文章标签： highlight.js highlightjs 行号高亮前端

本文链接：https://blog.csdn.net/xs18952904/article/details/104244688

版权

工程同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

highlight.js 添加行号

本文地址：blog.lucien.ink/archives/491

现成的轮子

GitHub 上有一个为 highlight.js 添加行号的项目 github.com/wcoder/highlightjs-line-numbers.js。

可以直接将 src/highlightjs-line-numbers.js 下载下来魔改一下。

CSS

为了适配 PasteMe，对作者的 CSS 略作修改。

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 1em;
}