前言
博客园虽然可定制度高,但是在代码高亮这一块做的并不是很好,默认的配色方案看着很不舒服,而且影响页面的整体协调感。
但正因为博客园的可定制度高,所以我们可以自定义代码高亮的风格。
使用纯 CSS 实现,不需要 JS 权限。
关于博客园的插入代码
本章节只针对博客园的 TinyMce 编辑器讨论,我没有测试其他编辑器(例如 Markdown)的代码高亮解析方案。
博客园的插入代码是有两种方案的。
如图所示。
两种插入代码使用的高亮解析方案不同,有利有弊。我对两种方案都做了适配。
如果想直接取用代码,请跳转到最后一章。
第一种代码插入
默认效果截图
自定义高亮后效果
优缺点
对于代码高亮比较细致,但是复制需要按复制按钮,复制界面和按钮比较丑,格式也不舒服。
如果默认折叠还会有很丑的展开和收缩图标。
这个高亮直接将 CSS 写在了 Style 里面,我迫不得已使用 [style="color:xxx;"] 选择器来匹配。
建议
插入大量代码并且需要读者复制时使用这个,如果需要在手机上阅读,使用这个。
第二种代码插入
默认效果截图
自定义高亮后效果
优缺点
代码高亮不怎么细致(例如数字就没有高亮),在手机上行数栏目会错位,但是整体比较精致。
建议
代码量较少或适中时使用这个,在电脑上阅读使用这个,如果你的博客读者是在手机看的就不要用这个了。
高亮 CSS 代码
这是我目前在使用的高亮。
下面的 CSS 适配了两种插入方式,将下面的代码粘贴到 “博客后台-设置-页面定制CSS代码”中即可。
/*第一种高亮开始*/ .syntaxhighlighter .bold { font-weight:unset !important; } .syntaxhighlighter .line { background-color: rgb(40, 43, 46)!important; } .syntaxhighlighter .line.alt2 { background-color: rgb(40, 43, 46)!important; } .syntaxhighlighter .line.alt1 { background-color: rgb(40, 43, 46)!important; } .syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: rgb(129, 142, 150)!important; } .syntaxhighlighter .keyword { color: rgb(147, 199, 99)!important; font-weight: unset !important; } .syntaxhighlighter .preprocessor { color: rgb(85, 113, 130) !important; } .syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: rgb(224, 226, 228)!important; } .syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: rgb(147, 199, 99)!important; } .syntaxhighlighter .string, .syntaxhighlighter .string a { color: rgb(236, 118, 0)!important; } .syntaxhighlighter .functions { color: rgb(140, 187, 173)!important; } .syntaxhighlighter .gutter .line { border-right: 2px solid rgb(147, 199, 99)!important; } .syntaxhighlighter.collapsed .toolbar { background: rgb(40, 43, 46)!important; border: none !important; border-radius: 5px !important; } .syntaxhighlighter.collapsed .toolbar a { color: rgb(147, 199, 99)!important; } .syntaxhighlighter.collapsed .toolbar a:hover { color: rgb(78, 109, 48)!important; } .syntaxhighlighter { border-radius: 5px; } /*第一种高亮结束,第二种高亮开始*/ .cnblogs_code { background: #282b2e; border-radius: 5px; border: none; font-family: consolas !important; } .cnblogs_code_toolbar { background: #282b2e !important; } .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 { background-color: #282b2e !important; border: none!important; } .cnblogs_code pre { font-family: consolas !important; padding-left: 3px; color: rgb(224, 226, 228); } .cnblogs_code span[style="color: #000000;"]{ color: rgb(224, 226, 228) !important; } .cnblogs_code span[style="color: #0000ff;"]{ color: rgb(147, 199, 99)!important; } .cnblogs_code span[style="color: #800080;"]{ color: #ffd740 !important; } .cnblogs_code span[style="color: #800000;"]{ color: rgb(236, 118, 0)!important; } .cnblogs_code span[style="color: #008000;"]{ color: rgb(129, 142, 150)!important; } .cnblogs_code span[style="color: #008080;"]{ color: #afafaf!important; margin-right: 5px; } .cnblogs_code_collapse { border: none; background: #282b2e; color: rgb(147, 199, 99); } .postBody img { max-width: 100% !important; margin-top: -5px; margin-left: 5px; } /*第二种高亮结束*/
欢迎在评论区提出问题和建议。