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

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

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

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

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

自此,有必要介绍下 Arya - 在线 Markdown 编辑器:📝 她是基于 VueVditor,所构建的在线 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,在这里也有非常多的工具来完成,如 remarkrevealjspresenta-lib 等库;也可以借助 Marp 等桌面应用;还可以基于 md2googleslidesnodepptcleaver 等命令行工具,你可根据自己的喜好,选择性使用。

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://site.lovejade.cn/)❤️ | `开放平台`🙌🏻 | **优秀网站** 📘|
Key Value 备注
居左对齐 居中对齐 居右对齐
倾城之链❤️ 开放平台🙌🏻 优秀网站 📘

Markdown 中使图片居中

1
![倾城之链,云集全球优秀网站](https://image.lovejade.cn/倾城之链-Banner.png)
1
<div align="center"><img src="https://image.lovejade.cn/倾城之链-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://site.lovejade.cn/?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. 您可能感兴趣的文章