Typora修改代码块样式

Typora修改代码块样式

当我们使用久了，就会有自己的风格。那么我就想要自己习惯的Typora代码块的样式

文中举的例子就是我修改了Typora Github风格的，使用了Sublime Text的Monokai样式

Typora的代码块语法高亮使用的是CodeMirror实现的，所以需要更换代码块的样式，我们可以去CodeMirror提供的里下载样式表文件进行修改。

拿举例Sublime Text的Monokai样式了，在monokai可以看到该样式内容。替换自己喜欢的样式到Typora，只需要两步即可:

1. 把样式表的内容复制粘贴到主题目录themes下的base.user.css或[theme].user.css样式表文件内，其中[theme]表示对应的主题的名字，我使用的主题是Github，所以我修改的是github.user.css文件。PS在Mac版本中直接在Setting Perfomance偏好设置中找到外观-主题-打开主题文件夹即可 路径：Library/Application Support/anberworks.Typora/themes

2. 在codemirror中找到你需要的主题CSS文件，复制粘贴进去之后把文本中的.cm-s-monokai统一改成.cm-s-inner，使用查找替换功能可以瞬间完成 :)

3. 在以上样式的底部，直接复制添加代码块的基础样式到样式表中，如font-family, color还有background等属性，完成后的样式表内容应该是类似这样的:

   /* Based on Sublime Text's Monokai theme */
   
   .cm-s-inner.CodeMirror { background: #272822; color: #f8f8f2; }
   .cm-s-inner div.CodeMirror-selected { background: #49483E; }
   .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
   .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
   .cm-s-inner .CodeMirror-gutters { background: #272822; border-right: 0px; }
   .cm-s-inner .CodeMirror-guttermarker { color: white; }
   .cm-s-inner .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
   .cm-s-inner .CodeMirror-linenumber { color: #d0d0d0; }
   .cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
   
   .cm-s-inner span.cm-comment { color: #75715e; }
   .cm-s-inner span.cm-atom { color: #ae81ff; }
   .cm-s-inner span.cm-number { color: #ae81ff; }
   
   .cm-s-inner span.cm-property, .cm-s-inner span.cm-attribute { color: #a6e22e; }
   .cm-s-inner span.cm-keyword { color: #f92672; }
   .cm-s-inner span.cm-builtin { color: #66d9ef; }
   .cm-s-inner span.cm-string { color: #e6db74; }
   
   .cm-s-inner span.cm-variable { color: #f8f8f2; }
   .cm-s-inner span.cm-variable-2 { color: #9effff; }
   .cm-s-inner span.cm-variable-3 { color: #66d9ef; }
   .cm-s-inner span.cm-def { color: #fd971f; }
   .cm-s-inner span.cm-bracket { color: #f8f8f2; }
   .cm-s-inner span.cm-tag { color: #f92672; }
   .cm-s-inner span.cm-header { color: #ae81ff; }
   .cm-s-inner span.cm-link { color: #ae81ff; }
   .cm-s-inner span.cm-error { background: #f92672; color: #f8f8f0; }
   
   .cm-s-inner .CodeMirror-activeline-background { background: #373831; }
   .cm-s-inner .CodeMirror-matchingbracket {
     text-decoration: underline;
     color: white !important;
   }
   
   /**apply to code fences with plan text**/
   .md-fences {
     background-color: #272822;
     color: #f8f8f2;
     border: none;
   }
   
   .md-fences .code-tooltip {
     background-color: #272822;
   }

注意: 如果主题目录themes下没有对应的.css文件，自己手动创建即可