前置
我在很久之前就發現了使用第三方 markdown 主題將產生一個的問題，今日在社群發現依然有人寫文章來推薦這種做法。接下來我告訴你為什麼最好不要這樣做以及分享一些 markdown 技巧。若有不足，懇請指點！
第三方主題
在技術社群經常看見使用編輯器 markdown 主題渲染出來的文章，其目的是達到在不同社群一致的 markdown 外觀體驗。有很多優秀的開源 markdown 線上編輯器，如： Markdown Nice。這裡有一個簡單的例子：
不使用主題，上圖的 markdown 內容如下：
## 這是一個標題
使用主題：
<section
id="nice"
data-tool="mdnice編輯器"
data-website="https://www.mdnice.com"
style="font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px;"
>
<h2 data-tool="mdnice編輯器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;">
<span class="prefix" style="display: none;"></span
><span
class="content"
style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;"
>
這是一個標題
</span>
<span class="suffix"></span>
<span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"></span>
</h2>
</section>
效果
這是一個標題
使用主題後，釋出文章時在文章內容區域輸入的不再是 markdown 語法的文字，而是 markdown 結合主題生成的 HTML。markdown 支援渲染 HTML 標籤，且很多社群都支援渲染行內樣式，因此能夠使用第三方 markdown 主題。
糟糕！
有圖有真相
除了最後一個沒有使用第三方主題外，這些使用第三方主題渲染出來的文章，在暗色模式下，視覺效果糟糕，幾乎無法繼續閱讀文章了。雖然現在國內很多社群 pc 端還沒有暗色模式，支援暗色模式依然是一個趨勢。國外很多技術社群都早已支援了暗色模式，國內也在陸續跟進。如果不想讓發表過的文章對你產生心理負擔，最好不要繼續這樣做了，而是使用各社群內建的 markdown 樣式。
產生原因
不使用第三方 markdown 主題，直接釋出的是 markdown 語法的文字，通過不同社群將 markdown 解析成對應樣式；若使用主題則直接插入的是行內樣式，這就導致社群難以適配暗色模式下所有第三方主題樣式。
其他問題
- 使用主題還產生大量冗餘程式碼，這致使原來社群網站載入的 css 樣式無用
- 如果文章很長，可能導致載入變慢
- 一些第三方主題甚至攜帶 js 程式碼，這會對載入速度帶來更明顯的影響
- 文章不易儲存、修改、遷移
建議
我並沒有完全否定使用 第三方 markdown 主題釋出文章，我只是將它可能帶來問題分享給大家，而它幾乎又被所有人忽視。
- 文章釋出到多個社群：最好只使用 markdown 文字
- 文章只發布到一個社群：先檢查該社群網站或 APP 暗色模式下能否正常瀏覽
- 使用相容暗色模式的主題（現在可能還沒有）
你可能在想，有沒有辦法讓 APP 或者 pc 端社群網站相容 markdown 第三方主題暗色模式呢？前面已經說到，第三方主題使用行內樣式，所以 APP 或者 pc 端社群網站不可能覆蓋所有不斷出現的第三方 markdown 主題，且行內樣式不易被覆蓋。有一個辦法（不完美），GitHub star 1.7K 的開源專案 Darkmode.js,通過類似 ‘濾鏡’ 的功能實現暗色模式。我將它的原始碼進行註釋並寫成了部落格，若有興趣，可以點選跳轉以瞭解它。
小技巧
如何快速編輯 markdown 呢？如果你使用 vscode 編輯器，（若使用其他編輯器，推薦下載它並將它最為備用編輯器，它免費、開源），不需要安裝任何 markdown 外掛，接下來將如下程式碼新增到 setting.json：
"[markdown]": {
"editor.quickSuggestions": true
},
它代表可以在
.md檔案中像在其他程式碼檔案中使用提示建議。
接下來只需要定義需要的快捷程式碼片段：
- 通過 ctrl+shif+p 開啟命令視窗
- 輸入
snippets
- 選中
markdown.json並開啟
以輸入 js 程式碼片段為例，在這個 json 檔案中新增如下程式碼：
{
"code js": {
"prefix": "js",
"body": [
"```js",
"$0",
"```"
],
"description": "output js"
},
}
程式碼解釋
name: "code js" 程式碼片段名稱prefix: 用來觸發程式碼段的內容body: 生成的程式碼片段的內容，注意陣列形式$0: 最後的游標位置,${1:label}, ${2:another}:佔位符，具有相同 ID 的佔位符被連結description: 程式碼片段描述
這樣你就可根據自己的習慣設定一些常用的程式碼片段或者固定的文章結尾等，而不必苦記第三方編輯器快捷鍵或者苦苦尋找密密麻麻的格式化按鈕。