Markdown 用法中的奇技淫巧

工具利器 Nov 26, 2020

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。然后,在任何你想显示为删除的代码行的开头,添加一个 -,在任何你想显示为添加的代码行的开头,添加一个+


```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

具体效果如下所示:

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

Markdown 如何处理长链接

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

Markdown 如何处理长链接

如何基于 Markdown 来做 PPT

基于 Markdown 来做 PPT,在这里也有非常多的工具来完成,如 remarkrevealjspresenta-lib 等库;也可以借助 Marp 等桌面应用;还可以基于 md2googleslidesnodepptcleaver 等命令行工具,你可根据自己的喜好,选择性使用。

如何用 Markdown 写公众号

Markdown 因为其强大功能,用来写文章、论文,都是十分方便。时至今日,微信公众号后台,却为对 Markdown 予以支持。但这并不影响您使用 Markdown 写公众号;市面上已经提供非常多工具,支持一键拷贝内容至微信公众号,不仅方便文章编写,同时对让人有更棒的公众号排版。譬如这两款工具就很值得推荐:

如何用 Markdown 写公众号

Markdown 设置文字属性

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

<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 中添加表格

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

Markdown 中使图片居中

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

Markdown 中折叠一部分内容

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

Markdown 中插入视频

<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 中的用法大致如下所示:

<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

您可能感兴趣的文章

nicejade

予 90 年生人(公历 91);性别男,爱好女;姓氏在百家姓中排一十六位,字琼璞,号轩帅;产自陕南一隅;现栖身于深圳,作为一介程序员。略崇文喜武,大爱豪杰美人,也尚科技;现有维护多个基于不同工具搭建的技术博客,及「倾城之链」、「Arya Jarvis」等个人作品,故而衍生别号:晚晴幽草轩轩主、倾城之链城主、静轩之别苑阁主。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.