使用 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