插件行号错位

想找一款 Typecho 代码高亮插件,试了 Code-Prettify-for-typecho ,但是代码块的行号错位

WX20240722-130231@2x.png

换了各种同类插件,都不是很满意,Code-Prettify-for-typecho 这个总体还可以,错位问题只能自己修复了。

只需两步完成修复

  1. 选一款高亮样式,我选了 /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;
}
  1. 电脑端显示正常了,但手机端错误依旧存在,继续修改样式。

修改 /usr/themes/default/style.css

搜索 font-size:81.25%; ,删除或注释这个样式即可。

WX20240722-130437@2x.png

代码块首行没有左对齐

序号问题解决,发现第一行代码偏移了3个像素,强迫症实在受不了

20240722012620

修改 /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;
}

上面的代码片段可以看出调整后的效果,至此大功告成。


扫描二维码,在手机上阅读

标签: none

添加新评论