欢迎访问www.allbetgaming.com!

首页科技正文

唐山二手车: | 不要再使用 markdown 主题了!

admin2020-05-2010

前置

我在良久之前就发现了使用第三方 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 并打开

唐山二手车: | 不要再使用 markdown 主题了! 第1张

以输入 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 主题了! 第2张

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

,

阳光在线

阳光在线www.massefm.com(原诚信在线)现已开放阳光在线手机版下载。阳光在线游戏公平、公开、公正,用实力赢取信誉。

网友评论