By

倾城之链

Markdown 是一种轻量级的「标记语言」，旨在简洁、高效；它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档；它的优点很多，目前也被越来越多的写作爱好者、撰稿者广泛使用。自从 14 年首次接触到 Markdown，就被这种学习简单，功能强大、使用高效的的设计所吸引，也是此后许多年写文章、做 PPT 、记录代办事项等首选工具。本文在于分享 Markdown 相关资源、以及高阶用法的奇技淫巧。

备注：请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本极低（5 分钟即可学会），且一旦熟悉这种语法规则，会有一劳永逸的效果。有百千种资源平台以供使用的同时，也衍生出越来越多开源库，可供我们在代码中调用。

适用人群：Markdown 适用于所有需要撰写文档、文章、电子书等用户；因为它具有这几个优势：

  • 轻量级的「标记语言」，学习成本极低；
  • 可以令人专注写内容，而无需关注排版；
  • 支持一键转换为 Word、PDF、HTML、图片等。

在与时俱进版前端资源教程 | Markdown 篇中，收录了大量 Markdown 相关，涵盖入门技巧、资源平台、Markdown 相关的工具库、组件库等等，有需要的朋友，可以参考下。本篇文章的撰写，也是基于之前开发的 Arya - 在线 Markdown 编辑器完成。

自此，有必要介绍下 Arya - 在线 Markdown 编辑器：📝 她是基于 Vue、Vditor，所构建的在线 Markdown 编辑器，支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱…..另外支持 PPT 预览；视频音频解析；HTML 自动转换为 Markdown；所见即所得编辑模式；支持复制到微信公众号；支持导出携带样式的 PDF、PNG、HTML；凡此种种，不胜枚举…….感兴趣的朋友，欢迎体验品尝。下面进入正题，一起看下 Markdown 有哪些值得运用的奇技淫巧。

备注：Markdown 由 John Gruber 在 2004 创建，已被运用于几乎所有主流网站广泛使用。但至今没有统一标准化，因此除了基本语法外，高阶运法在不同解释器，可能有所不同。因为 Markdown 其实 HTML 的一种书写格式（变体），所以 Markdown 兼容 HTML，这就使得 Markdown 不能实现的效果，可以通过 HTML + CSS 来完成。

在 Markdown 中创建一个 Git Diff

首先，不要指定编程语言，而是在回标后使用 diff。然后，在任何你想显示为删除的代码行的开头，添加一个-，在任何你想显示为添加的代码行的开头，添加一个+。

1
2
3
4
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}

具体效果如下所示：

1
2
3
4
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}

Markdown 如何处理长链接

文章中充满大量的链接使用时，会使源文本不易阅读，当链接地址过长时尤为明显。此时可以使用键或引用，来设置链接地址，使得链接与文本分离；即可正常工作，又不影响正文显示。具体如下图示说明：

Markdown 如何处理长链接

如何基于 Markdown 来做 PPT

基于 Markdown 来做 PPT，在这里也有非常多的工具来完成，如 remark、revealjs、presenta-lib 等库；也可以借助 Marp 等桌面应用；还可以基于 md2googleslides、nodeppt、cleaver 等命令行工具，你可根据自己的喜好，选择性使用。

Markdown 设置文字属性

在 Markdown 中，对于文字有加粗、斜体、加删除线，行内代码块等默认操作；如果要根据自己设置颜色、字体尺寸、加阴影等属性，可以借助 Html 知识来设置；

1
2
3
4
<span style="color: #696969;font-size: 28px;text-shadow: black 0.1em 0.1em 0.2em">在 Markdown 中，为文字设置其他属性</span>
<span style="color: #ef4136;font-size: 28px;text-shadow: 0 0 0.2em #2edfa3, 0 0 0.2em #FF8877">天意怜芳草，人间重晚晴。</span>
<span style="font-size: 28px;background-image: linear-gradient(to right bottom, rgb(255,0,0), rgb(255,128,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,128), rgb(0,255,255), rgb(0,128,255), rgb(0,0,255), rgb(128,0,255), rgb(255,0,255), rgb(255,0,128)); -webkit-background-clip: text;color: transparent;">悲莫悲兮生别离, 乐莫乐兮新相知。</span>
<div style="background-color: #cccccc"><span style="color: #C8C8C8;font-size: 28px;text-shadow: 1px 1px white, -1px -1px #444444;">As you think, so shall you become.</span></div>

