修改主题
博客园首页 -> 管理 -> 设置。
如下图所示,选择自己喜欢的主题即可。同时也可以选择是否显示行号。并且,行内代码的样式也会改变。
注:行号在代码太长自动换行的时候可能会出现格式混乱。解决方法请继续往下看到最后。
修改样式
使用上述方法可以修改主题,但是主题样式可能不美观,比如字体和字体大小等,那如何修改字体以及字体大小等样式呢?
要修改代码样式就必须找到原本的样式。首先,我们按下 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 自行查看。