脚本宝典收集整理的这篇文章主要介绍了修改博客园 markdown 编辑器代码高亮样式的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

作为一个工程师，追求极致与艺术也应当成为我们生活中的一部分，作为自己的心爱之物——博客，当然也得装扮一下，我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的，已经有前辈开发了一些代码高亮的样式可供我们开箱即用。Highlight.js 就是这样一款产品。

步骤

下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的。

第一步，找到你所喜欢的高亮主题

打开 Hightlight.js 的demo页面 选择你所喜欢的高亮主题。我选择的是Atom One Dark 这个主题。

第二步，下载对应高亮主题的源码

到GitHub找到Hightlight对应主题的源码：highlightjs/highlight.js 代码高亮主题名称与Github中的css代码名称一一对应。比如我选择的主题名称为Atom One Dark，其对应的css代码为：atom-one-dark.css，打开相应代码，将其源码复制并保存到本地即可。

第三步，修改css代码以适应cnblogs的markdown语法高亮样式

用 notepad++ 文本编辑器打开刚刚下载的css源码，按下 ctrl + h 快捷键，将 .hljs 替换为 wangt.cc blogs-markdown .hljs ，选择全部替换。

第四步，将处理后的css代码复制到博客园页面定制css代码栏中

博客园管理页面->设置->页面定制CSS代码。将刚刚处理后的css代码复制到博客园页面定制css代码栏中。注意：不要勾选“禁用模板默认CSS”，点击保存之后即可生效。

后续

到这里就已经完成了自定义代码风格的设置。可能你设置完成后发现和hightlight demo上看到的不太一样，可能是代码的字体，背景颜色等等略有差异。只要你懂一点CSS，自己微调一下所下载的CSS代码中的相关属性，直到自己满意为止。

这里给出我自己下载修改后的代码，由于默认字体个人感觉不太好看，我将字体改成了 JetBrains Mono。

/* markdown代码块样式修改
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github wangt.cc /atom/one-dark-syntax
base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b
*/

 wangt.cc blogs-markdown .hljs {
  color: #abb2bf;
  background: #282c34;
  font-family: 'Jetbrains mono';  /* 修改字体 */
}

 wangt.cc blogs-markdown .hljs-comment,
 wangt.cc blogs-markdown .hljs-quote {
  color: #5c6370;
  font-style: italic;
}

 wangt.cc blogs-markdown .hljs-doctag,
 wangt.cc blogs-markdown .hljs-keyword,
 wangt.cc blogs-markdown .hljs-formula {
  color: #c678dd;
}

 wangt.cc blogs-markdown .hljs-section,
 wangt.cc blogs-markdown .hljs-name,
 wangt.cc blogs-markdown .hljs-selector-tag,
 wangt.cc blogs-markdown .hljs-deletion,
 wangt.cc blogs-markdown .hljs-subst {
  color: #e06c75;
}

 wangt.cc blogs-markdown .hljs-literal {
  color: #56b6c2;
}

 wangt.cc blogs-markdown .hljs-string,
 wangt.cc blogs-markdown .hljs-regexp,
 wangt.cc blogs-markdown .hljs-addition,
 wangt.cc blogs-markdown .hljs-attribute,
 wangt.cc blogs-markdown .hljs-meta  wangt.cc blogs-markdown .hljs-string {
  color: #98c379;
}

 wangt.cc blogs-markdown .hljs-attr,
 wangt.cc blogs-markdown .hljs-variable,
 wangt.cc blogs-markdown .hljs-template-variable,
 wangt.cc blogs-markdown .hljs-type,
 wangt.cc blogs-markdown .hljs-selector-class,
 wangt.cc blogs-markdown .hljs-selector-attr,
 wangt.cc blogs-markdown .hljs-selector-pseudo,
 wangt.cc blogs-markdown .hljs-number {
  color: #d19a66;
}

 wangt.cc blogs-markdown .hljs-symbol,
 wangt.cc blogs-markdown .hljs-bullet,
 wangt.cc blogs-markdown .hljs-link,
 wangt.cc blogs-markdown .hljs-meta,
 wangt.cc blogs-markdown .hljs-selector-id,
 wangt.cc blogs-markdown .hljs-title {
  color: #61aeee;
}

 wangt.cc blogs-markdown .hljs-built_in,
 wangt.cc blogs-markdown .hljs-title.class_,
 wangt.cc blogs-markdown .hljs-class  wangt.cc blogs-markdown .hljs-title {
  color: #e6c07b;
}

 wangt.cc blogs-markdown .hljs-emphasis {
  font-style: italic;
}

 wangt.cc blogs-markdown .hljs-strong {
  font-weight: bold;
}

 wangt.cc blogs-markdown .hljs-link {
  text-decoration: underline;
}

参考文章

本文来源：修改博客园markdown编辑器代码高亮风格的方法 - JasonCeng - 博客园 (cnblogs wangt.cc ) ，有删改。

脚本宝典总结

以上是脚本宝典为你收集整理的修改博客园 markdown 编辑器代码高亮样式的方法全部内容，希望文章能够帮你解决修改博客园 markdown 编辑器代码高亮样式的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。