首页 > 其他分享> 文章详细

博客园MarkDown代码块样式修改

2022-04-02 13:33:24 阅读：383 来源： 互联网

标签：MarkDown 样式博客园注释 color important hljs font 代码

博客园MarkDown代码块样式修改

学习自：

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

我的需求：

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

插入位置：

博客园首页 - 右上角头像进入个人页面 - 右上角进入设置 - 进入博客设置选项卡 - 把下面代码复制进页面定制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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

博客园MarkDown代码块样式修改

博客园MarkDown代码块样式修改