十五分钟让你快速学习Markdown语法到精通排版实践

分类：菜鸟笔记作者：WeiyiGeek

[TOC]

0x00 前言简述

Markdown 初识

描述: Markdown 是一种轻量级标记语言于2004年推出，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。

Markdown 的目标是实现「易读易写」，通过在文档中的某部分加入特殊的字符，用来修饰文档中的文本，

博主使用Markdown一段时间以后，才发现Markdown原来那么强大有用、并且能提升工作效率，比如：

  • github、stackoverflow、技术论坛
  • 写博客、写日记、电子书
  • 编辑微信公众号文章
  • 编辑日常技术文章

所以博主将常用的Markdown语法整理处理，方便大家入门学习以及备忘。

本文来源: https://blog.weiyigeek.top :cat:

Markdown 特点

描述: 由 Markdown 语法的目标是：成为一种适用于网络的书写语言，对于我们来说它是兼容 HTML 的。其主要特点 (轻量化、跨平台、易读易写 )

Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分，Markdown 的构想不是要使得 HTML 文档更容易书写。

在我看来， HTML 已经很容易写了，Markdown 的理念是，能让文档更容易读、写和随意改。

HTML 是一种发布的格式，Markdown 是一种书写的格式，就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写，不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。

要制约的只有一些 HTML 区块元素――比如<div>、<table>、 <pre>、 <p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。

Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的<p>标签。

例子如下，在 Markdown 文件里加上一段 HTML 表格, 这是一个普通段落。 

<!-- # HTML -->
<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

<!-- MD -->

|Header|
|:------:|
|Foo|

温馨提示: 在 HTML 区块标签间的 Markdown 格式语法将不会被处理，比如，你在 HTML 区块内使用 Markdown 样式的*强调*会没有效果。HTML 的区段（行内）标签如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是标题里随意使用，依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。

举例说明： 如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法，和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。

特殊字符自动转换: 在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，&符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是(<) &lt;和 (&) &amp;。 & 字符尤其让网络文档编写者受折磨，如果你要打「AT&T」 ，你必须要写成「AT&amp;T」。

而网址中的 & 字符也要转换，比如你要链接到：http://images.google.com/images?num=30&q=larry+bird, 你必须要把网址转换写为：http://images.google.com/images?num=30&amp;q=larry+bird.

才能放到链接标签的 href 属性里,不用说也知道这很容易忽略，这也可能是 HTML 标准检验所检查到的错误中，数量最多的。

Markdown 让你可以自然地书写字符，需要转换的由它来处理好了，如果你使用的 & 字符是 HTML 字符实体的一部分，它会保留原状，否则它会被转换成 &。

所以你如果要在文档中插入一个版权符号 ©，你可以这样写：&copy; Markdown 会保留它不动。而若你写AT&TMarkdown 就会将它转为：AT&amp;T。

类似的状况也会发生在 < 符号上，因为 Markdown 允许 兼容 HTML ，如果你是把 < 符号作为 HTML 标签的定界符使用，那 Markdown 也不会对它做任何转换，但是如果你写：4 < 5 Markdown 将会把它转换为： 4 &lt; 5

不过需要注意的是，code 范围内，不论是行内还是区块， < 和 & 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）

Markdown 客户端

描述: 此节将会根据时间递进（看博主心情）进行更新。

Mac OS X 描述: 我强烈建议你用 Mou 这款免费且十分好用的 Markdown 编辑器，它支持实时预览，既左边是你编辑 Markdown 语言，右边会实时的生成预览效果。不仅如此，Mou 还有一些有趣的偏好设置（Preference），例如主题（Themes）与样式（CSS），它们可以配置出定制化的文本编辑效果与导出效果，如果你对自带的主题与样式不满意还可以到 GitHub 上搜索其它爱好者为 Mou 编写的更多主题样式，导入的方式可以在偏好设置的 Themes 或 CSS 选项中 选择 reload。

IOS 描述: 在端很多 app 早已经支持了 Markdown 录入，例如 Drafts，Day One，iA writer 等，另外 Ulysses for iPad 现在已经上架，可以说是 iOS 平台最好的编辑器了。

