修改博客園代碼塊高亮顯示的主題顏色

博客園(默認編輯器設置為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代碼, 就可以達到和本頁面的代碼塊一樣的主題顏色了。