一、定製css

1.進入到設定-頁面定製css程式碼

2.設定字型（看個人喜好），不同編輯器的型別可能不一樣，親測TinyMCE和Markdown有效

/*部落格程式碼字型設定開始*/
.cnblogs-markdown pre,#cnblogs_post_body pre{
/*控制程式碼不換行*/
white-space: pre;
word-wrap: normal;
}

#cnblogs_post_body .hljs
{
/*設定字型*/
font-size:18px !important;
font-family:"Consolas", "Courier New", "monospace" !important;
}
 

二、下載highlight.js

效果連結：https://highlightjs.org/static/demo/，可以進去檢視效果

下載連結：https://highlightjs.org/

1.點選Get version 10.1.2

2.一般選擇Common就夠了

3.下載完後，有個壓縮包，解壓

4.進去styles,有很多css檔案

5.選擇一個你喜歡的高亮css，對裡面的程式碼進行復制，最後放進頁面定製css裡面，記得放在設定字型程式碼的後面

/*monokai-sublime.css*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  font-size:18px !important;
  background: #23241f!important;
}

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

6.改變背景顏色，原來好像是灰白色，最後放在monokai-sublime.css程式碼後面

/*更換背景*/
.cnblogs_code_toolbar a:hover, 
.cnblogs_code_toolbar a:link,
.cnblogs_code_toolbar a:visited,
.cnblogs_code_toolbar a:active,
.cnblogs_code_toolbar a:link img,
.cnblogs_code_toolbar a:visited img,
.cnblogs_code_toolbar,
.cnblogs_code,
.cnblogs-markdown pre code { 
    background-color: #23241f !important;
    color: #eee!important;
 }
 

三、字型設定、highlight.css、背景設定完畢，記得順序儘量不要調換，程式碼是放在【頁面定製css】這個位置

/*設定字型程式碼開始*/

/*設定字型程式碼結束*/

/*monokai.css程式碼開始*/

/*monokai.css程式碼開始*/

/*設定背景程式碼開始*/

/*設定背景程式碼結束*/

四、編輯使用

1.Markdown編輯器，直接加入<pre>、<code>這兩個標籤即可，所以我比較推薦使用這個編輯器

效果圖

2.TinyMCE編輯器（這個比較麻煩）

　（1）使用第二個插入程式碼功能，第一個試了幾次都沒有生效

（2）插入程式碼

（3）修改標籤

//修改前
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">
這裡是程式碼
</pre>
</div>

//修改後
<div class="cnblogs_Highlighter">
<pre>
<code>
這裡是程式碼
</code>
</pre>
</div>

//只有把程式碼放在這兩個標籤內，程式碼高亮才會生效，而且<pre>標籤裡面不要有其他的類名，要把class="brush:javascript;gutter:true;"刪除了

<pre>
<code>
你的程式碼
</code>
</pre>

五、總結

1.將【字型程式碼】、【highlight的css樣式程式碼】、【背景程式碼】放入頁面定製css中

2.編輯使用時記得加入兩個標籤：<pre><code>你的程式碼</code></pre>，沒有這兩個標籤，程式碼高亮不生效

3.注意標籤裡面不要有其他的類名，如TinyMCE編輯器的<pre>就有一個class類名class="brush:javascript;gutter:true;"