Markdown 全攻略


我们很多人听过 Markdown 的大名,然而不是很了解具体应该怎么去运用 Markdown 来美化我们的文档排版界面,如果是对于计算机、编程、电子信息等与计算机技术相关的专业人士那还好说,学习与语法相关的大学会非常迅速,因为之前就已经经过了许多语法的学习、写入、应用等一些列过程,积累了相当丰富的经验。对于非计算机相关专业的学习者,尤其是对于初学者,从学习到应用的过程大多有点漫长而枯燥,因此在这样的背景下,这篇文章便以面向初学者为目的来展开对于 Markdown 语法的简单介绍,以及根据学习的规律,慢慢得由浅入深潜移默化地带领读者去认识 Markdown 语法中的一些标识命令并展示相应的标识命令所带来的文档编辑效果。

文章目录

  • **Markdown 全攻略**
    • **初步认识 Markdown**
    • **Markdown 的语法规则**
      • **Markdown 编辑器**
      • **基于 Markdown 语法的操作**
        • 1. 基于 Markdown 语法的基础操作
          • **粗体**
        • **1. 基于 Markdown 语法的基础操作**(*`重新编辑排版的效果`*)
          • **屏蔽**
          • **段落与断行**
          • ***斜体***
          • **`高亮`**
          • **标题**
          • **分割线**
          • **缩进**
          • **列表 / 清单**
          • **块引用**
          • **任务清单(计划表)**
          • **代码块**
          • **数学块**
          • **表格**
          • **脚注**
          • **目录**
        • **2. 基于 Markdown 语法的进阶操作**
          • **链接**
            • **普通链接**
            • **内部链接**
            • **参考链接**
            • **链接的高级渲染技巧**
          • **URLs**
          • **图片**
          • **强调** & **强化**
          • **代码**
          • **~~删除线~~**
          • **下划线**
          • **表情符号** :smile::cry::candy: :icecream:
          • **下标**
          • **上标**
        • **3. 基于 Markdown 语法的高级技巧**
          • **HTML**
          • **内容嵌入**
          • **视频文件**
          • **音频文件**
        • **4. 其他实用功能**
          • **内联数学**
          • **列表嵌套**
          • **二级块引用**
          • **组合嵌套**
          • **mermaid**
          • **字符的转义**
    • **Markdown 的应用**
    • **结语**

初步认识 Markdown

以目的为导向来展开对 Markdown 的学习。

学习 Markdown,那么首先我们得认识 Markdown,这一步回答的问题是“什么是 Markdown”,即类似于对 Markdown 的严格定义。以目的为导向,我们的最终目的是要学会怎么使用 Markdown,那么带着这个目标来看待“Markdown 的攻略”问题,我们则将关于 Markdown 的攻略这类多方向问题转变成了一个单方向问题,我们抓住问题主要矛盾,那么我们思考解决问题之道初将少去很多干扰。

对于 Markdown ,我们也经常听说它简单、高效等等类似的描述,降低使用鼠标的频率,但同时这种“简单高效”对于初学者来说,也并非如那些编辑大神说的那么“轻巧”,至少初学者的感觉是这样的。因为 Markdown 的使用习惯与我们平时在电脑上的使用习惯不一样,正因如此,对于新手也必然存在一段“磨合期”,这篇 Markdown 攻略干货的分享正是在这种背景下诞生的,同时为了给读者带来更好的学习体验,我们这里不去直接讨论 Markdown 具体有哪些很实用的功能,也不去直接展示如何应用那些 Markdown 高级技巧去编辑排版我们的目标文档,而是通过一系列我们认识 Markdown 的过程中会碰到的问题,从最初接触到 Markdown,到慢慢习惯 Markdown 的功能,最后再到爱上 Markdown 的这一个主线过程来逐渐尝试与解锁 Markdown 的功能,即“边用边学”。毕竟学习一个具体事物都是从先认识这个事物慢慢开始的,然后慢慢掌握其基本功能、实用的”进阶“功能以及相关的高级技巧。我们这里在初步认识 Markdown 同时来先来思考这样的几个简单问题:

  • 1 Markdown 用于哪些地方?
  • Markdown 格式适用于 Github / CSDN / 微信公众号 / 知乎 / 简书 等写作编辑的创作环境,
  • 2 Markdown 有哪些用途?
  • 如果熟悉 Markdown 的基本语法,并运用这些基本语法,可以大大提升写作效率,并且可以快速美化我们的排版,适合于经常码字的博客(blogger)。
  • 3 为什么选用 Markdown?
  • 以知乎为例子,知乎创作的编辑界面,尽管拥有自己的编辑器,但是其自身的排版非常不灵活,直接在知乎编辑截屏进行手动排版的话,会大大降低创作的效率,而且这一部分是很花时间的,写过毕业论文或者发表过学术论文的人对这一部分会深有体会,很多时候,可能按要求对论文的编辑与排版所耗费的时间与完成论文主体部分的时间相差无几。这个特点对于知乎创作,甚至是其他创作类型,都是极其不利的。

通过这些类似的问题,我们便可能基本总结出 Markdown 的基本用途,即通过 Markdown 的语法对创作中的内容进行实时编辑与排版,并且还能实时美化我们创作内容,加快创作的效率等这些类似的功用。

