一个博客园代码高亮的方案

原文地址：https://www.cnblogs.com/abc2237512422/p/9862635.html

前言

博客园虽然可定制度高，但是在代码高亮这一块做的并不是很好，默认的配色方案看着很不舒服，而且影响页面的整体协调感。

 但正因为博客园的可定制度高，所以我们可以自定义代码高亮的风格。

 使用纯 CSS 实现，不需要 JS 权限。

关于博客园的插入代码

 本章节只针对博客园的 TinyMce 编辑器讨论，我没有测试其他编辑器（例如 Markdown）的代码高亮解析方案。

 博客园的插入代码是有两种方案的。

 如图所示。

 

 

两种插入代码使用的高亮解析方案不同，各有利弊。我对两种方案都做了适配。

 我个人推荐使用第一种高亮方案。

如果想直接取用代码，请跳转到最后一章。

 

第一种代码插入

 

默认效果截图

自定义高亮后效果

优缺点

对于代码高亮比较细致，但是复制需要按复制按钮，复制界面和按钮比较丑，格式也不舒服。

如果默认折叠还会有很丑的展开和收缩图标。

这个高亮直接将 CSS 写在了 Style 里面，我迫不得已使用 [style="color:xxx;"] 选择器来匹配。

建议

插入大量代码并且需要读者复制时使用这个，如果需要在手机上阅读，使用这个。

第二种代码插入

默认效果截图

 

 

自定义高亮后效果

 

 

优缺点

 

代码高亮不怎么细致（例如数字就没有高亮），在手机上行数栏目会错位，但是整体比较精致。

 

元素比较多，而且是动态渲染的，代码长的话很占渲染运存。

 

建议

 

代码量较少时使用这个，在电脑上阅读使用这个，如果你的博客读者是在手机看的就不要用这个了。

 

 

 

高亮 CSS 代码

 

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

 

下面的 CSS 适配了两种插入方式，将下面的代码粘贴到 “博客后台-设置-页面定制CSS代码”中即可。

 

按 Ctrl+C 复制代码

/*代码高亮*/
.syntaxhighlighter .bold {
font-weight:unset !important;
}
.syntaxhighlighter .line {
background-color: #282b2e!important;
}
.syntaxhighlighter .line.alt2 {
background-color: #282b2e!important;
}
.syntaxhighlighter .line.alt1 {
background-color: #282b2e!important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #818e96!important;
}
.syntaxhighlighter .keyword {
color: #93c763!important;
font-weight: unset !important;
}
.syntaxhighlighter .preprocessor {
color: #557182 !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: #e0e2e4!important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: #93c763!important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: #ec7600!important;
}
.syntaxhighlighter .functions {
color: #8cbbad!important;
}
.syntaxhighlighter .gutter .line {
border-right: 2px solid #93c763!important;
}
.syntaxhighlighter.collapsed .toolbar {
background: #282b2e!important;
border: none !important;
border-radius: 5px !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: #93c763!important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: #4e6d30!important;
}
.syntaxhighlighter {
border-radius: 5px;
}
/*第一种高亮结束，第二种高亮开始*/
.cnblogs_code div {
background: #282b2e;
}
.cnblogs_code {
background: #282b2e;
border-radius: 5px;
border: none;
font-family: consolas !important;
color: #fff;
}
.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: #e0e2e4;
}
.cnblogs_code span[style="color: #000000;"] , .cnblogs_code span[style="color: #ff0000;"]{
color: #e0e2e4 !important;
}
.cnblogs_code span[style="color: #0000ff;"]{
color: #93c763!important;
}
.cnblogs_code span[style="color: #800080;"]{
color: #ffd740 !important;
}
.cnblogs_code span[style="color: #800000;"]{
color: #ec7600!important;
}
.cnblogs_code span[style="color: #008000;"]{
color: #818e96!important;
}
.cnblogs_code span[style="color: #008080;"]{
color: #afafaf!important;
margin-right: 5px;
}
.cnblogs_code_collapse {
border: none;
background: #282b2e;
color: #93c763;
}
.cnblogs_code > pre {
border: none !important;
}
.cnblogs_code > textarea {
color: #fff;
background: transparent;
border: none;
outline: none;
}
/*代码高亮结束*/

按 Ctrl+C 复制代码