typora是一個非常易用且免費的markdown編輯器，是我最常用的文檔編輯器。它支持實時渲染，不用打開兩個窗口（源碼窗口和預覽窗口），真正實現了沉浸式寫作，所謂所見即所得。它的界面簡潔，操作簡單，非常容易上手，這里就不介紹了。本文主要介紹Typora的主題配置，實現公眾號一鍵排版。
為什么要配置主題
typora支持配置渲染的樣式，默認提供了 5 種主題。選擇主題的其中一個目的是文章編輯完成后更加方便閱讀，好的文章排版能提供不錯的閱讀體驗。其次，通過typora將文章排版后，可以直接復制到公眾號上，僅做簡單的修改（添加圖片）就可以發布了。公眾號排版我嘗試過網上提供的編輯器，感覺還是比較麻煩，也可能是我沒找到正確的使用方法吧，不管怎樣最終還是放棄了。使用typora就非常簡單，完成文章編輯后，直接選擇對應的主題進行自動排版，然后復制到公眾號就可以了。
那么最關鍵的就是主題文件了，下面介紹怎么使用和修改主題文件。
主題文件使用
typora的主題文件其實就是CSS文件，了解前端開發的應該都知道，
CSS(Cascading Style Sheets, 層疊樣式表) 是一種描述HTML 文檔樣式的語言，描述如何顯示HTML 元素，typora可以根據CSS主題文件將文檔渲染為對應樣式的HTML文件，Typora 的窗口內容其實就是一個HTML網頁。
主題文件下載
typora官方提供了多種主題：https://theme.typora.io/，可以在上面下載喜歡的主題。Github上有個markdown-css項目也提供了一些主題：http://wecatch.me/markdown-css/。
導入主題文件
typora點擊 文件 -> 偏好設置 -> 外觀 -> 主題 -> 打開主題文件夾，會打開主題的存放目錄，將你下載的主題文件復制到這個目錄下，然后重新啟動typora，在菜單欄的【主題】中就可以選擇你加入的主題了。
主題文件修改
當然，除了下載網上提供的主題文件，也可以手動編寫，定制個性化的主題。最省事的方法是在已有主題文件的基礎上進行修改，如果對CSS語法不熟悉，可以參考多個主題文件進行修改。
CSS語法
typora是一個markdown編輯器，主題文件使markdown文本具有一定的樣式，也就是通過CSS渲染，因此，每個markdown類型對應了HTML中的元素標簽，這樣才能實現准確的渲染。
它們的對應關系可參考官方文檔：https://theme.typora.io/doc/zh/Write-Custom-Theme/，上面有詳細的介紹。比如標題(markdown類型：heading)對應CSS中的h1~h6；無序列表對應ul li。
CSS屬性設置中，比較常見的就是設置字體以及HTML標簽的位置、邊距等，下面介紹CSS單位和邊距屬性設置方法。
CSS單位
- 1em： 等於當前的字體尺寸。
- 2em： 等於當前字體尺寸的兩倍
- 1 pt： 1磅，等於 1/72 英寸
- px：像素 (計算機屏幕上的一個點)
CSS margin 屬性
設置外邊距屬性，設置給定元素四個（上下左右）方向的邊距。也可以單獨設置屬性：margin-top，margin-right，margin-bottom，和 margin-left：https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin
/* 所有 4 個外邊距都是 2em */
p {
margin: 2em
}
/* 上下邊距2em 左右邊距1em */
p {
margin: 2em 1em
}
/* 上邊距3em 左右邊距2em 下邊距1em*/
p {
margin: 3em 2em 1em
}
/* 上邊距3em 右邊距2em 下邊距1em 左邊距2em*/
p {
margin: 3em 2em 1em 2em
}
修改主題文件
先選擇一個主題文件，選擇你喜歡的主題，然后在它的基礎上進行小幅修改。
Typora提供兩種主題調試和測試方法：
一種方法是使用Theme Toolkit：
在瀏覽器中進行調試，也就是使用瀏覽器自帶的開發工具進行調試，具體使用方法參考：https://github.com/typora/typora-theme-toolkit
第二種方法是直接在Typora中進行調試：
windows系統中，Typora 點擊 文件 -> 偏好設置 -> 通用 -> 高級設置，勾選【開啟調試模式】，然后切換到文章，菜單欄點擊【視圖】，選擇【開發者工具】：
這就和瀏覽器調試一樣了，對相應的標簽元素進行調整。
得到合適的CSS屬性參數后，需要修改CSS文件才能永久生效，可以使用VScode打開CSS文件，它有以下優點：
- 方便選擇顏色（瀏覽器調試工具也可以）
- 方便查找CSS屬性文檔
將鼠標放在標簽屬性上方就會彈出文檔鏈接，下圖點擊鏈接可以打開text-align設置文檔。
歡迎關注公眾號:「測試開發小記」及時接收最新技術文章！