使用 Atom 编辑 Markdown， 用上 Segmenfault 的 css 样式

一直在社区潜水许久，最近用上了 Atom，除了作为编辑器写写脚本之类的，也作为 markdown 编辑器为平时的邮件、笔记排版。常用操作为：写好预览后复制粘贴到邮件、笔记软件里去。

参考了社区里推荐的一些 markdown 的插件，写 markdown 真的方便不少~ 预览用的是 markdown-preview-enhanced 的这个插件，不过有点觉得自带的预览主题有点单调，挺喜欢 SegmentFault 社区的 markdown 样式，虽然没在社区找到相应的教程，不过我折腾了下已经成功在 Atom 中用上这个样式，记录下设置流程：

markdown-preview-enhanced 安装

这个就省略掉啦，这个大家应该都知道，不知道教程也挺多的，搜搜就有了这里就不再重复。

设置预览样式

打开 Atom 的 Preferences -> Packages，输入 markdown-preview-enhanced 找到这个插件的设置页面，红框出就是选择已有的预览样式的地方。

自定义样式

当自带样式不能满足需要的话，可以根据 markdown-preview-enhanced 自定义 CSS 文档增加自定义样式。

添加 SegmentFault 的 markdown 样式

参考社区里的这个问答 如何把SegmentFault 的markdown的css样式插入到atom中？，底下的答案指明了一条路，我将所有含 .fmt 的 css 样式提取之后，根据 markdown-preview-enhanced 自定义 CSS 提示，在 style.less 文件中添加节点

.markdown-preview.markdown-preview {
}

然后将上一步骤提取到的 css 代码复制到这个节点下，并把 .fmt 的前缀去掉。保存之后重新预览 markdown 文件后发现有两个问题：

1. 大致样式和 SegmentFault 的 markdown 样式一致了，但是反引号 ` 中的内联代码块高亮还是浅灰色，而不是社区里的玫红色
2. 整体字体大小和网页上一致，和原来的预览样式相比字号小了很多，个人有点适应不过来，觉得标题的字太小了

解决问题 1 是出了要提取 .fmt 的 css 样式 之外，还需要把 code 的 css 样式提取出来。解决问题 2 我将 h1 ~ h6 中关于 font-size 的样式都注释掉了。

以下分享下自己设置的样式代码，需要可以下载：examples-atom-style.less