前置

我在很久之前就发现了使用第三方 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: 代码片段描述

这样你就可根据自己的习惯设置一些常用的代码片段或者固定的文章结尾等,而不必苦记第三方编辑器快捷键或者苦苦寻找密密麻麻的格式化按钮。

⚠ | 不要再使用 markdown 主题了!的更多相关文章

  1. Markdown 主题修改

    加粗字体的颜色修改 strong, b{ color: #111111; } 斜体的颜色修改 em, i { color: #111111; } 高亮字体的背景颜色修改 #write mark { b ...

  2. kafka主题offset各种需求修改方法

    简要:开发中,常常因为需要我们要认为修改消费者实例对kafka某个主题消费的偏移量.具体如何修改?为什么可行?其实很容易,有时候只要我们换一种方式思考,如果我自己实现kafka消费者,我该如何让我们的 ...

  3. 让你的站点也支持MarkDown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  4. Sublime Text3下的markdown插件的安装及配置

    Sublime Text3下的markdown插件的安装及配置 安装准备--安装Package Control 安装MarkdownEditing 安装Markdown Preview或OmniMar ...

  5. markdown编辑器

    经过一番探索终于找到两个可以实时预览的markdown编辑器 一,sublime text 3 + MarkDown Editing + OmniMarkupPreviwer 安装方法网上均有,这里要 ...

  6. Markdown入门基础

    // Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...

  7. iOS开发之主题皮肤

    iOS开发之主题皮肤 分类: [iOS]  最近在开发一款[公交应用],里面有个模块涉及到主题设置,这篇文章主要谈一下个人的做法. 大概的步骤如下: (1):整个应用依赖于一个主题管理器,主题管理器根 ...

  8. iOS开发之App主题切换完整解决方案(Swift版)

    本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了.本篇博客中所涉及的Demo完全使用Swift3.0编写完成, ...

  9. 在为知笔记中使用Markdown和思维导图

    为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...

随机推荐

  1. Hbase的安装与基本操作

    简介: 1安装 HBase​   本节介绍HBase的安装方法,包括下载安装文件.配置环境变量.添加用户权限等. 1.1 下载安装文件   HBase是Hadoop生态系统中的一个组件,但是,Hado ...

  2. mysql查询添加

    当表结构一样的情况下,insert into 想要插入的表  SELECT * from  查询的表; 此sql语句,适应于 1000万数据插入1000万数据中去,2000万数据的合并 .------ ...

  3. Inno Script - How to make “I Accept the Agreement” radio button on EULA page selected by Default

    出处: https://stackoverflow.com/questions/11187022/inno-script-how-to-make-i-accept-the-agreement-radi ...

  4. scala教程之:可见性规则

    文章目录 public Protected private scoped private 和 scoped protected 和java很类似,scala也有自己的可见性规则,不同的是scala只有 ...

  5. Scala教程之:scala的参数

    文章目录 默认参数值 命名参数 scala的参数有两大特点: 默认参数值 命名参数 默认参数值 在Scala中,可以给参数提供默认值,这样在调用的时候可以忽略这些具有默认值的参数. def log(m ...

  6. MFC之动态调用自己写的类库中的类的成员方法

    第一步:创建一个要调用的类库 如果是MFC程序使用,可以创建一个MFC的类库,不过依然可以创建一个win32类库.我所知道的,MFC的类库可以分为常规MFC DLL和MFC扩展DLL关于它们之间的区别 ...

  7. 如何理解Java的值传递

    结论 为了加深印象,先把结论放在文章开头. ++Java中只有值传递++. 形参与实参 在理解Java的值传递 实参Argument 实际参数,主调用函数传递给调用函数的参数 形参Parameter ...

  8. React技术栈——Redux

    Redux 1.Redux是什么?   Redux对于JavaScript应用而言是一个可预测状态的容器.换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs ...

  9. Merge_Sort

    public class Merge_Sort { public static void merge(int a[],int n){ int source; //合并之前数组的大小 int targe ...

  10. 图像处理之OpenCV - 缩放/旋转/裁剪/加噪声/高斯模糊

    Github地址 @ 缩放 void cv::resize ( InputArray src, OutputArray dst, Size dsize, , , int interpolation = ...