⚠|不要再使用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: 代码片断描述

这样你就可根据本身的习惯设置一些经常使用的代码片断或者固定的文章结尾等，而没必要苦记第三方编辑器快捷键或者苦苦寻找密密麻麻的格式化按钮。