⚠|不要再使用markdown主題了！

前置

我在好久以前就發現了使用第三方 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 文件中像在其餘代碼文件中使用提示建議。

接下來只須要定義須要的快捷代碼片斷：

1. 經過 ctrl+shif+p 打開命令窗口
2. 輸入 snippets

1. 選中 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: 代碼片斷描述

這樣你就可根據本身的習慣設置一些經常使用的代碼片斷或者固定的文章結尾等，而沒必要苦記第三方編輯器快捷鍵或者苦苦尋找密密麻麻的格式化按鈕。