新手 Markdown

编程技术

发布日期: 2022-04-16

更新日期: 2025-03-03

文章字数: 2.9k

阅读时长: 12 分

阅读次数:

快速学习Markdown

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown。

本篇可能是目录结构最混乱的文章，跟紧带序号的标题，开始学习吧 ☀ ）

1、Markdown 应用

Markdown 能被使用来撰写电子书，如：Gitbook。

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。

本教程使用的是Typora。用vscode也是可以的，在vscode右侧栏扩展按钮下载Markdown Preview Enhanced 即可。

在Typora，用ctrl + / 按键即可切换源码模式和预览模式。

2、Markdown 标题

2.1 我是一级标题
=================

2.2 我是二级标题
-----------------

效果如下

2.1 我是一级标题

2.2 我是二级标题

用#号标记六级标题，参考如下效果

# 2.3 一级标题
## 2.4 二级标题
### 2.5 三级标题
#### 2.6 四级标题
##### 2.7 五级标题
###### 2.8 六级标题

2.3 一级标题

2.4 二级标题

2.5 三级标题

2.6 四级标题

2.7 五级标题

2.8 六级标题

3、Markdown字体

markdown可以使用一下几种字体，参考如下效果：

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~删除线文本~~
<u>带下划线文本</u> #通过HTML的<u></u>标签
带脚注文本，鼠标指一下会显示对应解释 [^tuoyou-hao]。
[^tuoyou-hao]: 拓佑豪博客

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
~~删除线文本~~
带下划线文本 #通过HTML的标签
带脚注文本，鼠标指一下会显示对应解释^[1]。

4、Markdown分割线

***

* * *

*****

- - -

----------

效果如下：

5、Markdown 列表项

5.1 Markdown 无序列表

* 文本
* 文本

+ 文本
+ 文本

- 文本
- 文本

效果如下

文本
文本

文本
文本

文本
文本

5.2 Markdown 有序列表

1. 第一项
2. 第二项
3. 第三项

效果如下：

第一项
第二项
第三项

5.3 列表嵌套

1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素

6、Markdown区块

> 最外层
>> 第一层嵌套
>>> 第二层嵌套

效果如下：

最外层

第一层嵌套

第二层嵌套

当然，这些是可以互相嵌套的

> 列表
> 1. 第一项
> 2. 第二项
> + 第一项
>> + 第二项
> + 第三项

效果如下：

列表

第一项

第二项

第一项

第二项

第三项

7、Markdown 代码

单行代码：

`echo HelloWorld`

效果如下：

echo HelloWorld

代码区块：

```c
#include <stdio.h>

void main(){
	printf("Hello World\n");
}//a.c
```