Windows 描述: 有两款还算不错，一款叫做 MarkdownPad ，另一款叫做 MarkPad , 不过笔者此处推荐 VSCode + Markdown Preview Enhanced (插件) ，或者使用 Typora (貌似当下收费了)可以找之前不收费的版本, 一般来说使用基础的足够了。

MarkdownPad - http://markdownpad.com/ typora - https://typora.io/ (比较好用不然也不会收费)

Web 端

  • 51CTO / 简书博客 / 博客园 / segmentfault
  • dillinger - 漂亮强大，支持md, html, pdf 文件导出，支持dropbox, onedrive，google drive, github. 来自国外，可能不够稳定。

0x01 语法学习

段落换行

在讲解Markdown语法时我们首先先提一下 段落和换行。

一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行, 即空白行表示另起一个段落。

比方说，若某一行只包含空格和制表符，则该行也会被视为空行）, 普通段落不该用空格或制表符来缩进。

Markdown 允许段落内的强迫换行（插入换行符），这个特性和其他大部分的 text-to-HTML 格式不一样（包括 Movable Type 的「Convert Line Breaks」选项），其它的格式会把每个换行符都转成<br/>标签, 所以在换行时你可以通过<br/>进行换行（针对某些MD客户端可能不会生效）。

换行: 单一段落( <p>) 用一个空白行, 连续两个空格 会变成一个 <br>, 连续2个回车表示是空行.

空格: 1）两个全角空格 ：因为一个全角空格（space）的宽度是整整一个汉字，输入两个全角空格正好是两个汉字的宽度。 全角空格的输入方法为：一般的中文输入法都是按 shift + space，可以切换到全角模式下，输完后再次按 shift + space 切换回正常输入状态。 2）使用特殊占位符 ： 使用特殊占位符，不同占位符所占空白是不一样大的。

&ensp; or &#8194;  表示一个半角的空格
&emsp; or &#8195;  表示一个全角的空格
&emsp;&emsp;       两个全角的空格（用的比较多）
&nbsp; or &#160;   不断行的空白格

<!-- #解析结果 -->
  表示一个半角的空格
  表示一个全角的空格
   两个全角的空格（用的比较多）
  不断行的空白格

目录标题

描述: Markdown 支持两种标题的语法，类 Setext 和类 atx 形式, 并且可以使用[TOC]来显示设置标题的文本并带有跳转功能。

标题-类 Setext: 是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题）,任何数量的 = 和 - 都可以有效果

This is an H1
=============

This is an H2
-------------

标题-类 Atx 形式: 是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，你可以选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，若是觉得这样看起来比较舒适，你就可以在行尾加上 #，而行尾的 # 数量也不用和开头一样（行首的井字符数量决定标题的阶数）, 例如

# 这是 H1 #
## 这是 H2 ##
### 这是 H3 ###
....
###### 这是 H6 ######

目录: 此语法支持根据标题生成文档目录, 注意有得Markdown解析器不区分TOC字母大小写。

[toc]
[TOC]

# Heading
## Sub heading 1
Some nice text
## Sub heading 2
Some even nicer text

文字标记、粗体、斜体

文字标记: 使用==进行文字的标记，对应者HTML的mark。

<!-- 示例2 -->
==我是带背景的标记==
<mark>marked</mark>

==我是带背景的标记==

