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

您可能感兴趣的文章

Tags

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.