我们这份攻略的整个解说流程也是如此,由浅到深慢慢深入对 Markdown 的应用。而对于初学者或者基础薄弱的学习者,最开始接触 Markdown 的时候,大多数也并不是直接关注 Markdown 有哪些厉害的“头衔”,而更多的是关注于“怎么使用就好了”这个问题,所以对于学习某个具体事物的初学者,在学习之初,也并不愿意去听别人怎么评价某个事物,而是会更多的关于他们想要关注的方面,也可能会想“你就告诉我怎么用就好了”。这篇攻略的初衷也是如此,面对初学者的这种心理与学习规律,我们慢慢展开对 Markdown 的学习,同时也在这里跟 Markdown 初学者作这样的约定:这一系列的攻略文章,对于 Markdown 语法的运用跟我们的学习过程绝大部分情况是同步的,即我们基本不会在介绍某个 Markdown 语法之前就去运用它的某些语法功能,只是到目前为止,这份攻略有三处地方违背了这一约定,在最前面的“Markdown 全攻略”这几个字运用了 Markdown 语法中的(一级)标题效果及“初步认识 Markdown”这几个字运用了(二级)标题效果;紧跟其后在其下方应用了分割线的效果;前面那3个简单问题的地方,运用了。。。的效果,这几处我们这里还无法避免,同时“换行”操作不算超纲操作,后面会解释换行与断行的排版区别,而且换行操作非常简单,直接在文本内容后面键入"“回车键”"(Enter/Return),这种操作对于学习电脑的人来说,初次接触电脑时基本就已经掌握了这种操作。但是在写这篇攻略之初,基于学习的科学规律,笔者会尽可能去避免运用还未加以解释如何去运用的 Markdown 语法的编辑操作及其在文档中所呈现的排版效果,同时这么做的好处是可以 Markdown 初学者在学习的过程中既能慢慢掌握 Markdown 语法,又能慢慢地实时感受到这些 Markdown 语法所带来的编辑与排版效果。


Markdown 的语法规则

Markdown 语法是由一套简单的、轻量级的标记语言组成。用户可以使用诸如“ *和 # ”等简单的标记符号以最小的输入代价生成极富表现力的文档。标记语言是指一种将文本内容以及与文本内容相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。例如我们平时用Word,想要加粗就需要点击相应的按钮,但是标记语言则是在文字前/后加上特定的符号即可办到。

Markdown 的基本语法则比较简单了,毕竟 Markdown 被开发的终极目的之一就是为了快速写作,解决创作排版问题。对于文本编辑与排版,Markdown 的常用命令就那几种,经常写一写,慢慢地就习惯了,慢慢地就会爱上 Markdown。基于这篇攻略的主旨是以目的为导向读者去逐步了解 Markdown 应用,也即类似于学习过程中的“边用边学”,那么在介绍 Markdown 功能方面,我们就边用边介绍,不会在文本的编辑与排版之初讲基本命令(功能)时去应用后面一些还未介绍到的一些 Markdown 的命令(功能),甚至更不会直接讲关于排版的一些高级命令技巧(功能),比方渲染效果等,而是最大限度遵循读者认识事物的规律,由易到难、由潜入深慢慢地带读者去解锁 Markdown 的功能,同时也希望这种方式能够带给读者更好的学习体验。

Markdown 编辑器

提到 Markdown 基本语法的使用,必然会存在 Markdown 语法的使用场所,即编辑环境,这是回答 Markdown 在哪里用的问题。基于 Markdown 语法的编辑器很多,功能也不完全一致,有的 Markdown 编辑器是方便用户进行基本的写作,有的是方便用户写代码,有的甚至只是博客平台配套的编辑器。 Markdown 编辑器的工作环境既可以是在应用程序中,也可以直接是在网页中进行在线编辑,在网页中打开的 Markdown 编辑器可以称为 Markdown 在线编辑器,比如 Cmd Markdown 在线编辑器、Mahua Markdown 在线编辑器等(在线编辑器有很多,可以在浏览器搜索框直接搜索 Markdown 在线编辑器),常见的 Markdown 编辑器有:

  • Markdown 在线编辑器

    1. dillinger 界面美观而功能强大,支持 .md、.html及. pdf 文件导出。支持dropbox、 onedrive、google drive和github.出自国外码农之手,跨洋互联,运行可能不够快速稳定。
    2. 坚果云 Markdown 在线编辑器的特点是会将 Markdown 语法的一些基本、常用的语法说明及编辑效果显示在预览区右侧,这一点对于初期学习应用 Markdown 编辑器的初学者来说就显得非常友好了,使用这一款编辑器在初期不用事先去记忆 Markdown 语法中那种类繁多的语法说明,而是直接上手使用。且作为一款 Markdown 在线的编辑器,不需要下载安装就能在浏览器上使用,同时又会自动保存你的 Markdown 文件到云端,防止最后“竹篮打水一场空”。如若辛苦在在线编辑器的写入区通过 Markdown 语法内容已经进行了排版,而在线编辑器有的为了保持轻量型的特点,并没有文件保存的方案,一旦某些原因网页被刷新了一下,那么我们的辛苦就全部没有了,编辑与排版就有需要从头开始了。
    3. Mahua Markdown 在线编辑器。
    4. Cmd Markdown 在线编辑器由作业部落出品,也是一款不错的阅读工具和博客平台兼顾的产品。全平台都有可用产品并且还提供 web 在线版本。
    5. 简书 一个很不错的博客平台,每几秒钟便会自动存入一个备份。可以直接从本地拖入照片生成链接,一直在不断优化。作为一个博客平台,需要注册账号后方能进行写作。
    6. 小书匠编辑器 全平台覆盖并且有web版
  • 浏览器插件

    1. Chrome 浏览器:Markdown here、Marxico
    2. Firefox 浏览器:
  • Windows 平台

    1. Sublime Text 2 UI 设计简约大方,功能的定位比较专业。付费平台,新用户可以免费试用,但是专业版的价格有点贵70美元
    2. MarkdownPad 一款全功能的编辑器,被很多人称赞为 Windows 平台最好用的markdown编辑器
    3. Smark 开源软件
    4. MdCharm 功能在一系列编辑器中比较完备;编辑的界面一般,隐藏菜单栏后也算简约。有Windows 和Linux版本。目前已开源,不再更新。
    5. Miu 一款模仿 OS X 平台上面 Mou 的、工作在 Windows 平台 Markdown 编辑器,界面美观,功能不够成熟。目前官网无法打开,可以在小众软件通过百度云下载。可以点击这个链接跳转到 Miu 的下载界面
  • OS X 平台

    1. Mou
    2. Typora 目前也有 Windows 和 Linux 版本。
    3. MacDown 开源免费
    4. Byword 支持OS X, iOS 售价78元
    5. iA Writer 支持OS X , iOS 及Android,未优化中文显示
    6. Ulysses
    7. Typed

