一、前言
博客園雖然可定制度高，但在代碼高亮這一塊做的並不是很好，默認的配色方案看着很不舒服，而且影響頁面的整體協調感。
但正因為博客園的可定制度高，所以我們可以自定義代碼高亮的風格。
使用純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 /*代碼高亮結束*/
歡迎在評論區提出建議。
參考文章：https://www.cnblogs.com/abc2237512422/p/9862635.html