zoukankan      html  css  js  c++  java
  • 博客园修改 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 自行查看。
     

    参考文章

     
  • 相关阅读:
    PHP安全
    使用 jQuery 简化 Ajax 开发
    我的云之旅–HBase调试(139)
    Java的性能调优
    libsqlite3.dylib与libsqlite3.0.dylib区别
    zookeeper code
    最近的一个框架
    我的云之旅–Lucene内容存储进入Hadoop(136)
    Linux源码阅读推荐阅读图书
    我的云之旅–HMaster启动说明(140)
  • 原文地址:https://www.cnblogs.com/FengZeng666/p/15644097.html
Copyright © 2011-2022 走看看