博客园修改 markdown 编辑器代码高亮样式、字体、字体大小等

修改主题

博客园首页 -> 管理 -> 设置。

如下图所示,选择自己喜欢的主题即可。同时也可以选择是否显示行号。并且,行内代码的样式也会改变。

注:行号在代码太长自动换行的时候可能会出现格式混乱。解决方法请继续往下看到最后。

修改样式

使用上述方法可以修改主题,但是主题样式可能不美观,比如字体和字体大小等,那如何修改字体以及字体大小等样式呢?

要修改代码样式就必须找到原本的样式。首先,我们按下 F12,点击选中代码的部分,可以发现决定样式的css为 .hljs .hljs-ln .hljs-ln-line,因此我们只需要修改这个 css 样式即可。(注意下图是我已经改过之后的样式)

博客园首页 -> 管理 -> 设置 -> 页面定制 CSS,在这里修改样式即可,修改上面发现的 .hljs .hljs-ln .hljs-ln-line 属性,即可修改代码样式。

默认字体不太好看,我比较喜欢 jetbrains mono字体。这里我把字体改成13px,字体改成 jetbrains mono,即加入以下代码:

保存退出即可。
 
页面效果:

注意

1. 如果代码一行太长导致自动换行之后,后面的行号格式(100行以后)会混乱,目前想到的解决办法就只是把字体调小一点 或者 不显示行号。
2. 不显示行号的时候,代码样式的css属性名称和显示行号时的不一样,具体请使用上述步骤按 F12 自行查看。
 

参考文章

 
原文地址:https://www.cnblogs.com/FengZeng666/p/15644097.html