工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘

关注「WeiyiGeek」公众号

设为「特别关注」每天带你玩转网络安全运维、应用开发、物联网IOT学习！

希望各位看友【关注、点赞、评论、收藏、投币】，助力每一个梦想。

帅哥（靓仔）、美女，点个关注后续不迷路

文章目录:
0x00 前言简述

Markdown 初识
Markdown 特点
Markdown 客户端

0x01 语法学习

段落换行
目录标题
文字标记、粗体、斜体
上下划线、分割线、上下标
表格
有序、无序、任务列表
链接、锚、缩写、脚注、引用
图片、音乐、视频、地图、内容折叠
嵌入代码
特殊符号、Emoji
位置、字体、字号、颜色
数学公式
流程图
序列图
甘特图

0x00 前言简述

Markdown 初识

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

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

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

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

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

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

Markdown 特点

描述: 由 Markdown 语法的目标是：成为一种适用于网络的书写语言，对于我们来说它是兼容 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-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
已完成事项1

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

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

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

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

温馨提示: 邮址的自动链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字符转成 16 进位码的 master@weiyigeek.top。

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


This is [id] reference-style link.
[id]: http://example.com/  "Optional Title Here"


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"


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.

显示结果:

The https://lbsyun.baidu.com/index.php?title=jspopularGL)。

内容折叠

 Title
contents ...

结果展示:

Title

contents ...

温馨提示: 内容里面可以嵌套使用 Markdown 语法和 https://www.w3school.com.cn/tags/html_ref_symbols.html)

←	left arrow	        ←	←
↑	up arrow	        ↑	↑
→	right arrow	        →	→
↓	down arrow	        ↓	↓
?	left right arrow	↔	↔
?	carriage return arrow	↵	↵

Emoji: Markdown 是支持Emoji的其语法为:emoji:,所有表情符号名称都是官方 Unicode 字符数据库或 CLDR 名称, 更多官方Emoji参考 (https://emojipedia.org/), Markdown 原生支持的 Emoji 参考 (https://www.webfx.com/tools/emoji-cheat-sheet/) , 值得注意不一定全部浏览器都支持。

:100:
:smile:	
:kissing_heart:	
:smiley: 
:heart:	
:one:	
:o:	
:heavy_check_mark:	
:fire:

结果展示:
?? ?? ?? ?? ?? 1?? ? ?? ??

位置、字体、字号、颜色

文字居中
我是黑体字
我是微软雅黑
我是华文彩云
黑体
null
gray

    
      背景色是：Orange红色，16进制颜色值：#FF4500，rgb(255, 69, 0)

渲染结果:

数学公式

描述: Markdown 是通过数学公式渲染的插件来解析支持公式的，其中最常用的就是 Katex, 如果主题没有支持，可以在系统设置的自定义内容页 head：中加入以下代码：

如果需要插入数学公式，可以使用以下语法：
```math
E = mc^2
U = IR
```
显示结果:

E = mc^2
U = IR

可以创建行内公式，例如： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 和 $\mathbf{y} = \mathbf{X}\boldsymbol\beta + \boldsymbol\varepsilon$

$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

$\mathbf{y} = \mathbf{X}\boldsymbol\beta + \boldsymbol\varepsilon$

或者块级公式，例如：$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

\[x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

例如，一写简单的数学公式

$\sqrt{3x-1}+(1+x)^2$



$$
S=\pi r^2
$$

$$ x {=} y^2 + 1 $$

$$
\left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi
$$

\[S=\pi r^2 \]

\[x {=} y^2 + 1 \]

\[\left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi \]

扩展知识: 有的Markdown解析同时也支持 http://adrai.github.io/flowchart.js/

甘特图

描述: 如果需要插入甘特图，可以使用以下语法：

示例1

```mermaid
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
```

渲染结果:

gantt dateFormat YYYY-MM-DD section S1 T1: 2014-01-01, 9d section S2 T2: 2014-01-11, 9d section S3 T3: 2014-01-02, 9d

更多关于时序图的语法说明：http://bramp.github.io/js-sequence-diagrams/

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

本文至此完毕，更多技术文章，尽情期待下一章节！

【WeiyiGeek Blog 个人博客 - 为了能到远方，脚下的每一步都不能少 】

欢迎各位志同道合的朋友一起学习交流，如文章有误请在下方留下您宝贵的经验知识!

作者主页: 【 https://weiyigeek.top】
博客地址: 【 https://blog.weiyigeek.top 】

WeiyiGeek Blog 博客 - 为了能到远方，脚下的每一步都不能少

专栏书写不易，如果您觉得这个专栏还不错的，请给这篇专栏 【点个赞、投个币、收个藏、关个注，转个发，留个言】(人间六大情)，这将对我的肯定，谢谢！。

echo "【点个赞】，动动你那粗壮的拇指或者芊芊玉手，亲！"
printf("%s", "【投个币】，万水千山总是情，投个硬币行不行，亲！")
fmt.Printf("【收个藏】，阅后即焚不吃灰，亲！")
console.info("【转个发】，让更多的志同道合的朋友一起学习交流，亲！")
System.out.println("【关个注】，后续浏览查看不迷路哟，亲！")
cout << "【留个言】，文章写得好不好、有没有错误，一定要留言哟，亲! " << endl;

更多网络安全、系统运维、应用开发、物联网实践、网络工程、全栈文章，尽在 https://blog.weiyigeek.top 之中，谢谢各位看又支持！

Markdown 是一种纯文本标记语言。 https://typora.io/ ??

个人博客文章

工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘

0x00 前言简述

Markdown 初识

Markdown 特点

0x01 语法学习

段落换行

有序、无序、任务列表

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

位置、字体、字号、颜色

数学公式

甘特图

相关

标签