(个人观点)常用的 Markdown 编辑器是 MarkdownPad2 Pro、Typora和Atom这三款 Markdown 编辑器

至少现在我推荐 Typora 编辑器,基于其丰富的文件导入/导出功能,Atom 编辑器也不错,但是导入/导出需要安装插件,不过也正得益于插件, Atom 编辑器的功能强大而齐全,大家也可以试试。同时一方面在这里需要特别强调的是“每个人的看法可能不一样”(本来这里是准备用字体加粗的效果,会是排版显得更加美观,后来想着粗体的效果现在还没有介绍,故没有运用粗体效果),每个人的使用习惯也不一样,自然而然这使用感觉就不一样了,所以不用拘泥于我们推荐什么 Markdown 编辑器,多尝试一些 Markdown 编辑器的编辑环境,找打那个让你使用得最得心应手、心情舒畅得 Markdown 编辑器就好了。并且前面也提到过,基于 Markdown 语法的编辑器种类繁多,而且功能也不完全一致,都有一定的”面向群体“,因为基于不同平台、工程师的设计理念、、面向的群体、软件定位等诸多元素的差异,比如在功能上能否具有导出多种格式,导出效果如何,是否支持导入,界面是否优雅,是否允许插件的扩展功能,总体上功能是否够多等等,这里无法进行很细致的说明,每位读者可以选择有兴趣的几款进行试用。

而转而从侧面来看,Markdown 语法则正是在这种类繁多的编辑器中去满足不同用户体验而使得其功能逐渐完善。

基于 Markdown 语法的操作

基于 Markdown 语法的操作,我们分为3个区分度来具体介绍,分别为基础操作、进阶操作和高级技巧。

1. 基于 Markdown 语法的基础操作

粗体

文字的粗体功能(效果)的实现是在需要排版成粗体效果的一段文字内容首尾两端都加上符号(**),因 Markdown 语法是一种标记语言则可以将在 Markdown 语法中实现特定编辑功能的符号称为标记符号,那么在一组粗体标记符号之间的文本内容则会呈现文字加粗的效果,也即粗体,那么一组完整的粗体符号包括4个星号标点符号。例如,现在学习了 Markdown 语法中粗体命令,那么我们就先来尝试对前面的“1. 基于 Markdown 语法的基础操作”这部分内容加粗:

1. 基于 Markdown 语法的基础操作重新编辑排版的效果

至于前面的序号问题,我们得学习后面关于 Markdown 语法中关于清单 / 列表的知识以后再能了解。

屏蔽

Markdown 语法是一种标记语法,但是假如我们标记时,碰到那种需要在内容两端添加符号达到某种特定的编辑或者排版渲染效果,而某个时候在同一句文本内容之中,我们需要运用这种标记符号对内容中的两处或两处以上的内容进行编辑处理,此时基于 Markdown 语法的编辑器平台,应该去识别哪个部分内容才合适呢?因为相邻的两处标记也位于标记符号的中间,那么此时 Markdown 编辑器应该如何识别标记来做出回应呢?例如对于“前面才讲到的加粗效果”这一小短语,我如
果同时对“前面”与“加粗”两个部分都进行标记,都要达到加粗的效果,Markdown 编辑器应该如何识别这种标记呢,我们又该如何进行输入呢?此时则需要运用到屏蔽功能。

同时要实现这种标记两处的效果,还可以通过其他方式来实现——标点符号。

段落与断行

到目前为止,这篇攻略分享的编辑与排版工作中还未区分段落与断行的区别,这一点也是基于前面提到的以目的为导向来逐步深入,使读者朋友慢慢去了解如何应用基于 Markdown 语法的 Markdown 编辑器。段落是指根据文章或事情的内容、阶段划分的相对独立的部分。而在 Markdown 语法的源代码中,段落的间隔是用两条及多条空白线来分隔开的,而在不同的 Markdown 编辑器中,实现段落与段落之间的分隔,也可能有不同的解决办法。例如在 Typora 编辑器中,实现相邻段落的分开,就只需要按一下回车键(Enter/Return)就能够实现,而这相当于只是一条空白线,此时这一条空白线的效果则是换行。而断行,则与换行有差异,在 Markdown 语法中是通过组合键“Shift + 回车”来实现。比如参照目前的这一段关于段落与断行的介绍,段落与断行这四个字与下面的“到目前为止…”之间则是换行,在 Markdown 编辑器中识别的是两个不同的段落,而如果我们应用“断行”对这两部分进行重新编辑的话,那么则应该在输入段落与断行后,直接在加粗标记符号(**)后面通过组合键“Shift + 回车”来实现断行效果,其编辑效果如下:

段落与断行
到目前为止,这篇攻略分享的编辑与排版工作中还未区分段落与断行的区别…”

但是大多数其他的 Markdown 解析器都会忽略单行分隔符,因此为了让其他 Markdown 解析器能够识别我们的行分隔符,即能够识别我们的分行标识,我们可以在行的末尾留下 2 个空格再键入组合键“Shift + 回车”,这样的话在行的末尾将出现一个向下的箭头"↓\downarrow​",或者插入<br/>

斜体

由于前面我们已经完整介绍了段落(换行)与断行的区别,那么从这里开始,往后的编辑与排版内容这篇攻略文章也会正是注意段落(换行)与断行的区别。同时,由于斜体与关于斜体的介绍内容并不是两个相对独立的部分,所以在编辑排版的处理上,我们应用前面介绍到的断行效果(通过组合键“Shift + 回车”来实现)。
斜体的实现与粗体的实现非常相似,是通过在目标内容(要排版成斜体的内容)首尾都添加标记符号(*)来实现。例如:
对一段文字中的

