修改博客园代码块高亮显示的主题颜色

博客园(默认编辑器设置为Markdowm)是使用heightlight.js进行代码块高亮的。 因此可以通过下载heightlight.js官网的主题css修改博客园中的代码块高亮颜色。

修改方法:

1. 进入heightlight.js官网, 点击demo页面预览, 查看主题效果

2. 在下载页面选择需要的语言并下载

3. 打开下载的文件, 博客园原本就用的heightlight.js，只需要使用style文件夹里的css即可。

4. 进入博客园设置 => 页面定制 CSS 代码(选择博客皮肤下方), 将所选主题的css文件内的内容复制进去, 保存。

5. 此时部分css样式会失效，会被博客园自带样式(带!important的)替换, 需要手动写权重比自带样式大的样式。
   这里列下我修改的，使用的是atom one dark, 字体也修改了下。

    .cnblogs-markdown .hljs,
    .cnblogs-post-body .hljs {
      font-family: Consolas, Monaco, monospace!important;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-built_in,
    .hljs-name,
    .hljs-tag {
      color: #abb2bf!important;
    }

    .cnblogs-markdown code,
    .cnblogs-post-body code {
      background: #282c34!important;
      color: #abb2bf!important;
      font-family: Consolas, Monaco, monospace!important;
    }

    .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      color: #abb2bf!important;
      background: #282c34!important;
    }

    .hljs-comment,
    .hljs-quote {
      color: #5c6370!important;
      font-style: italic!important;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
      color: #c678dd!important;
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
      color: #e06c75!important;
    }

    .hljs-literal {
      color: #56b6c2!important;
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string {
      color: #98c379!important;
    }

    .hljs-built_in,
    .hljs-class .hljs-title {
      color: #e6c07b!important;
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
      color: #d19a66!important;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
      color: #61aeee!important;
    }

    .hljs-emphasis {
      font-style: italic!important;
    }

    .hljs-strong {
      font-weight: bold!important;
    }

    .hljs-link {
      text-decoration: underline!important;
    }

 将上面代码复制进设置里的页面定制CSS代码, 就可以达到和本页面的代码块一样的主题颜色了。      

文章来源:https://www.cnblogs.com/ccti7/p/13911708.html