你可以在第一行的```旁边指定语言，也可以不指定。效果如下

#include <stdio.h>

void main(){
	printf("Hello World\n");
}//a.c

8、Markdown 链接

这是一个链接 [拓佑豪的博客](tuoyou-hao.github.io)

效果如下：

这是一个链接拓佑豪的博客

在Typora，也可以直接打链接地址：https://tuoyou-hao.github.io

高级链接

这个链接用 1 作为网址变量 [baidu][1]
然后在文档的结尾为变量赋值（网址）
[1]: https://www.baidu.com/

效果如下：

这个链接用 1 作为网址变量 baidu
然后在文档的结尾为变量赋值（网址）

9、Markdown图片

格式是 ![图片名称](图像地址)

如果你是在本地的图片，图像地址就可以用文件路径

如果你需要这个图像到哪儿都可以看，除了把图片的路径改为相对路径然后一并打包，还可以把图像放在图床

效果如下：

是不是感觉图像太大了？如果你的图像需要缩放，可以使用以下语句

<img src=图片地址 style="zoom: 缩放比例;" />
<img src="https://s2.loli.net/2022/05/14/R4umtJ9oEPwWhvS.png" style="zoom: 33%;" />

10、Markdown表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

效果如下：

表头	表头
单元格	单元格
单元格	单元格

文字对齐方式：

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

11、Markdown其他技巧

1、支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：kbd、b、i、em、sup 、ub、br等，如：

使用 <kbd>Ctrl</kbd>+<kbd>c</kbd> 键复制文本

使用 Ctrl+c 复制文本

2、转义

Markdown 使用了很多特殊符号来表示不同的符号，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*

文本加粗
** 正常显示星号 **

Markdown 支持在这些符号前面加上反斜杠，达到转义的目的：

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

3、Markdown表情

可以使用各种emoji，🔆或者💡等等都可以

想要使用这些emoji，可以前往这个链接emoji，找到合适的emoji，点击一下就复制成功了，可以自由使用在Markdown里。

4、数学公式、流程图等等

markdown支持书写数学公式，代码建立流程图等等，后续会出专栏专门介绍。

Latex数学矩阵表示：

$$
\begin{Bmatrix}
   a & b \\\\
   c & d
\end{Bmatrix}
$$

$$
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
$$

流程图：

<pre class="mermaid">graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
</pre>

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

5、花色字体

在 Markdown 文件中，可以使用标签的 color 属性修改文字颜色。

5.1 字体前景色

使用 `<font>` 的标签的修改文字前景色

<font color="red">红色</font>
<font color="green">绿色</font>
<font color="blue">蓝色</font>

<font color="rgb(200, 100, 100)">使用 rgb 颜色值</font>

<font color="#FF00BB">使用十六进制颜色值</font>

使用 <font> 的标签的修改文字前景色

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

除了修改 color 属性外，还可以使用 style 样式属性修改文字颜色。

使用 `style` 的标签的修改文字前景色

<font style="color: red">红色</font>
<font style="color: green">绿色</font>
<font style="color: blue">蓝色</font>

<font style="color: rgb(200,100,100)">使用 rgb 颜色值</font>

<font style="color: #FF00BB">使用十六进制颜色值</font>

使用 style 的标签的修改文字前景色

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

并且支持修改字体，以下是总结：

<font face="黑体">黑体字</font>
<font face="微软雅黑">微软雅黑</font>
<font face="STCAIYUN">华文彩云</font>
<font color=blue>蓝色</font>
<font color=#008000>绿色</font>
<font color=Red>红色</font>
<font size=5>尺寸</font>
<font face="黑体" color=green size=5>黑体，绿色，尺寸为5（任意内容）</font>

黑体字

微软雅黑

华文彩云

蓝色

绿色

红色

尺寸

黑体，绿色，尺寸为5（任意内容）

字体颜色有预设值可以用，使用<font color=LightSeaGreen>某一种绿色</font>语句即可：

某一种绿色

常见的颜色还有：

<font color=NavajoWhite>color=NavajoWhite</font>
<font color=Feldspar>color=Feldspar</font>
<font color=SandyBrown>color=SandyBrown</font>
<font color=LightSalmon>color=LightSalmon</font>
<font color=Salmon>color=Salmon</font>
<font color=LightCoral>color=LightCoral</font>

<font color=Pink>color=Pink</font>
<font color=PaleVioletRed>color=PaleVioletRed</font>
<font color=HotPink>color=HotPink</font>

<font color=silver>color=silver</font>
<font color=LightSlateGray>color=LightSlateGray</font>
<font color=SlateGray>color=SlateGray</font>
<font color=grey>color=grey</font>
<font color=RosyBrown>color=RosyBrown</font>
<font color=maroon>color=maroon</font>

<font color=DarkSeaGreen>color=DarkSeaGreen</font>
<font color=LightSeaGreen>color=LightSeaGreen</font>
<font color=SeaGreen>color=SeaGreen</font>

<font color=PowderBlue>color=PowderBlue</font>
<font color=LightSteelBlue>color=LightSteelBlue</font>
<font color=CadetBlue>color=CadetBlue</font>
<font color=navy>color=navy</font>

<font color=Thistle>color=Thistle</font>
<font color=Plum>color=Plum</font>
<font color=MediumPurpl>color=MediumPurpl</font>e
<font color=Purple>color=Purple</font>

效果如下：
color=NavajoWhite

color=Feldspar

color=SandyBrown

color=LightSalmon

color=Salmon

color=LightCoral

color=Pink

color=PaleVioletRed

color=HotPink

color=silver

color=LightSlateGray

color=SlateGray

color=grey

color=RosyBrown

color=maroon

color=DarkSeaGreen

color=LightSeaGreen

color=SeaGreen

color=PowderBlue

color=LightSteelBlue

color=CadetBlue

color=navy

color=Thistle

color=Plum

color=MediumPurpl

color=Purple

5.2 字体背景色

使用 `style` 属性修改文字的背景色

<font style="background: red">红色</font>
<font style="background: green">绿色</font>
<font style="background: blue">蓝色</font>

<font style="background: rgb(200,100,100)">使用 rgb 颜色值</font>

<font style="background: #FF00BB">使用十六进制颜色值</font>

使用 style 属性修改文字的背景色

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

利用style属性，我们可以制作更丰富的样式，如：

更丰富背景样式


## <font style="background: url('http://www.wenliku.com/d/file/patterns/2019-06-26/d8fac26c38c9b2a7e2393fc9af766e8f.jpg') ">I wish you a Merry Christmas</font>

使用图片作背景


## <font style="background: linear-gradient( to right, #ff1616, #ff7716, #ffdc16, #36c945, #10a5ce, #0f0096, #a51eff, #ff1616);">太阳太阳，给我们带来，七色光彩</font>

渐变背景色

更丰富背景样式

I wish you a Merry Christmas

使用图片作背景

太阳太阳，给地球带来，七色光彩

渐变背景色

并且，借助table，tr，td等表格标签的bgclor属性，还可以实现更丰富的样式。

<table><tr><td bgcolor=DarkSeaGreen>这里的背景色是：DarkSeaGreen</td></tr></table>

这里的背景色是：DarkSeaGreen

这里的背景色是：Beige

这里的背景色是：MistyRose

拓佑豪

http://tuoyou-hao.github.io

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源拓佑豪 !

新手 Markdown

Numpy 总结笔记

比较简单的总结，以备参考

2022-04-17 编程技术

Numpy 数据分析

操作系统概述(2.1进程与线程)

操作系统--进程与线程概述

2022-04-12 计算机知识

计算机知识操作系统

快速入门 Markdown(新手向)

快速学习Markdown

1、Markdown 应用

2、Markdown 标题

2.1 我是一级标题

2.2 我是二级标题

2.3 一级标题

2.4 二级标题

2.5 三级标题

2.6 四级标题

2.7 五级标题

2.8 六级标题

3、Markdown字体

4、Markdown分割线

5、Markdown 列表项

5.1 Markdown 无序列表

5.2 Markdown 有序列表

5.3 列表嵌套

6、Markdown区块

7、Markdown 代码

8、Markdown 链接

9、Markdown图片

10、Markdown表格

11、Markdown其他技巧

1、支持的 HTML 元素

2、转义

3、Markdown表情

4、数学公式、流程图等等

5、花色字体

5.1 字体前景色

5.2 字体背景色

I wish you a Merry Christmas

太阳太阳，给地球带来，七色光彩

你的赏识是我前进的动力