博客園代碼黑色主題高亮設置

碎碎念：

貌似如今喜歡寫博客以前先叨叨一下。。。。以前作了《博客園自定義樣式》的相關設置，博客園界面變得順眼一點了。

可是代碼塊仍是看着比較變扭，習慣黑色主體編輯器的我，顏控的我，不能忍啊。因此仍是改改改。

小提示：
具體的操做實現參考 GitHub： https://github.com/RealAndMe/blogs-style

1. highlight.js插件介紹

代碼高亮使用插件highlight.js，官網能夠查看各類demo，highlight.js官網：https://highlightjs.org/static/demo/

有不少好看的主題，你能夠盡情挑選你喜歡的。

2. 操做步驟

2-1. 下載highlight

先去官網下載highlight.js，下載地址https://highlightjs.org/。

點擊get version按鈕進入語言選擇

勾選你經常使用的語言，在使用插件時會自動檢測展現的代碼語言，並自動高亮。一般common就足夠了

點擊download下載壓縮包，而後解壓

2-2. 開始修改

小提示：
由於直接將解壓後的樣式引入會存在一些樣式優先級的衝突，還須要一些調整
因此，不建議採用引入整個css文件的方式，而是經過 頁面定製css功能來實現比較好，並且主題的css 代碼也相對較少

我選用的主題是Monokai Sublime，下面的介紹是基於我選着的主題來的，你也能夠選擇其餘你喜歡的主題，操做基本都是同樣的。

• 在你剛下載解壓的highlight.js的styles文件夾裏找到你想要的主題文件
• 而後複製裏面的css代碼
• 粘貼在[ 管理 ] - [ 設置 ] - 頁面定製css
• 提交以後，可能會有樣式優先級衝突，這裏我簡單粗暴的採用!important來強制覆蓋

3. 分享個人代碼主題高亮設置

/*
使用了Monokai Sublime的黑色主題皮膚，可是還存在樣式衝突，須要本身修改
這個樣式只適合使用makedown編寫的博客
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: auto;
    padding: 1.3em 2em !important;
    font-size: 16px !important;
    background: #272822 !important;
    color: #FFF;
    max-height: 700px;
}

.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;
}

/* 黑色主題makedown代碼結束 */

/*makedown行間代碼樣式 */
.cnblogs-markdown code {
    color: #c7254e;
    border: none !important;
    font-size: 1em !important;
    background-color: #f9f2f4 !important;
    font-family: sans-serif !important;
}

參考文章：
小茗同窗： http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html