其他分享
首页 > 其他分享> > 博客园MarkDown代码块样式修改

博客园MarkDown代码块样式修改

作者:互联网

博客园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