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

优质资源分享

学习路线指引(点击解锁) 知识定位 人群定位
Python实战微信订餐小程序 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
Python量化交易实战 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

关注「WeiyiGeek」公众号

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

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

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


文章目录:
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 语法的目标是:成为一种适用于网络的书写语言,对于我们来说它是兼容 HTML 的。其主要特点 (轻量化、跨平台、易读易写 )

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

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

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

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

要制约的只有一些 HTML 区块元素――比如`、

、 
````等标签,必须在前后加上空行与其它内容区隔开,还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。


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


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



Footd> tr> table>
Header
Foo

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


**举例说明:**
如果比较喜欢 HTML 的 `或 ![]()` 标签,可以直接使用这些标签,而不用 Markdown 提供的链接或是图像标签语法,和处在 HTML 区块标签间不同,Markdown 语法在 HTML 区段标签间是有效的。


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


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


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


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


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


类似的状况也会发生在 < 符号上,因为 Markdown 允许 兼容 HTML ,如果你是把 < 符号作为 HTML 标签的定界符使用,那 Markdown 也不会对它做任何转换,但是如果你写:`4 < 5` Markdown 将会把它转换为: `4 < 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/](https://blog.csdn.net/biggbang)
typora - [https://typora.io/](https://blog.csdn.net/biggbang) (比较好用不然也不会收费)


**Web 端**


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


## 0x01 语法学习


### 段落换行


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


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


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


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


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


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



  or   表示一个半角的空格
  or   表示一个全角的空格
   两个全角的空格(用的比较多)
  or   不断行的空白格

表示一个半角的空格
  表示一个全角的空格
   两个全角的空格(用的比较多)
不断行的空白格


### 目录标题


描述: 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字母大小写。



文章目录

    • 优质资源分享
    • 0x00 前言简述
      • Markdown 初识
      • Markdown 特点
  • This is an H1
    • This is an H2
  • 这是 H1
    • 这是 H2
      • 这是 H3
            • 这是 H6
  • Heading
    • Sub heading 1
    • Sub heading 2
    • 这是一个标题。
      • 特殊符号、Emoji
      • 位置、字体、字号、颜色
      • 数学公式
      • 流程图
      • 序列图
      • 甘特图

文章目录

    • 优质资源分享
    • 0x00 前言简述
      • Markdown 初识
      • Markdown 特点
  • This is an H1
    • This is an H2
  • 这是 H1
    • 这是 H2
      • 这是 H3
            • 这是 H6
  • Heading
    • Sub heading 1
    • Sub heading 2
    • 这是一个标题。
      • 特殊符号、Emoji
      • 位置、字体、字号、颜色
      • 数学公式
      • 流程图
      • 序列图
      • 甘特图

Heading

Sub heading 1

Some nice text

Sub heading 2

Some even nicer text


### 文字标记、粗体、斜体


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



我是带背景的标记
markedmark>


我是带背景的标记


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



我是标记
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.

引用
引用中的引用

这是一个标题。

  1. 这是第一行列表项。
  2. 这是第二行列表项。

给出一些例子代码:

return shell_exec(“echo $input | $Markdown_script”);


textare


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


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



上划线 ‾ \overline{\text{上划线}} 上划线

++inserted++
下划线 ‾ \underline{\text{下划线}} 下划线
下划线u>
insertedins>


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



— (常用)






**上、下标**: 我们可以在Markdown使用两个`~`包含字符渲染下标(sub),使用两个`^`包含字符渲染上标(sup) 。



H20 => H2sub>0
29th => 29thsup>


渲染结果: H20 / 29th


### 表格


描述: Markdown 支持插入表格。


**基础语法**



First Header Second Header Third Header
Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell

**表头位置**



居中 靠左 靠右
weiyigeek weiyigeek weiyigeek

渲染结果:




| 居中 | 靠左 | 靠右 |
| --- | --- | --- |
| [https://www.weiyigeek.top](https://blog.csdn.net/biggbang) | [https://blog.weiyigeek.top](https://blog.csdn.net/biggbang) | [https://www.weiyigeek.top](https://blog.csdn.net/biggbang) |


### 有序、无序、任务列表


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


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



  1. 有序项目1
  2. 有序项目2
  3. 有序项目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

  • 已完成事项1

  • 已完成事项2


* 未完成的事项2
* 已完成事项1


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


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



个人主页链接


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




温馨提示: 邮址的自动链接也很类似,只是 Markdown 会先做一个编码转换的过程,把文字字符转成 16 进位码的 HTML 实体,这样的格式可以糊弄一些不好的邮址收集机器人,例如:[[email protected]](https://blog.csdn.net/biggbang)。


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



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

I get 10 times more traffic from Google than from
Yahoo or MSN.

I get 10 times more traffic from Google than from
Yahoo or MSN.


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



The HTML specification
is maintained by the W3C.


显示结果:


The HTML specification
is maintained by the W3C.


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



使用 Markdown1 可以效率的书写文档,直接转换成 HTML2, 你可以使用 Typora3 软件。


结果展示:使用 Markdown[[1]](https://blog.csdn.net/biggbang) 可以效率的书写文档,直接转换成 HTML[[2]](https://blog.csdn.net/biggbang), 你可以使用 Typora[[3]](https://blog.csdn.net/biggbang) 软件。


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


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



[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fG1zxc6p-1659114607111)(https://blog.weiyigeek.top/img/avatar.jpg “WeiyiGeek avatar”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aDRgOAXt-1659114607112)(/path/to/img.jpg)]

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


**音乐**



audio> 你的浏览器不支持 audio 标签。 audio> iframe>

**视频**



你的浏览器不支持 videocode> 标签。 video> iframe>

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



iframe>

**内容折叠**



Titlesummary> contents ... details>

结果展示:


 Title
contents ...

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


### 嵌入代码


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



[Tab]键

Tab p>
前面四个空格


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


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


```python
import os
print 'something'
  • 如果语言后面多一个:n,则会显示代码的行号,也是不一定所有的Markdown都支持。
def add(a, b)
return a + b
end

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

特殊符号、Emoji

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

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

转义:: 利用反斜杠来插入一些在语法中有其它意义的符号, 例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用标签),你可以在星号的前面加上反斜杠:\*literal asterisks\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

\   反斜线
`   反引号
*   星号
\_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

HTML 符号: HTML 支持的特殊符号:数学符号 / 希腊字母 / 其他 (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️⃣ ⭕ ✔️

位置、字体、字号、颜色

文字居中center> 我是黑体字font> 我是微软雅黑font> 我是华文彩云font> 黑体font> nullfont> grayfont> | 背景色是:Orange红色,16进制颜色值:#FF4500,rgb(255, 69, 0) |

渲染结果:
工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘_第3张图片

数学公式

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

如果需要插入数学公式,可以使用以下语法:

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$

Γ(n)=(n−1)!∀n∈NΓ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N

y=Xβ+εy=Xβ+ε\mathbf{y} = \mathbf{X}\boldsymbol\beta + \boldsymbol\varepsilon

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

x=−b±b2−4ac−−−−−−−√2ax=−b±b2−4ac2ax = \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=πr2S=πr2S=\pi r^2
x=y2+1x=y2+1x {=} y^2 + 1
[–ℏ22m∂2∂x2+V]Ψ=iℏ∂∂tΨ[–ℏ22m∂2∂x2+V]Ψ=iℏ∂∂tΨ\left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi

扩展知识: 有的Markdown解析同时也支持 HTML 属性。

$$ 
(x+1)^2 = \class{hidden}{(x+1)(x+1)} 
$$

$$
(x+1)^2 = \cssId{step1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

温馨提示: 请注意,Markdown 特殊字符需要使用反斜杠进行转义,因此它们被视为数学而不是 Markdown。 例如,* 和 _ 分别变为 * 和 _。

流程图

支持渲染 Mermaid 图表为 svg 内容,并直接保存渲染后的内容,所以无需在前台引入 Mermaid 插件进行渲染。

如果需要插入流程图,可以使用以下语法, 但是需要注意不一定所有Markdown

横向流程图:

  • 示例1

你可能感兴趣的:(python,学习,计算机)