博客园修改 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 自行查看。

 

参考文章#

修改博客园默认的代码字体大小 - 北极星! - 博客园 (cnblogs.com)