Google prettify 不显示行号解决方法

最新推荐文章于 2024-07-12 09:51:03 发布

最新推荐文章于 2024-07-12 09:51:03 发布 · 768 阅读

文章标签：

#prettify

web前端-CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种改进Prettify代码高亮显示的方法，包括删除特定样式、替换预设样式并调整<pre>标签使用方式的具体步骤。通过这些修改可以优化代码展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用的版本：prettify-small-4-Mar-2013.tar.bz2

我的解决方法:

1、删掉prettify里的这两个样式。
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

2、替换以下内容，已经存在的替换，不存在的新增。
pre.prettyprint {
 padding: 8px;
 background-color: #f7f7f9;
 border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
 -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
 -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
 box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
 margin: 0 0 0 33px; /* IE indents via margin-left */
} 
ol.linenums li {
 padding-left: 12px;
 color: #bebec5;
 line-height: 18px;
 text-shadow: 0 1px 0 #fff;
}
3、在<pre>标签里面一定不能有<br/>标签,要换行直接回车.

替换后，感觉效果没有原来的好看。

ps:后面再次测试，写法不对，应该这样。

<body onload="window.prettyPrint && prettyPrint();"></body>