博客園使用highlight.js對代碼進行高亮


一、定制css

1.進入到設置-頁面定制css代碼

   2.設置字體(看個人喜好),不同編輯器的類名可能不一樣,親測

 

/*博客代碼字體設置開始*/
.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;
}


.cnblogs_code span{
font-size:16px !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>這兩個標簽即可,所以我比較推薦使用這個編輯器,或者用markDown語法(注意是Esc按鍵下面那個小頓號·):

···JavaScript 

你的代碼

···

 

  

 

效果圖 

2.TinyMCE編輯器(這個比較麻煩)

 (1)使用第二個插入代碼功能

----小插曲----
附【添加復制代碼功能】 a.綠色框插入代碼; b.使用黑色框清除樣式; c.查看HTML代碼,找到`<div><pre><code>你的代碼</code></pre></div>` d.給div加入一個類<div class="cnblogs_code"> e.最終變為`<div class="cnblogs_code"><pre><code></code></pre></div>`

 

    (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.Markdown編輯器可以去學一些基礎用法,編輯起來比較方便(推薦用這個)

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM