如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題

前言

原文鏈接

園子里有人問到了這個問題，所以寫篇博客簡單介紹下。

博客園代碼高亮使用的插件是 highlight.js，本來想替換成我 個人網站 使用的 prism.js，但是比較坑爹的是，解析過程在服務端已經完成了，為什么這么說呢？因為我禁用瀏覽器JS重新刷新頁面時，pre>code里面的所有代碼都已經被解析成一個個span了:

沒辦法，只能通過替換主題來達到效果了。

博客園最大的優點就是足夠的開放，頁面想加什么CSS、JS都隨心所欲，這一點給博客園點個贊！

開始修改

highlight官網提供了77種主題：https://highlightjs.org/static/demo/ ， 大家可以選擇一款自己喜歡的，然后放到博客里面。

由於直接將樣式加進來存在一些樣式沖突，還需要一些調整，調試的時候需要來回改，所以，不太建議采用引入整個CSS文件的方式，建議通過定制頁面CSS功能來實現，因為主題CSS代碼很少。

下面以我使用的Monokai Sublime為例來介紹。

下載highlight.js包，進入主題文件夾找到你想要的主題文件，然后復制里面的CSS代碼，進入你的博客園主頁，管理->設置，找到頁面定制CSS部分，粘貼到最后：

由於調整的時候可能會出一些問題，建議你在晚上人少的時候修改。

提交之后存在一些樣式沖突，一般是背景色和字體顏色，我偷懶直接使用!important來強制覆蓋了。

另外代碼是會換行的，這個我不太喜歡，所以我加了如下樣式：

pre {
    /*控制代碼不換行*/
    white-space: pre;
    word-wrap: normal;
}

微調幾次后一般就沒啥問題了。

分享我的博客園代碼高亮主題

需要特別說明的是，由於每個人使用了不同的主題，直接應用可能還是會有各種各樣的問題，還是需要大家自己去微調。

我的CSS代碼：

/*
 代碼高亮開始，使用了一個叫Monokai Sublime的黑色主題皮膚，直接拿過來還不行，有一些樣式沖突，還要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代碼不換行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

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

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

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

/*黑色主題皮膚結束*/