Code-Prettify-for-Typecho 修复代码高亮插件行号错位
插件行号错位
想找一款 Typecho 代码高亮插件,试了 Code-Prettify-for-typecho ,但是代码块的行号错位
换了各种同类插件,都不是很满意,Code-Prettify-for-typecho 这个总体还可以,错位问题只能自己修复了。
只需两步完成修复
- 选一款高亮样式,我选了
/usr/plugins/CodeHighlighter/static/styles/tomorrow-night.css
这个。
修改 tomorrow-night.css
第140行(不同高亮样式位置可能不同,但修改内容是一样的)。
font-size: 100%;
改为 font-size: 13px;
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: -2px;
font-size: 100%; /* 将 100% 修改为 13px */
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- 电脑端显示正常了,但手机端错误依旧存在,继续修改样式。
修改 /usr/themes/default/style.css
搜索 font-size:81.25%;
,删除或注释这个样式即可。
代码块首行没有左对齐
序号问题解决,发现第一行代码偏移了3个像素,强迫症实在受不了
修改 /usr/themes/default/style.css
搜索 padding:3px;
修改为 padding:0px;
pre code {
padding:3px; /* 将 3px 修改为 0px */
color:#444;
}
修改后首行对齐了,但行号又偏了,继续微调
再次打开 /usr/plugins/CodeHighlighter/static/styles/tomorrow-night.css
这个文件。
修改 tomorrow-night.css
第139行(不同高亮样式位置可能不同,但修改内容是一样的)
top: 0px;
改为 top: -2px;
(具体数值根据实际情况调整)
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0px; /* 将 0px 修改为 -2px */
font-size: 13px;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
上面的代码片段可以看出调整后的效果,至此大功告成。
不错不错,我喜欢看 www.jiwenlaw.com