highlight增加行号

最新推荐文章于 2026-01-06 11:22:45 发布

原创

最新推荐文章于 2026-01-06 11:22:45 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

博客介绍了如何通过highlightjs的插件highlightjs-line-numbers.js来为代码高亮增加行号。作者分享了前端大佬提供的解决方案，并提供了修改CSS后的理想效果，鼓励读者根据个人需求自定义样式。

highlight没有行号支持，发现一个插件完美解决这个问题

https://github.com/wcoder/highlightjs-line-numbers.js/

经过修改CSS，效果很赞呀！（来着前端大佬的指导，终于实现了我想要的样式 :）

在这里插入图片描述

整个样式：

<!DOCTYPE html>
<html>
<head>
	

    <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css" rel="stylesheet">

	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.5.0/highlightjs-line-numbers.min.js"></script>



    <style type="text/css">
        ::selection { background:#000000; color: #000;color:#fff; } 
        ::-moz-selection { bac