【小试身手】那么粗体+斜体的“和效果”又要怎么去实现呢?
【回答】:只需在要被编辑的目标内容首尾两端都加上标记符号(***)即可实现这种排版效果。

高亮

文字高亮效果实现是通过在内容首尾两端都加上反引号(`)来实现。需要将输入法切换到英文输入法后,通过按下电脑键盘中 Tab 键上面的那个按键,而两个反引号之间的内容则会在 Markdown 编辑器的排版预览中呈现文字高亮的效果。例如:

【小试身手】那么在上面一个段落中,文字高亮与文字加粗的**和效果怎么编辑呢?是在一组高亮标记符号内键入粗体的标记符号还是在一组粗体的标记符号内键入一组高亮的标记符号呢?
【回答】:是在一组
粗体符号内键入高亮符号,才能够实现文字高亮与文字加粗和效果,反之是行不通的,如果是在一组高亮符号内键入粗体符号,则高亮的效果会将粗体**符号中的星号这种标点符号当作文本内容也以高亮效果展示,例如会出现这样的效果**和效果**

标题

接着介绍起初我们就已经简单提到过的关于标题的排版效果。标题的排版效果的实现是在标题的内容前直接键入标记符号(#)号,同时井号(#)统领的标题应当出现一行内容的最前面,而符号井号(#)是位于标题文字内容的最开端。
Markdown 语法中分别有16级标题,分别是在标题的文字内容前加入16个连续井号(#~######)。例如:
一级标题的写法为:# 这是一级标题
六级标题的写法为:###### 这是六级标题

【注意】值得注意的是,在使用标题效果时,标记符号(#)与标题的文本内容之间有一个空格,否则将无法实现标题的编辑效果。

分割线

分割线效果效果的实现是在新的一行最前端键入标记符号(***)然后直接按回车键(Enter/Return)即可实现。或者我们提前准备两个空白行,在其中一个空白行键入分割线效果的标记符号,然后鼠标的光标换到其他行时,就会在这个空白行自动生成分割线的编辑效果。

【小试身手】思考并在 Markdown 编辑器中将光标 |(写入光标)移到最一个空白行,且在这一空白行键入分割线效果的标记符号(***),会自动生成分割线吗?
【回答】:在 Markdown 编辑器里面,在最后一个空白行键入分割线的标记符号,生成分割线的同时,会自动在其下一行生成一个空白行。

同时实现分割线的的编辑效果,除了在行首顶格键入***并按空格键的组合之外,还可以在行首顶格键入---并按空格键的组合来自动生成分割线。

缩进

缩进这一项则是可用直接通过 Markdown 编辑器中的设置来改变默认的初始值。

列表 / 清单

列表 / 清单 在 Markdown 语法中将其分为无序号列表 / 清单和有序号列表 / 清单,列表 / 清单效果的实现便分为这两种形式。无序号列表 / 清单的实现是通过写入* 清单名称 1,同时符号*也可以换成加减符号+-。例如在 Markdown 编辑器中通过命令* 清单名称 1来生成一个无序号列表 / 清单:

  • 清单名称 1
  • 清单名称 2
  • 清单名称 3

实际上,对于初学者来说,第一次听说这些关于无序号列表 / 清单的命令时,虽然翻看上面这些解释偶尔可能会觉得在理解上略显吃力,但是这些标识语法在实际操作时则非常简单。在 Markdown 编辑器中若想要写出这种无序号列表 / 清单的效果,只需要在一个空白行(不论是通过换行命令Enter/Return还是通过断行命令Shift+Enter来生成的空白行,都行)的最前端键入符号*,然后接下来直接按下空格键即可,无序号列表 / 清单就自动生成了,至于上面提到的、所谓的清单名称 1清单名称 2等,纯粹就是我们想要在这里写入的内容罢了,根据需要写什么都行。但是值得注意的是无序号列表 / 清单的命令符号可以看成是*+空格键,因此想要编辑成无序号列表 / 清单的排版效果,一定要注意符号*后面一定得有空格键的键入。学到这里,有没有感觉到 Markdown 语法的简洁之美?同时,如若是想要排版成有序号列表 / 清单的效果,在 Markdown 语法中的命令也是非常简单。参照无序号列表 / 清单的命令,生成有序号列表 / 清单的命令只需要用阿拉伯数字(1、2、3...)+.并键入空格键即可,而阿拉伯数字(1、2、3…)即是清单名称的序号,故称其为有序号样式的列表 / 清单。例如:

  1. 清单名称 1
  2. 清单名称 2
  3. 清单名称 3

同时值得注意的是,到目前我们学习的这些 Markdown 语法操作及其效果还无法生成罗马数字的有序号列表 / 清单,以及如果需要尝试列表嵌套的效果,则还需要进步学习 Markdown 语法。尽管如果在这里直接举例子说明列表嵌套效果在 Markdown 语法中的命令,也比较简单,但是还是一个一个效果功能地来学习,对于初学者来说则会更加轻松,在实际操作上也将更加便于操作。


学完列表/清单的 Markdown 语法指令及编辑效果后,相当于是已经基本学完了 Markdown 语法基本操作中的前半部份作为 Markdown 语法操作中的必备知识,有的学习者已经可以找些在线编辑器去尝试执行这些命令,熟悉熟悉 Markdown 语法的一些操作以及在编辑器的实时预览区观察这些操作所带来的编辑效果,熟练上面这些基础操作以后,再接着深入学习后面的一部分 Markdown 语法基础操作内容


块引用

块引用的英语表示为Blockquotes,有的时候是将Blockquotes翻译为区块、引用块、引用文字及文字引用,但它们其实都是指Blockquotes,我们只需要在 Markdown 语法中了解块引用的命令及效果就好了。在 Markdown 语法规则中块引用的作用是:**在这个引用标签内部的元素显示的时候都会向后缩进一个单位长度(通常是4个空格的长度,有时候源代码的定义不同的话也会出现别的可能),并且在其内部的元素的周围增加外边距。**在 Markdown 语法规则中块引用表现出来的效果是向右缩进4个英文字符的位置并在其周围增加外边距,其命令是键入标记符号>+空格键,效果如下:

这一部分是块引用的内部元素
可以正常断行

也可以正常换行,而且会在块引用内部元素的周围增加外边距。

任务清单(计划表)

任务清单的英语表达方式为Task list,有的时候会将Task list翻译成任务(列)表、任务计划表。任务清单(任务计划表)的编辑效果是通过键入-+空格键+[ ]的组合形式来实现。经过前面对列表 / 清单效果样式的学习,我们肯定能够发现,*或者+或者-空格键的组合形式会立即在某一空白行的开端生成无序号列表 / 清单,那么对于任务计划表的排版效果我们又应当如何来实现呢?
实际上任务计划表的样式说简单点就是在我们整理的、最近的、自己要做的一堆任务项目,然后通过任务计划表的效果可以在每一个任务项目的前面加上一个小方形边框位于行首,然后当某项任务完成后,我们可以在这个小方形边框做记号以提醒自己是否已经完成了某项任务。

- [ ]的组合形式,生成的任务计划表的基本样式为

  • 任务项目 1
  • 任务项目 2

尽管任务计划表的基本样式就这两种,但是其在现实生活中的实用性是很大的,因为我们现实生活中的人具有主观能动性,这两种基本样式的内涵我们是可以根据自己的使用习惯及当下的要求、感情色彩等因素进行能动地再创造的,

代码块

在 Markdown 语法中,代码块这种编辑效果有时候生动地被说成是围栏,在结构形式上确实很相近。对于 Markdown 语法地新手学习者而言,特别是那种完全没有接触过也没有经历过任何代码形式的编程体验的学习者而言,对于 Markdown 编辑器中的语法及命令,学到上面的**任务计划表的编辑效果这里,应该是基本能够接受的,但是到了代码块,很多人就会望而生畏,面对这种情况,笔者建议:第一至少先坚持学完任务计划表的编辑命令,并且先试着在浏览器中的在线 Markdown 编辑器的网页中,先慢慢尝试在写入区尝试键入这些编辑命令,并且在实时预览区观察一下这些编辑命令所带来的排版效果。第二第一部分建议的基础上,熟记前面讲到的编辑命令,并经常在 Markdown 在线编辑器中敲击一下,掌握并运用这些最基本的 Markdown 语法的写入、编辑和排版功能。第三如果想要更深入地掌握一些其他高级用法, 则必须先了解基于 Markdown 语法的基础操作**中的另一部分基础操作。那么我们接着就从代码块开始。

代码块,不同的 Markdown 编辑器所支持的代码风格不尽相同,但同时又各有千秋,所以我们这里不作关于谁更优的评价。使用者不同,各自有各自的使用感受,选择相应的、适合自己习惯的、顺手的 Markdown 编辑器即可。

使用代码块也不难,通过键入``\和回车键Enter并且在来实现。Markdown 编辑器将通过语法高亮来显示,例如

​```
function test(){
console.log("notice the blank line befor this function?");
}
​```syntax highlighting:
​```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
​```
数学块

数学块(Math Block)则是说我们可以使用 MathJax 渲染数学表达式,简单说就是通过 MtahJax 来使公式的效果被编辑成排版系统 LaTex 中的显示效果,而在专业术语上我们称这个过程为渲染。说白了,Markdown 语法中的数学块功能其实就是相当于我们在 Windows 平台的 Word 文档中使用 MathType 等插件来写入美观的公式一样。

既然前面的代码块和这里的数学块都提到了块的概念,对于想要更深入学习 Markdown 语法的编辑命令的初学者来说,我们有必要先里了解什么是块元素
块元素又名块级元素(Block Elements),和其对应的是内联元素(inline elements),都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。

块元素具有这样得特点:

1. 总是在新行上开始;
2. 高度,行高以及外边距和内边距都可控制;
3. 宽度缺省是它的容器的100%,除非自定义设定一个宽度;
4. 它可以容纳内联元素和其他块元素.

通过上面得第一个特点,结合我们前面经常提到的首行开端顶格 等这些字眼,应该能够粗略猜到我们前面介绍到的所有编辑命令都是 Markdown 语法中的块元素,而我们这里在1. 基于 Markdown 语法的基础操作会讲到的编辑命令,全部属于 Markdown 语法中的块元素。当然,对于初学者则在这里不用去了解得这么详细,只需要了解其编辑命令及这种编辑命令下所带来的编辑排版效果就足够了,但是,对于有更深学习追求的人来说,这与那都应当了解。

回来我们接着继续将数学块的应用,Markdown 语法中的数学块功能则是在编辑排版的过程中写公式用的,对于应用它的人来说,那就是只需要了解它是做什么的,并且学习怎么用就好了。

想要添加数学公式,则需要键入标识符号$$+回车键Enter,这一步操作将会在 Markdown 编辑器中自动且快速地触发一个接受 Tex/LaTex 源的输入字段。在 Markdown 源文件中,数学块是由一对$$标识包装的 LaTeX 表达式。例如
V1×V2=∣ijk∂X∂u∂Y∂u0∂X∂v∂Y∂v0∣..................................................(1)\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}..................................................(1) V1×V2=iuXvXjuYvYk00..................................................(1)
上面这个与叉积有关的公式在在 Markdown 源文件中为

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}..................................................(1)
$$

【思考】值得思考的是,为什么在前面键入上面的这一段代码后会直接生成前面的公式(1)时,而后面我们又能在上面键入公式的代码而不自动生成排版好的公式?

KaTeX parse error: Undefined control sequence: \ at position 37: …\mathbf{V}_2 \̲ ̲
【回答】因为我们展示代码时应用了**代码块**,然后选择 markdown 语言,再键入公式的代码,就可以只展示代码,同时我们现在还未介绍表格嵌套以及其他一些更高级渲染技巧,因此前面公式与公式后面的序号(1)之间用...连接。

表格

说曹操曹操到,那我们就一气呵成,介绍 Markdown 语法规则中先表格的排版效果及编辑命令。
在 Markdown 编辑器中生成表格的 Markdown 编辑命令为:

  1. (行首顶格)写入| 第一标题(即表头) | 第二标题(即表头) |然后键入回车键Enter。(生成一个两列的表格)
  2. 创建表后,将焦点放在该表上将打开该表的工具栏,您可以在其中调整、对齐或删除该表。也可以使用关联菜单复制和添加/删除单个列/行。

在 Markdown 语法的编辑命令中,表格的完整语法如下所述:

|第一标题(即表头)|第二标题(即表头)|`并键入回车键 Enter`

键入回车键Enter后,在 Markdown 编辑器中会随即自动生成一个 2 行 2 列的表格,其中 2 行是编辑器默认的,而列数则是因为我们只写入了两列。完成上述的语法编辑命令以后,会生成一个这样的表格:

第一标题 (即表头) 第二标题 (即表头)

其中表格内每个单元格的最初排版都是默认的左对齐的(除非自己改一些定义,或者读者使用的 Markdown 编辑器中表格这一块儿有自己独特的定义),同时在编辑 |第一标题(表头)| 这些单元格文本内容时,其中的文本内容第一标题与左右标识符号|之间是否有空格键都没有关系,生成的表格是完全一样的。创建表后,将写入光标移到表格中或者通过鼠标放在该表上,表格的第一行的上面将出现编辑该表的工具栏,此时就可以在其中调整、对齐或删除该表。也可以使用关联菜单复制和添加/删除单个列/行。

同理,我们如果想要创建一个 3 列以上的表格,其语法为:

|第一标题|第二标题|第三标题|`并随后键入回车键 Enter`

键入回车键 Enter后,会随机自动生成如下的一个 2 行 3 列的表格,更改表格的格式、文字对齐方式或者添加表格的行或者列甚至是删除表格等基本操作与前面完全一样。

第一标题 第二标题 第三标题

创建完表格之后,还可以在表格中加入 Markdown 的一些内联标记,例如如链接、粗体、斜体或删除线。

这些便是关于表格的基本操作,接着我们再来介绍一些 Markdown 语法作为一种标记语言,在表格操作这一块儿还有没有一些方便又实用的标记呢?答案是肯定的。在写入表格的标识信息之后,在键入回车键Enter生成表格之前,通过在标题行中的文本内容添加冒号(),可以将该列中的文本定义为左对齐、右对齐或居中对齐,其中如果冒号(:)在文本内容左(右)边,生成表格中该列中的所有单元格则都是左(右)对其,如果两边都有冒号(:)则意味着标识的对齐方式是居中对齐。

脚注

脚注是指列在一页末了的附注。
脚注的编辑效果可以通过写入如下的编辑命令:

`首先我们尝试用英语写一句话,然后附上脚注信息
Firstly,we creat a footnote based on it's define by typing [^footnote].*随后立即键入回车键Enter*
`接着在下一行(可以放于文末或者自定义位置)以英文格式写入
[^footnote]: We write the *`descriptions`* of the **footnote** here.

编辑命令在排版中的效果展示:
Firstly,we creat a footnote based on it’s define by typing 1

脚注的编辑命令及功能介绍到这里,有的 Markdown 学习者就会问了:脚注可以是中文吗?。回答是肯定的。例如:

  1. 中文脚注可以吗?2
  1. 脚注可以是中文吗?3
目录

脚注的排版效果讲完后,接着就讲*目录*的 Markdown 编辑命令及排版效果。
在 Markdown 编辑器中,目录排版样式的实现是通过在英文输入模式下写入[toc]并随后键入回车键Enter。这一步会创建一个目录部分,TOC从文档中提取所有标题,并且当我们将其添加到文档中时,其内容会自动更新。这一点就非常友好和人性化了。其 Markdown 语法命令为:

[toc]`并随后键入回车键 Enter`

例如在这里执行上面代码块中关于目录的命令,TOC 将自动提取这篇文档的所有标题并以目录的编辑排版效果显示:

文章目录

  • **Markdown 全攻略**
    • **初步认识 Markdown**
    • **Markdown 的语法规则**
      • **Markdown 编辑器**
      • **基于 Markdown 语法的操作**
        • 1. 基于 Markdown 语法的基础操作
          • **粗体**
        • **1. 基于 Markdown 语法的基础操作**(*`重新编辑排版的效果`*)
          • **屏蔽**
          • **段落与断行**
          • ***斜体***
          • **`高亮`**
          • **标题**
          • **分割线**
          • **缩进**
          • **列表 / 清单**
          • **块引用**
          • **任务清单(计划表)**
          • **代码块**
          • **数学块**
          • **表格**
          • **脚注**
          • **目录**
        • **2. 基于 Markdown 语法的进阶操作**
          • **链接**
            • **普通链接**
            • **内部链接**
            • **参考链接**
            • **链接的高级渲染技巧**
          • **URLs**
          • **图片**
          • **强调** & **强化**
          • **代码**
          • **~~删除线~~**
          • **下划线**
          • **表情符号** :smile::cry::candy: :icecream:
          • **下标**
          • **上标**
        • **3. 基于 Markdown 语法的高级技巧**
          • **HTML**
          • **内容嵌入**
          • **视频文件**
          • **音频文件**
        • **4. 其他实用功能**
          • **内联数学**
          • **列表嵌套**
          • **二级块引用**
          • **组合嵌套**
          • **mermaid**
          • **字符的转义**
    • **Markdown 的应用**
    • **结语**

目录部分创建以后,对于 目录中的每一个标题,点击每一个标题后,会自动跳转到文档中这一标题的内容上,我们对于 基于 Markdown 语法的操作其中的第 1 部分便介绍完了,这篇文档就将 目录的排版效果放这里好了,充当一个承上启下的功能。学到这里的读者一来可以回顾前面所学,二来可以实时感受到 Markdown 语法编辑命令带来的编辑排版效果,三来可以通过这儿的目录框初步了解这篇文章在后面的内容中大体上还会介绍哪些功能。 目录排版效果,在这篇文档中没有将 目录的排版效果呈现于一级标题附近,即没有将 目录的排版效果呈现于文档开端,也是出于让读者边看这篇文章便实时感受 Markdown 语法对于编辑排版的作用。


2. 基于 Markdown 语法的进阶操作

第 1 部分介绍的 Markdwon 语法基础命令,在 Markdown 语法中属于块元素,与块元素对应的是内联元素。而在 Markdown 语法的进阶操作中我们学习的是跨度元素的编辑命令和排版效果,跨度元素在 html 中加做 Span elements。当然和前面的主旨一样,对于非编程人员不用去更深入地了解得多么多么详细,在 Markdown 编辑器中初学者最关注的并且只需要了解的是:该怎么用,什么排版效果 ?

跨度元素将在键入后立即进行分析和呈现。将光标移到这些跨度元素的中间将把这些元素展开为 markdown source。下面是每个跨度元素的语法说明。

链接

Markdown 支持的链接类型有两种:内联链接和参考链接。在这两种样式中,链接文本都由方括号[]分隔。要创建内联链接,需要在链接文本的右方括号之后立即使用一组常规括号。在圆括号内,将链接指向的URL以及链接的可选标题(标题属性可加可不加)放在引号中。例如:

这第一个[链接 1](https://example.com/"可选标题")是一个有标题属性的内联链接;
这第二个[链接 2](https://example.com/)则没有标题属性。

如果将上面代码块中的编辑命令写入文档,将会呈现如下的效果:
这第一个链接 1是一个有标题属性的内联链接;
这第二个链接 2则没有标题属性。

普通链接

在 Markdown 语法里面,所谓普通链接则是那些直接以链接的形式出现在文档中的链接,直接用一个尖括号将链接的内容包裹就好了,例如我们想要实现普通链接的展示效果,可用通过下面代码块的标识命令:

<https://www.google.com>*在 Markdown 编辑器中写入被高亮符号包裹的内容 *

展示的排版效果如下:
https://www.google.com

内部链接

通过内部链接可以设置标题的 href 属性,这个步骤将创建一个书签,允许我们在单击指定(内部)链接后跳转到该标题所在的位置。Markdown 语法的编辑命令为:

`1.先设置标题的 herf 属性
点击[这个链接](#分割线)会跳转到标题**分割线**所在的位置。
`2.(Windows 平台)指令操作:`Ctrl` + `鼠标点击`前面我们设置的内部链接。

编辑上面的命令,效果为:
Windows 平台长按 Ctrl + 点击这个链接会自动跳转到标题分割线. 。

参考链接

参照样式链接使用第二组方括号,在其中放置所选标签以标识链接:

这是[参考链接][id] 样式的链接。
------
*然后我们在文档中的任何位置通过下面的形式定义这个链接的标签[id].*
------
[id]: http://example.com/  "Optional Title Here"

它们将被渲染为:
这是参考链接 样式的链接。

当然这种渲染结果在不同的 Markdown 编辑器中会有所差异,但是基本语法都是相通的。

链接的高级渲染技巧

链接的高级渲染技巧则是可用通过变量来设置一个链接,而变量的赋值放于文档末尾进行,这类经过高级渲染技巧得到的链接通常称也为隐式链接。隐式链接名称快捷方式允许我们省略链接的名称,在这种情况下,链接文本内容自身可以被用作是名称,只需使用一组空的方括号即可——例如,将单词“Google”链接到 google.com 网站上,我们在编辑时只需写下:

取单词Google作为`网址变量`[Google][]
And then define the link:
`然后在文档结尾处为网址变量赋值`*也就是将网址链接植入到我们需要的位置的某个或是某段文字上*
[Google]: http://google.com/
`~`*完整的不带注释的语法命令如下*
--------------------------------
用单词 Google 来演示链接的高级渲染技巧。[Google][Google]
[Google]:https://www.google.com
--------------------------------

编辑上面代码块内的标识命令,效果为:
用单词 Google 来演示链接的高级渲染技巧。Google

不同的 Markdown 编辑器单击链接后的变化可能会有所差异,在 Typora 编辑器中单击隐式链接将展开链接并且允许对链接进行编辑修改,Ctrl+鼠标点击将在 web 浏览器中打开超链接。

URLs

在 Markdown 语法规则中,是像链接一样插入 URLs,将要插入的 URLs 用尖括号<>包裹起来即可。会发现在 Markdown 语法规则下在文本内容中插入 URLs 的方式就是我们前面介绍的普通链接的形式。

图片

图像的语法与链接类似,但它们需要额外的“!”链接开始前的字符。插入图像的语法如下所示:

![Alt 属性文本](/path/to/img.jpg)*后面圆括号内是图片路径或者地址*
------
![Alt 属性文本](/path/to/img.jpg "Optional title")
------

我们在实际操作中还可以使用拖放从图像文件或web浏览器插入图像,现在有部分 Markdown 编辑器支持图片拖入的这一操作了。我们可以通过单击图像来修改标记源代码。如果使用拖放添加的图像与当前正在编辑的文档位于同一目录或子目录中,则将使用相对路径。

强调 & 强化

Markdown 语法将星号 (*) 和下划线 (_) 作为强调的标识。被*_包裹的文本内容将用一个HTML <em>标识包装。例如:

*斜体*
_单下划线_
**粗体**
`高亮`

在 Markdown 编辑器中编辑这些命令,执行后的文档编辑排版效果为:
斜体
单下划线
粗体
高亮
我们会发现,这些编辑效果正是我们前面所介绍到的基础操作,而这些文本内容正是被符号*或者_包裹形成一块一块,而这些一块一块的整体将用一个HTML <em>标识包装,因此我们称这些元素为块元素。GFM将忽略单词中的下划线,通常用于代码和名称中,当然,在 Markdown 语法的应用这一块儿,我们只需粗略了解一下它是什么,不需要仔细深入地去了解其代码形式。而这里的粗体效果实际上属于与强调等位阶的强化

代码

要指示代码的内联范围,则需要用一对反引号 (`) 将其 包裹 起来。与预先格式化的代码块不同,代码跨度表示正常段落中的代码。例如:

Use the `printf()` function.

会被渲染成:

Use the printf() function.

删除线

GFM 添加了语法来创建删除线文本,这是标准标识中缺少的。
例如在文本中存在想要删除的文本内容,但是我们又渴望能够以添加删除线的形式来提醒读者某种信息,想要实现这种效果,可以通过下面代码块中的形式在 Markdown 编辑器中实现~~删除线~~编辑的效果。

`~~想要删除的文本内容~~`*在 Markdown 编辑器中写入被高亮符号包裹的内容 *
这部分文本内容的则会在效果上被加上~~删除线~~

也即与粗体的编辑命令很是相似。文本内容的粗体效果是在需要加粗的文本内容首尾都加上一对星号**,而删除线的添加是在想要加删除线的文本内容首尾都加上一对波浪号~~,也即~~删除线~~的编辑效果是**删除线**,而且波浪号~~的键入无论是在中文输入法还是英文输入法模式下都行。

下划线

下划线的实现是直接由原始 HTML 支持实现的。如果想要在我们的文档中实现下划线的编辑效果,可以通过下面代码块中的命令来实现:

`<u>想要加下划线的文本内容</u>`*在 Markdown 编辑器中写入被高亮符号包裹的内容 *
这部分文本内容的则会在效果上被加上下划线

也即在 Markdown 编辑器中将想要加下划线的文本内容用符号<u></u>包裹,<u>想要加下划线的文本内容</u>的效果就是想要加下划线的文本内容

表情符号

# Markdown全攻略相关推荐

  1. 前端小白也能快速学会的博客园博客美化全攻略

    前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介 一般而言,需要选一个默认的 ...

  2. VSCode插件开发全攻略

    原文:VSCode插件开发全攻略(一)概览 作者:小茗同学 文章索引 VSCode插件开发全攻略(一)概览 VSCode插件开发全攻略(二)HelloWord VSCode插件开发全攻略(三)pack ...

  3. 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录 前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介 准备工作 js权限申请 如何模仿一个博客园的自定义风格(样式css ...

  4. 阿里Redis最全面试全攻略,读完这个就可以和阿里面试官好好聊聊

    什么是Redis及其重要性? Redis是一个使用ANSI C编写的开源.支持网络.基于内存.可选持久化的高性能键值对数据库. Redis的之父是来自意大利的西西里岛的Salvatore Sanfil ...

  5. 组策略分发软件全攻略

    组策略分发软件全攻略 在规模比较大的网络环境里面,为了对服务器和客户机上的软件.系统补丁进行集中统一的管理,我们可能会用到SUS.WSUS.SMS等.SUS.WSUS管理系统更新,不在本文讨论,请参考 ...

  6. 根据16S预测微生物群落功能最全攻略

    文章原文转载自"宏基因组"公众号,由于微信图片不支持外部网站访问.请点击原文链接跳转公众号阅读. 根据16S预测微生物群落功能最全攻略

  7. chrome 插件开发各种功能demo_Chrome 插件开发全攻略

    Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...

  8. MySQL与优化有关的命令_MySQL优化全攻略-相关数据库命令

    MySQL优化全攻略-相关数据库命令 更新时间:2006年11月25日 00:00:00   作者: 接下来我们要讨论的是数据库性能优化的另一方面,即运用数据库服务器内建的工具辅助性能分析和优化. ▲ ...

  9. Retrofit全攻略——进阶篇

    最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略--基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需 ...

最新文章

  1. (C++)string 的两种输入方式和输出方式
  2. linux运维必备,100道常见面试题
  3. 基于分代的垃圾回收算法
  4. 机器学习两种距离——欧式距离和马氏距离
  5. 学习笔记~~~~LinkedHashMap
  6. 转载:MySQL数据库INSERT、UPDATE、DELETE以及REPLACE语句的用法详解
  7. Hadoop技术在商业智能BI中的应用
  8. 任正非:未来是云时代,华为也要转向云战略
  9. java怎么给框架添加背景图,java里怎么给Container添加背景图片
  10. 监控zabbix 服务并在异常时python 邮件报警
  11. while 中 break 与 continue 的区别
  12. 【BZOJ2164】采矿 树链剖分+线段树维护DP
  13. swift -- 字典
  14. 在Windows Azure平台上部署服务
  15. SAE J1939协议(二)
  16. 机器学习-----车标识别
  17. UBUNTU18.04系统安装打印机
  18. 计算机数学ppt,数学工具 PPT版
  19. 基于flask实现疫情可视化监控系统
  20. java stl分解_stl文件格式解析代码--java版

热门文章

  1. NMAP入门详细教程
  2. Python遥感图像处理应用篇(二十九):遥感图像拉伸处理
  3. “口腔大师”您专属的口腔智能软件
  4. 达内第二个月考java核心题目,(完整版)达内科技JAVA项目经理入职考试--I(不含答案)--新...
  5. vray 2014的警告框
  6. RCE漏洞挖掘经验分享(一)
  7. 信息学奥赛一本通 1209:分数求和 | OpenJudge NOI 1.13 12:分数求和
  8. 通过设置路由器来实现局域网和外网的传奇SF架设
  9. springboot集成logback,报错java.lang.IllegalStateException: Logback configuration error detected:
  10. sql注入php文件包含,phpshe v1.1多处SQL注入文件包含漏洞