背景

谁不想要一个完美的写作环境呢?对我来说,typora的使用体验堪称完美。在多方选择以后,我敲定了vue这款仿vue官方文档 的主题。绿色+清爽的特点让其成为我的心头好。

然而看到react官方文档又让我心生不爽:黑色的代码高亮看起来好酷啊!

typora的代码高亮是通过css渲染实现的。所以开始了折腾的道路。

我选了一个我喜欢的One Dark主体并进行了修改。先给大家看看修改后效果:

尝试

尝试1:官方文档上扒取

首先尝试从react官方文档上面扒css样式,看是否有端倪。通过元素选择器看到gatsby这个关键词。

google一番后发现gatsby其实是一个构建静态博客的一个系统。不知道为什么在国内没有非常流行。而代码高亮正是通过gatsby相关的插件实现的。

遂搜索gatsbyhighlight两个关键词,搜索到一个gatsby插件。这个插件效果看起来非常美观,我借此也发现了一个带壳(仿MacOS窗口)并且生成图片的工具Carbonhttps://carbon.now.sh/

carbon

这个工具还有vscodeatomsublimetext的插件。不过Carbon也并不是我想要的。这条路暂时失败了。

尝试2:找有类似效果的博客

准备前端面试的时候,发现了一个博客,里面也是类似VUE+黑色代码高亮。于是尝试如法炮制搜索其高亮的方法。这次直接关键词都没有找到。

尝试3:查阅typora的官方说明

正在我苦思冥想的时候,发现我这不是给自己添乱嘛,明明就只是想要typora实现语法高亮,那么应该有对应的方法的。随即搜索typora highlight两个关键字。最后终于找到了typora的css编辑和代码高亮的编辑方法。

解决方案

预备知识

Typora的CSS加载逻辑

Typora以如下的顺序加载CSS文件

  1. Typora默认效果
  2. 当前主题的CSS
  3. 与主题同一目录的base.user.css文件(会影响到所有的主题)
  4. 与主题同一目录的{主题名}.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-familycolorbackground-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.fencesbackground-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样式:蓝奏云下载

或许看到这里有的读者会觉得笔者太折腾了。

“以前总是喜欢折腾这些,后来都累了。还是好好写文章了”

笔者想说的是,通过这样的折腾,就是不断提升自己技术能力的过程。大家各有取舍,选择在自己愿意花时间的东西上花时间,不应该被指责。

希望大家写作愉快!

最后修改:2021 年 03 月 17 日 05 : 29 PM