使用 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 的样式都注释掉了。

最终达到本身想要的与 SegmentFault 的 markdown 风格的样式。

如下分享下本身设置的样式代码，须要能够下载： examples-atom-style.less