（轉）自定義博客園代碼高亮

前言

目前個人博客立刻隨筆數也要破百了，仍是稍微折騰一下，本身的博客園的樣式，此次主要是修改了博客園的代碼高亮。

這裏感謝博主：小茗同窗 所提供的解決方案

博客園最大的優勢就是足夠的開放，頁面想加什麼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;
}

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

參考資料

小茗同窗: http://blog.haoji.me/custom-cnblogs-highlight-theme.html?from=xa