一個博客園代碼高亮的方案

前言

博客園雖然可定製度高，可是在代碼高亮這一塊作的並非很好，默認的配色方案看着很不舒服，並且影響頁面的總體協調感。

但正由於博客園的可定製度高，因此咱們能夠自定義代碼高亮的風格。

使用純 CSS 實現，不須要 JS 權限。

關於博客園的插入代碼

本章節只針對博客園的 TinyMce 編輯器討論，我沒有測試其餘編輯器（例如 Markdown）的代碼高亮解析方案。

博客園的插入代碼是有兩種方案的。

如圖所示。

兩種插入代碼使用的高亮解析方案不一樣，各有利弊。我對兩種方案都作了適配。

我我的推薦使用第一種高亮方案。

若是想直接取用代碼，請跳轉到最後一章。

第一種代碼插入

默認效果截圖

自定義高亮後效果

 

優缺點

對於代碼高亮比較細緻，可是複製須要按複製按鈕，複製界面和按鈕比較醜，格式也不舒服。

若是默認摺疊還會有很醜的展開和收縮圖標。

 

這個高亮直接將 CSS 寫在了 Style 裏面，我無可奈何使用 [style="color:xxx;"] 選擇器來匹配。

建議

插入大量代碼而且須要讀者複製時使用這個，若是須要在手機上閱讀，使用這個。

第二種代碼插入

默認效果截圖

自定義高亮後效果

優缺點

代碼高亮不怎麼細緻（例如數字就沒有高亮），在手機上行數欄目會錯位，可是總體比較精緻。

元素比較多，並且是動態渲染的，代碼長的話很佔渲染運存。

建議

代碼量較少時使用這個，在電腦上閱讀使用這個，若是你的博客讀者是在手機看的就不要用這個了。

 

高亮 CSS 代碼

這是我目前在使用的高亮。

下面的 CSS 適配了兩種插入方式，將下面的代碼粘貼到 「博客後臺-設置-頁面定製CSS代碼」中便可。

  1 /*代碼高亮*/
  2 .syntaxhighlighter .bold {
  3     font-weight:unset !important;
  4 }
  5 .syntaxhighlighter .line {
  6     background-color: rgb(40, 43, 46)!important;
  7 }
  8 .syntaxhighlighter .line.alt2 {
  9     background-color: rgb(40, 43, 46)!important;
 10 }
 11 .syntaxhighlighter .line.alt1 {
 12     background-color: rgb(40, 43, 46)!important;
 13 }
 14 .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
 15     color: rgb(129, 142, 150)!important;
 16 }
 17 .syntaxhighlighter .keyword {
 18     color: rgb(147, 199, 99)!important;
 19     font-weight: unset !important;
 20 }
 21 .syntaxhighlighter .preprocessor {
 22     color: rgb(85, 113, 130) !important;
 23 }
 24 .syntaxhighlighter .plain, .syntaxhighlighter .plain a {
 25     color: rgb(224, 226, 228)!important;
 26 }
 27 .syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
 28     color: rgb(147, 199, 99)!important;
 29 }
 30 .syntaxhighlighter .string, .syntaxhighlighter .string a {
 31     color: rgb(236, 118, 0)!important;
 32 }
 33 .syntaxhighlighter .functions {
 34     color: rgb(140, 187, 173)!important;
 35 }
 36 .syntaxhighlighter .gutter .line {
 37     border-right: 2px solid rgb(147, 199, 99)!important;
 38 }
 39 .syntaxhighlighter.collapsed .toolbar {
 40     background: rgb(40, 43, 46)!important;
 41     border: none !important;
 42     border-radius: 5px !important;
 43 }
 44 .syntaxhighlighter.collapsed .toolbar a {
 45     color: rgb(147, 199, 99)!important;
 46 }
 47 .syntaxhighlighter.collapsed .toolbar a:hover {
 48     color: rgb(78, 109, 48)!important;
 49 }
 50 .syntaxhighlighter {
 51     border-radius: 5px;
 52 }
 53 /*第一種高亮結束，第二種高亮開始*/
 54 .cnblogs_code div {
 55     background: #282b2e;
 56 }
 57 .cnblogs_code {
 58     background: #282b2e;
 59     border-radius: 5px;
 60     border: none;
 61     font-family: consolas !important;
 62     color: #fff;
 63 }
 64 .cnblogs_code_toolbar {
 65     background: #282b2e !important;
 66 }
 67 .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 {
 68     background-color: #282b2e !important;
 69     border: none!important;
 70 }
 71 .cnblogs_code pre {
 72     font-family: consolas !important;
 73     padding-left: 3px;
 74     color: rgb(224, 226, 228);
 75 }
 76 .cnblogs_code span[style="color: #000000;"] , .cnblogs_code span[style="color: #ff0000;"]{
 77     color: rgb(224, 226, 228) !important;
 78 }
 79 .cnblogs_code span[style="color: #0000ff;"]{
 80     color: rgb(147, 199, 99)!important;
 81 }
 82 .cnblogs_code span[style="color: #800080;"]{
 83     color: #ffd740 !important;
 84 }
 85 .cnblogs_code span[style="color: #800000;"]{
 86     color: rgb(236, 118, 0)!important;
 87 }
 88 .cnblogs_code span[style="color: #008000;"]{
 89     color: rgb(129, 142, 150)!important;
 90 }
 91 .cnblogs_code span[style="color: #008080;"]{
 92     color: #afafaf!important;
 93     margin-right: 5px;
 94 }
 95 .cnblogs_code_collapse {
 96     border: none;
 97     background: #282b2e;
 98     color: rgb(147, 199, 99);
 99 }
100 .cnblogs_code > pre {
101     border: none !important;
102 }
103 .cnblogs_code > textarea {
104     color: #fff;
105     background: transparent;
106     border: none;
107     outline: none;
108 }
109 /*代碼高亮結束*/

 

歡迎在評論區提出建議。