在 Markdown 中，为文字设置其他属性
天意怜芳草，人间重晚晴。
悲莫悲兮生别离, 乐莫乐兮新相知。

As you think, so shall you become.

在 Markdown 中添加表格

1
2
3
4
5
| Key | Value | 备注 |
| :--- | :---: | ---: |
|居左对齐 | 居中对齐  | 居右对齐 |
|  |  |  |
| [倾城之链](https://nicelinks.site/)❤️ | `开放平台`🙌🏻  |  **优秀网站** 📘|
Key Value 备注
居左对齐 居中对齐 居右对齐
倾城之链❤️ 开放平台🙌🏻 优秀网站 📘

Markdown 中使图片居中

1
![倾城之链，云集全球优秀网站](https://image.nicelinks.site/倾城之链-Banner.png)
1
<div align="center"><img src="https://image.nicelinks.site/倾城之链-Banner.png" alt="倾城之链，云集全球优秀网站"></div>
倾城之链，云集全球优秀网站

Markdown 中折叠一部分内容

1
2
3
4
5
6
7
8
9
<details>
<summary>点击我，了解「倾城之链」</summary> 
<pre>
    作为一个开放平台，
    旨在云集全球优秀网站，
    探索互联网中更广阔的世界；
    在这里，你可以轻松<strong>发现、学习、分享更多有用或有趣的事物</strong>。
<pre>
</details>

点击我，了解「倾城之链」

    作为一个开放平台，
    旨在云集全球优秀网站，
    探索互联网中更广阔的世界；
    在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。

Markdown 中插入视频

1
2
3
<video id="video" controls="" width="100%" preload="none" poster="your-poster-path">
<source id="mp4" src="your-video-path">
</video>
  • src：视频地址；
  • controls：显示或隐藏播放器（ true/false）；
  • width：播放器宽度（px / 百分比）；
  • height：播放器的高度（px / 百分比）；
  • poster：指定封面（图片地址）；

如何在前端开发中运用 Markdown

Markdown 要不 HTML 来的更快捷；在前端开发中，使用 Markdown 来绘制界面，处于开发效率，也是比较可取的选择。通常有两种实现方式：借助解释器如 marked；运用 MDX。

在开发独立个人产品「倾城之链」的关于 | About 页面，以及「倾城之链」小程序，就采取 Markdown 结合 marked 方式；具体实现可参见 nicelinks-vue-client。在 vue 中的用法大致如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="markdown-body" v-html="beParsedVal"></div>
</template>
<script>
import marked from 'marked'
export default {
  name: 'PreviewMd',
  data() {
    return {
        beParsedVal: ''
    }
  },
  created() {
    const content = `[「倾城之链」](https://nicelinks.site/?utm_source=nicelinks.site)，作为一个开放平台....`
    this.beParsedVal = marked(content, {
        sanitize: true,
    })
  }
}
</script>

以上，即 Markdown 常用语法之外的些许“奇技淫巧“，欢迎朋友分享更多精彩用法。

于深圳.福田，2020.11.25 ~ 2020.11.26

您可能感兴趣的文章

静晴轩 ~ 晚晴幽草轩
个人微信公众号：晚晴幽草轩；名字取自：“天意怜幽草，人间重晚晴”。
专注互联网开发（Web 大前端、快应用、小程序），以及分享优质网站、AI 应用、效率工具、心得感悟等内容。

文档信息

文章目录
  1. 1. 在 Markdown 中创建一个 Git Diff
  2. 2. Markdown 如何处理长链接
  3. 3. 如何基于 Markdown 来做 PPT
  4. 4. Markdown 设置文字属性
  5. 5. 在 Markdown 中添加表格
  6. 6. Markdown 中使图片居中
  7. 7. Markdown 中折叠一部分内容
  8. 8. Markdown 中插入视频
  9. 9. 如何在前端开发中运用 Markdown
  10. 10. 您可能感兴趣的文章