关键字标记: 行内代码使用反斜杠`表示，默认不会换行，分别对应html的code，pre标签

<!-- 示例1 -->
`我是标记`
Use the `printf()` function.

Use the printf() function.

粗体和斜体：用星号*或者下划线_ (注意无空格)

*这是文字斜体格式*  == _这是文字斜体格式_

**这是文字粗体格式**  ==   __这是文字粗体格式__

***这是文字粗斜体格式***   ==  ___这是文字粗斜体格式___

~~在文字上添加删除线~~

这是文字斜体格式 == 这是文字斜体格式

这是文字粗体格式 == 这是文字粗体格式

这是文字粗斜体格式 == 这是文字粗斜体格式

在文字上添加删除线

文字引用: 如果需要引用某些内容，可以在第一行加上 “>”和一个空格，表示代码引用还可以嵌套, 并且引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

> This is the first level of quoting.
>
>> This is nested blockquote. (嵌套的blockquote)
>
> Back to the first level.

>> 引用
 >> 引用中的引用

<!-- 嵌套其它 Markdown -->

> ## 这是一个标题。
> 
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
> 
> 给出一些例子代码：
> 
> return shell_exec("echo $input | $Markdown_script");

上下划线、分割线、上下标

上、下划线: 原生没有但是可以借助Latex公式插件进行实现。

<!-- # 上划线 -->
$\overline{\text{上划线}}$

<!-- # 下划线 -->
++inserted++
$\underline{\text{下划线}}$
<u>下划线</u>
<ins>inserted</ins>

分隔线: 在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格, 下面每种写法都可以建立分隔线：

---  (常用)

***

- - -

* * *

*****

上、下标: 我们可以在Markdown使用两个~包含字符渲染下标（sub），使用两个^包含字符渲染上标（sup） 。

H~2~0  => H<sub>2</sub>0
29^th^ => 29<sup>th</sup>

渲染结果: H~2~0 / 29^th^

表格

描述: Markdown 支持插入表格。

基础语法 

First Header | Second Header | Third Header
------------ | ------------- | ------------
Content Cell | Content Cell  | Content Cell
Content Cell | Content Cell  | Content Cell

表头位置

居中 | 靠左 | 靠右
:---------:|:----------|---------:
 https://www.weiyigeek.top | https://blog.weiyigeek.top | https://www.weiyigeek.top

渲染结果:

居中

靠左

靠右

https://www.weiyigeek.top

https://blog.weiyigeek.top

https://www.weiyigeek.top

有序、无序、任务列表

描述: Markdown 支持有序列表和无序列表, 使用*,+,-加上一个空格来表示 , 可以支持嵌套

有序列表: 用数字+英文点+空格来表示, 当列表内容很长，不需要手工输入换行符，css控制段落的宽度，会自动的缩放的。

1. 有序项目1
2. 有序项目2 
4. 有序项目3

温馨提示 Markdown会自动的排序从第一个数字顺序，进行递增所以你可以完全不用在意数字的正确性。

无序列表: 用星号*、加号+或是减号-在加空格来作为列表标记：

* 项目1
+ 项目2
- 项目3

例如，在MD中，你可以选取文字后然后从选单中选择增加引用阶层。

* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  Welcome to visit https://weiyigeek.top

* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Welcome to visit https://blog.weiyigeek.top

任务列表: 如果需要标记某些待办事项，可以使用以下语法：

- [ ] 未完成的事项1
- [ ] 未完成的事项2

- [x] 已完成事项1
- [x] 已完成事项2
  • [ ] 未完成的事项2
  • [x] 已完成事项1

链接、锚、缩写、脚注、引用

行内链接: 为文字设置href与alt备注或者简写用尖括号<>包裹url，这样生成的url锚文本就是url本身, 但其标签的属性将会 rel="nofollow"。 

[个人主页链接](https://weiyigeek.top "WeiyiGeek")

自动链接: Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只需用 < > 包起来，Markdown 就会自动把它转成链接。例如：

<https://weiyigeek.top>
<master@weiyigeek.top>

温馨提示: 邮址的自动链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字符转成 16 进位码的 HTML 实体，这样的格式可以糊弄一些不好的邮址收集机器人，例如：master@weiyigeek.top。

锚标记：可以把这个标记的链接内容定义出来；链接内容定义的形式为，下面这三种链接的定义都是相同：

<!-- # 示例1.链接跳转 -->
This is [id] reference-style link.
[id]: http://example.com/  "Optional Title Here"

<!-- # 示例2.数字形式 -->
I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

<!-- # 示例3.链接名称的方式 -->
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

缩写（abbr） : 为网页中的文字创建一个描述介绍, 鼠标放在文字上即可。 

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium 
The HTML specification
is maintained by the W3C.

显示结果: [HTML]: Hyper Text Markup Language [W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C.

脚注: [^footnote] 可以是任意英文字符,脚注的内容可以放在文章的任意位置（一般放最后），如果脚注显示在文章末尾；脚注后方的链接可以直接跳转回到加注的地方。

使用 Markdown[^1] 可以效率的书写文档，直接转换成 HTML[^2], 你可以使用 Typora[^T] 软件。
[^1]:Markdown 是一种纯文本标记语言。
[^2]:HyperText Markup Language 超文本标记语言。
[^T]:Typora 官网 <https://typora.io/>

结果展示:使用 Markdown[^1] 可以效率的书写文档，直接转换成 HTML[^2], 你可以使用 Typora[^T] 软件。 [^1]:Markdown 是一种纯文本标记语言。 [^2]:HyperText Markup Language 超文本标记语言。 [^T]:Typora 官网 https://typora.io/

图片、音乐、视频、地图、内容折叠

图片: 如果需要插入图片需要给出图片的链接，只是在中括号前加叹号.

<!-- 方式1. -->
![alt_text](https://blog.weiyigeek.top/img/avatar.jpg "WeiyiGeek avatar")
![Alt text](/path/to/img.jpg)

<!-- 方式2. -->
[avatar]:https://blog.weiyigeek.top/img/avatar.jpg "WeiyiGeek avatar"
![WeiyiGeek][avatar]

音乐

<!-- 方式1.audio 标签 -->
​<audio id="audio" controls="" preload="none">
  <source id="mp3" src="音频地址">
</audio>

<audio src="audio.mp3" preload="auto" controls loop>
  你的浏览器不支持 audio 标签。
</audio>

<!-- 方式2.iframe -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>

视频 

<!-- 方式1.video 标签, 原生仅支持播放 ogg/mp4/webm 格式 -->
<video src="http://v2v.cc/320x240.ogg" controls loop>
  你的浏览器不支持 <code>video</code> 标签。
</video>

<!-- 方式2.iframe -->
<iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

地图: Markdown 中我们可以利用iframe标签插入各地图功能提供平台的地图Api功能(https://lbsyun.baidu.com/index.php?title=jspopularGL)。

<iframe
  src="https://map.weiyigeek.top/baiduMap.html" 
  width="600" 
  height="300" 
  frameborder="0" 
  scrolling="no">
</iframe>

内容折叠

<details> <summary>Title</summary>
contents ...
</details>

结果展示:

Title

contents …

温馨提示: 内容里面可以嵌套使用 Markdown 语法和 HTML 语法。

嵌入代码

代码段落：则是在每行文字前加4个空格或者1个缩进符[Tab]键表示。

[Tab]键 <p> Tab </p>
    <p> 前面四个空格 </p>
<p> 前面四个空格 </p>

嵌入代码块: 以3个反引号`为开始与结束，反引号键一般在键盘按键1左侧，需要在英文状态下输入。

  • 在反引号之后加上脚本编程语言名称就会进行代码高亮的处理，例如: python、php、go、bash, 不一定所有的Markdown都支持。

`python import os print 'something' \`

import os
print 'something'
  • 如果语言后面多一个:n，则会显示代码的行号，也是不一定所有的Markdown都支持。

`ruby:n def add(a, b) return a + b end \`

温馨提示: 代码的高亮的具体样式是由CSS控制的，由Pygments生成,你可以访问Pygments Styles查看常见的几种风格。

特殊符号、Emoji

描述: 特殊字符是相对于传统或常用的符号外，使用频率较少字符且难以直接输入的符号。比如数学符号；单位符号；制表符等。

  • 常用排版： ▌▍◆★☆☁➤➜❤➊➋➌
  • TodoList： ✅☑✓✔√☓☒✘ㄨ✕✖✗❌❎
  • emoji：

    原文地址：https://cloud.tencent.com/developer/article/2129902

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

HTMLhttpsMarkdown网络安全

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot