博客园MarkDown代码块样式修改

学习自：

博客园Markdown编辑器修改代码配色、添加代码行号 2020-01-01

我的需求：

1. 主要是修改代码块注释的样式，默认的注释也太垃圾了
2. 使整个代码块的显示规整一点，说实话默认的整个代码块的显示都很垃圾

插入位置：

博客园首页 - 右上角头像进入个人页面 - 右上角进入设置 - 进入博客设置选项卡 - 把下面代码复制进页面定制CSS中（注意，删除其中的注释，否则某些样式不好使）。

主要增加了一些源码注释，还有一些奇怪的问题。可能并不奇怪，只是我不懂CSS理解不了。

唯一修改是//white-space: pre;这句，这句控制代码块内的长代码会不会自动换行，我个人是喜欢自动换行，如果不想自动换行取消这句的注释即可。

.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #1E1E1E !important;
    color: #FFF;
    //white-space: pre;
    word-break: normal;
    font-family: "Consolas",sans-serif!important;
    font-size:14px!important;
}

// .cnblogs-markdown 感觉也没用啊。有的文档说加了.cnblogs-markdown配置才会生效，试了一下不加也能生效
// !important 也是，不加也生效。
// 可能是针对某些系统，样式来说不会生效吧。加上总没错
// bool string 还有函数名，字符串本身就是这些颜色。白色设置的是本来黑色的字符

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1E1E1E;
  color: #DCDCDC;
}

code.hljs{
  display: inline-block !important;
  vertical-align: top !important;
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}
// 这句影响了Return的颜色
.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}
// 这句影响了关键字bool，string的颜色。大体试了一下.hljs-built_in对应string；.hljs-type对应bool
.hljs-number,
.hljs-class {
  color: #B8D7A3;
}
// 这句影响了数字的颜色，但是上面不能加注释，加了注释的那个注释这个改数字颜色就不好使了
.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}
// 这句影响了字符串的颜色，但是上面不能加注释，加了注释的那个注释这个改字符颜色就不好使了
// 总之，你要是直接把这段复制仅页面定制CSS代码里，这些修改就不好使了，这一段一段之间可以分开，但不能有注释

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}
// 这里匹配的是注释颜色和字体

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

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

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

.hljs-code {
  font-family:'Monospace';
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}

标签：MarkDown,样式,博客园,注释,color,important,hljs,font,代码
来源： https://www.cnblogs.com/whr2071/p/16091576.html