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

xiongweiwei00 2019-06-27

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

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

markdown-preview-enhanced 安装

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

设置预览样式

打开 Atom 的 Preferences -> Packages,输入 markdown-preview-enhanced 找到这个插件的设置页面,红框出就是选择已有的预览样式的地方。
使用 Atom 编辑 Markdown, 用上 Segmenfault 的 css 样式

自定义样式

当自带样式不能满足需要的话,可以根据 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

相关推荐