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

1.使用过纯CSS实现，不需要JS权限

2.只针对博客园的TinyMCE编辑器讨论

3.高亮代码。

下面的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/jiangjian123/p/11311569.html

针对markdown编辑器（使用时要用```代码```包裹）

/**
 * Shades of Purple Theme — for Highlightjs.
 *
 * @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
 * @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
 * @version 1.5.0
 */

.cnblogs-markdown .hljs {
  display: block;
  overflow-x: auto;
  /* Custom font is optional */
  /* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace';  */
  padding: 0.5em;
  background: #2d2b57 !important;
  font-weight: normal;
}

.cnblogs-markdown .hljs-title {
  color: #fad000;
  font-weight: normal;
}

.cnblogs-markdown .hljs-name {
  color: #a1feff;
}

.cnblogs-markdown .hljs-tag {
  color: #ffffff;
}

.cnblogs-markdown .hljs-attr {
  color: #f8d000;
  font-style: italic;
}

.cnblogs-markdown .hljs-built_in,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-section {
  color: #fb9e00;
}

.cnblogs-markdown .hljs-keyword {
  color: #fb9e00;
}

.cnblogs-markdown .hljs,
.cnblogs-markdown .hljs-subst {
  color: #e3dfff;
}

.cnblogs-markdown .hljs-string,
.cnblogs-markdown .hljs-attribute,
.cnblogs-markdown .hljs-symbol,
.cnblogs-markdown .hljs-bullet,
.cnblogs-markdown .hljs-addition,
.cnblogs-markdown .hljs-code,
.cnblogs-markdown .hljs-regexp,
.cnblogs-markdown .hljs-selector-class,
.cnblogs-markdown .hljs-selector-attr,
.cnblogs-markdown .hljs-selector-pseudo,
.cnblogs-markdown .hljs-template-tag,
.cnblogs-markdown .hljs-quote,
.cnblogs-markdown .hljs-deletion {
  color: #4cd213;
}

.cnblogs-markdown .hljs-meta,
.cnblogs-markdown .hljs-meta-string {
  color: #fb9e00;
}

.cnblogs-markdown .hljs-comment {
  color: #ac65ff;
}

.cnblogs-markdown .hljs-keyword,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-name,
.cnblogs-markdown .hljs-strong {
  font-weight: normal;
}

.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-number {
  color: #fa658d;
}

.cnblogs-markdown .hljs-emphasis {
  font-style: italic;
}

.cnblogs-markdown .hljs-strong {
  font-weight: bold;
}

我自己改进的

*针对Tinymce编辑器代码高亮*/
/*第一种插入方式*/
.cnblogs_code div {
    background: #282b2e;/*黑色*/
}
.cnblogs_code {
    background: #2d2b57;/*紫色*/
    border-radius:5px;
    border: none;
    font-family: consolas !important;
    color: #fff; /*白色*/
}
.cnblogs_code_toolbar {
    background: #2d2b57!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: #2d2b57!important;/*紫色图标*/  
    border: none!important;
}
.cnblogs_code pre {
    font-family: consolas !important;
    padding-left: 3px;
    color: rgb(0, 204,0);/*绿色 代码*/
}
.cnblogs_code span[style="color: #000000;"] {
    color: rgb(224,226, 228) !important;/*浅灰色*/
}
.cnblogs_code span[style="color: #0000ff;"]{
    color: rgb(236, 118, 0)!important;/*深橙色  关键字*/
}
.cnblogs_code span[style="color: #800080;"]{
    color: #fa658d!important;/*粉-数字*/
}
.cnblogs_code span[style="color: #800000;"]{
    color: rgb(255, 0, 0)!important; /*深橙色*/
}
.cnblogs_code span[style="color: #008000;"]{
    color: rgb(172, 101, 255)!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);/*浅绿*/
}
.cnblogs_code > pre {
    border: none !important;
}
.cnblogs_code > textarea {
    color: #fff;  /*白色*/
    background: transparent; /*透明*/
    border: none;
    outline: none;
}
/*第一种插入方式代码高亮结束*/
/*第二种插入方式代码高亮*/
.syntaxhighlighter .bold {
    font-weight:unset !important;
}
.syntaxhighlighter .line {
    background-color: rgb(45, 43, 87)!important;/*紫色——背景线条*/
}
.syntaxhighlighter .line.alt2 {
    background-color: rgb(45, 43, 87)!important;/*紫色——背景线条*/
}
.syntaxhighlighter .line.alt1 {
    background-color: rgb(45, 43, 87)!important;/*紫色——背景线条*/
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    color: rgb(172, 101, 255)!important;  /*注释-深紫*/
}
.syntaxhighlighter .keyword {
    color: rgb(236, 118,0)!important; /*关键字——橙色*/
    font-weight: unset !important;
}
.syntaxhighlighter .preprocessor {
    color: rgb(250, 101, 141) !important;/*粉——注解*/
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
    color: rgb(224,226, 228)!important;  /*浅灰色-除关键字、字符串、数字之外的代码*/
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
    color: rgb(250, 101, 141)!important; /*不知道*/
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
    color: rgb(0, 204 ,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;
}

/**
 * 针对Markdown编辑器Shades of Purple Theme — for Highlightjs.
 *
 * @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
 * @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
 * @version 1.5.0
 */

.cnblogs-markdown .hljs {
  display: block;
  overflow-x: auto;
  /* Custom font is optional */
  /* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace';  */
  padding: 0.5em;
  background: #2d2b57 !important;
  font-weight: normal;
}

.cnblogs-markdown .hljs-title {
  color: #fad000;
  font-weight: normal;
}

.cnblogs-markdown .hljs-name {
  color: #a1feff;
}

.cnblogs-markdown .hljs-tag {
  color: #ffffff;
}

.cnblogs-markdown .hljs-attr {
  color: #f8d000;
  font-style: italic;
}

.cnblogs-markdown .hljs-built_in,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-section {
  color: #fb9e00;
}

.cnblogs-markdown .hljs-keyword {
  color: #fb9e00;
}

.cnblogs-markdown .hljs,
.cnblogs-markdown .hljs-subst {
  color: #e3dfff;
}

.cnblogs-markdown .hljs-string,
.cnblogs-markdown .hljs-attribute,
.cnblogs-markdown .hljs-symbol,
.cnblogs-markdown .hljs-bullet,
.cnblogs-markdown .hljs-addition,
.cnblogs-markdown .hljs-code,
.cnblogs-markdown .hljs-regexp,
.cnblogs-markdown .hljs-selector-class,
.cnblogs-markdown .hljs-selector-attr,
.cnblogs-markdown .hljs-selector-pseudo,
.cnblogs-markdown .hljs-template-tag,
.cnblogs-markdown .hljs-quote,
.cnblogs-markdown .hljs-deletion {
  color: #4cd213;
}

.cnblogs-markdown .hljs-meta,
.cnblogs-markdown .hljs-meta-string {
  color: #fb9e00;
}

.cnblogs-markdown .hljs-comment {
  color: #ac65ff;
}

.cnblogs-markdown .hljs-keyword,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-name,
.cnblogs-markdown .hljs-strong {
  font-weight: normal;
}

.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-number {
  color: #fa658d;
}

.cnblogs-markdown .hljs-emphasis {
  font-style: italic;
}

.cnblogs-markdown .hljs-strong {
  font-weight: bold;
}

posted @ 2020-07-15 22:19 遗落在树梢的风筝阅读(225) 评论(0) 编辑收藏举报

刷新页面返回顶部

遗落在树梢的风筝

多思考·多总结·多记录

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

公告