前提說明

• 在使用 Markdown 進行文字編輯后發布在博客或者公眾號時，有時需要對樣式進行自定義。
• 目前的編輯器主要提供了三種方式：在線編輯后復制，離線編輯后復制，一鍵樣式轉換。
• 嘗試了幾個編輯器，各有優勢。

編輯器說明

Md2All

• 在線編輯后復制
• 提供主題選擇；樣式自定義；代碼主題選擇；代碼行數顯示
• 自定義的 CSS 樣式所用的標簽與網頁一致，會影響編輯界面樣式

Markdown Nice

• 在線編輯后復制；一鍵樣式轉換
• 提供主題選擇；樣式自定義；代碼主題選擇；部分代碼主題提供代碼行數顯示
• 自定義的 CSS 樣式所用的標簽通過#nice前綴修飾，不會影響編輯界面樣式
• 所使用的.prefix和.suffix標簽在其他編輯器的自定義樣式中無法使用

Markdown Here

• 一鍵樣式轉換
• 提供 CSS 樣式自定義；代碼主題選擇；代碼語法高亮 CSS 樣式自定義，不支持行數顯示
• 自定義的 CSS 樣式所用的標簽與網頁一致
• 不支持before和after修飾
• 不支持畫圖

Typora

• 離線編輯后復制
• 提供主題選擇；樣式自定義；代碼行數顯示
• 自定義的 CSS 樣式所用的標簽與網頁一致，會影響編輯界面樣式
• 支持畫圖：流程圖；時序圖；甘特圖

Yu Writer

• 離線編輯后復制
• 付費后提供主題選擇；不支持樣式自定義；不提供代碼行數顯示

MarkEditor

• 離線編輯后復制
• 提供 CSS 樣式自定義；不支持行數顯示
• 自定義的 CSS 樣式所用的標簽與網頁一致
• 不支持before和after修飾
• 支持畫圖：柱狀圖；線圖；餅圖；標準流程圖

Joplin

• 離線編輯后復制
• 提供 CSS 樣式自定義，但實際不可用；不支持行數顯示
• 支持畫圖：流程圖；時序圖；甘特圖
• 提供 WebDAV 同步

MarkdownPad 2

• 離線編輯后復制
• 提供 CSS 樣式自定義；提供格式標記顯示；不支持行數顯示
• 自定義的 CSS 樣式所用的標簽與網頁一致
• 不支持畫圖

VS Code

• 離線編輯后復制
• 提供 CSS 樣式自定義；提供語法檢查；可通過插件擴展功能
• 自定義的 CSS 樣式所用的標簽與網頁一致，但是樣式內容是放在一個 less 文件中，并經過處理，因此不會影響界面樣式

注意事項

• 需要注意的是，通過before和after標簽所產生的修飾效果是無法復制的，這部分修飾會在復制時丟失。只能通過一鍵樣式轉換或者把這部分修飾的實現代碼移植到所修飾的本體中來實現修飾效果。
• before和after在 CSS 樣式表中是通過偽類和偽元素來實現的，不支持這兩種標簽的編輯器也可能不支持偽類和偽元素。
• 通過復制編輯器渲染后所產生的富文本再進行粘貼的方式，在粘貼時存在樣式丟失，在發布平臺進行保存時也存在樣式丟失。

版權聲明：本文為「夢幻之心星」原創，依據 CC BY-NC-SA 4.0 許可證進行授權，轉載請附上原文出處鏈接及本聲明。

博客園地址：http://www.rzrgm.cn/Sky-seeker

微信公眾號：關注微信公眾號，獲取即時推送