背景
谁不想要一个完美的写作环境呢？对我来说，typora的使用体验堪称完美。在多方选择以后，我敲定了vue这款仿vue官方文档 的主题。绿色+清爽的特点让其成为我的心头好。
然而看到react的官方文档又让我心生不爽：黑色的代码高亮看起来好酷啊！
typora的代码高亮是通过css渲染实现的。所以开始了折腾的道路。
我选了一个我喜欢的One Dark主体并进行了修改。先给大家看看修改后效果：
尝试
尝试1：官方文档上扒取
首先尝试从react官方文档上面扒css样式，看是否有端倪。通过元素选择器看到gatsby这个关键词。
google一番后发现gatsby其实是一个构建静态博客的一个系统。不知道为什么在国内没有非常流行。而代码高亮正是通过gatsby相关的插件实现的。
遂搜索gatsby和highlight两个关键词，搜索到一个gatsby插件。这个插件效果看起来非常美观，我借此也发现了一个带壳（仿MacOS窗口）并且生成图片的工具Carbon（https://carbon.now.sh/）
这个工具还有vscode和atom、sublimetext的插件。不过Carbon也并不是我想要的。这条路暂时失败了。
尝试2：找有类似效果的博客
准备前端面试的时候，发现了一个博客，里面也是类似VUE+黑色代码高亮。于是尝试如法炮制搜索其高亮的方法。这次直接关键词都没有找到。
尝试3：查阅typora的官方说明
正在我苦思冥想的时候，发现我这不是给自己添乱嘛，明明就只是想要typora实现语法高亮，那么应该有对应的方法的。随即搜索typora highlight两个关键字。最后终于找到了typora的css编辑和代码高亮的编辑方法。
- typora代码高亮文档原文：http://support.typora.io/Code-Block-Styles/
- typora修改自定义css和添加自定义（魔改）css文档原文：http://support.typora.io/Add-Custom-CSS/
解决方案
预备知识
Typora的CSS加载逻辑
Typora以如下的顺序加载CSS文件
- Typora默认效果
- 当前主题的CSS
- 与主题同一目录的
base.user.css文件（会影响到所有的主题） - 与主题同一目录的
{主题名}.user.css文件 （相当于对当前主题的增量修改，插件的感觉）
例如，我们目前使用的是vue.css ，typora会先加载主题css，然后再加载用户自定义设置。
typora不推荐直接修改主题css文件，因为主题文件有可能会更新，这会导致原来的修改内容完全消失了
Typora的语法高亮
typora使用codemirror（官网：https://codemirror.net/）的高亮样式。通过修改适用于codemirror的css样式，并且通过typora的机制加载进去，最终就能得到我们想要的结果。
修改高亮的方法
首先打开codemirror的主题测试页面：https://codemirror.net/demo/theme.html#3024-night选择你喜欢的主题
要下载对应的css，在地址框输入https://codemirror.net/theme/{你要的主题}.css 即可。例如https://codemirror.net/theme/seti.css。
将内容拷贝下来，以 vue这款主题为例，在typora主题文件夹下新增vue.user.css，将css样式粘贴进去：
接下来就要对代码进行改造了。
替换codemirror用的css选择器
按照官方文档的指示，第一步是将.cm-s-{主题名}.（例如这里是.cm-s-seti.）替换为.cm-s-inner.
补充基本样式
因为typora渲染markdown的机制是使用一个<pre class="md-fences">标签，所以为了让一些基本样式显示正常 ，应该把类似font-family，color，background-color这样的样式加入进去。
在vue.user.css里补充一段如下样式（如果你读到这里 先不要着急复制，接下来还要改）：
/**apply to code fences with plan text**/
/* fences就是代码块的基本样式*/
.md-fences {
background-color: #263238;
color: rgba(233, 237, 237, 1);
border: none;
}
/* tooltip就是点击代码块之后，在右下角有一个小框（tooltip）提示这是什么语言*/
.md-fences .code-tooltip {
background-color: #263238;
}保存css文件。切换到其他的主题再切换回来，预览样式，这个时候代码块已经有效果了。
微调样式
效果中，我对两个效果还不是很满意。
- 输入光标的颜色根本就看不清
- 备注的颜色太淡了
- 边框是非常难看的直角 还有很奇怪的灰色边角。
我的分析：
光标颜色其实在
.cm-s-inner .CodeMirror-cursor中定义：.cm-s-inner .CodeMirror-cursor { border-left: 1px solid #FFCC00; }但是可能因为优先级不够被忽略了。解决方法是在上面加上
!important提升优先级。 如果对光标厚度不满意也可以修改1px为自己喜欢的尺寸。- 备注颜色是在
.cm-s-inner .cm-comment中进行定义的。修改对应颜色即可
.cm-s-inner .cm-comment {
/* ANCHOR comment color */
/* 备注掉原来的 color: #464B5D; */
color: rgb(182, 182, 182);
}- 直角改圆角其实很好改，使用
border-radius属性就行。灰色边角可能是因为在md-fences元素外还包裹了一层别的元素，需要修改这一层元素才可以。那是那一层具体在控制边角呢？通过typora导出html 并用元素选择器筛查。发现是.cm-s-inner.CodeMirror这一选择器。修改如下：
.cm-s-inner.CodeMirror {
/*原本内容*/
background-color: #0F111A;
color: #8F93A2;
/*增加效果*/
border-radius: 10px;
}- 此时灰边问题还没有被修正。实际上这是因为
.md-fences中的background-clor和.cm-s-inner.CodeMirror中的不一致，修改.md.fences中background-color即可。 - 同时经过查看
vue.css发现，.md-fences实际上前面有个#write的id选择器，必须加上才能让vue.user.css里的样式生效。
修改.md-fences和.md-fences .code-tooltip ,.cm-s-inner .CodeMirror选择器如下：
.cm-s-inner.CodeMirror {
/*这里的颜色应该和之后几个背景色一致*/
background-color: #0F111A;
color: #8F93A2;
border-radius: 10px;
}
.cm-s-inner .CodeMirror-gutters {
background: #0F111A;
color: #464B5D;
border: none;
}
/* 中间段落略 */
#write .md-fences {
background-color: #0F111A !important;
color: rgba(233, 237, 237, 1);
border: none !important;
border-radius: 10px !important;
-webkit-font-smoothing: initial;
line-height: 1.43rem;
/*设置字体和大小*/
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto Mono, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, Source Sans Pro, Monaco, courier, monospace;
/*默认0.85rem 根据个人喜好修改到1rem*/
font-size: 1rem;
word-wrap: normal;
}
#write .md-fences .code-tooltip {
background-color: #263238;
}最后经过筛选，我选了一个我喜欢的One Dark主体并进行了修改。修改后效果：
总结
分享一下笔者修改的VUE样式：蓝奏云下载
或许看到这里有的读者会觉得笔者太折腾了。
“以前总是喜欢折腾这些，后来都累了。还是好好写文章了”
笔者想说的是，通过这样的折腾，就是不断提升自己技术能力的过程。大家各有取舍，选择在自己愿意花时间的东西上花时间，不应该被指责。
希望大家写作愉快！