Markdown学习笔记(来个pig)

Markdown 学习笔记

注: 本文为本人参照网上资源练习markdown并整理.
原文链接:https://www.runoob.com/markdown/md-link.html
第一次发文章，拿typora写的，写的顺序可能有点乱（边学边写），再导入csdn出现了一些bug（csdn竟然不可以导入pdf！！）。。。。。。。我尽力克服。。

1.标题

markdown代码：

# 一级标题
## 二级标题

运行结果：

一级标题

二级标题

2.文本

markdown代码：

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
你好  

***
~~删除线~~
<u>下划线</u>
***
脚注[^卧槽]
[^卧槽]:我感到卧槽
创建脚注格式类似这样 [^RUNOOB]。
[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！

运行结果：
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
你好

---

删除线
下划线

---

脚注¹

首行缩进小技巧

半方大的空白 或 
全方大的空白 或 
不断行的空白格 或 
分号不可以省略！！！

例：
markdown代码：

 Hello World!
 Hello World!
 Hello World!

运行结果：
 Hello World!
 Hello World!
 Hello World!

3.列表

无序表:
markdown代码:

* 第一项
* 第二项
* 第三项  
+ 第一项
+ 第二项
+ 第三项  
- 第一项
- 第二项
- 第三项

运行结果:

• 第一项
• 第二项
• 第三项

• 第一项
• 第二项
• 第三项

• 第一项
• 第二项
• 第三项

有序表:
markdown代码:

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

运行结果:

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

列表嵌套:
markdown代码:

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

运行结果：

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

4.区块:

区块：
markdown代码：

> 你好
> 你好,世界
> Hello, world

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

运行结果：

你好
你好,世界
Hello, world

最外层

第一层嵌套

第二层嵌套

区块中使用列表:
markdown代码：

> 你好
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

运行结果：

你好

1. 第一项
2. 第二项

• 第一项
• 第二项
• 第三项

列表中使用区块:
markdown代码：

* 第一项
   > Hello
   > world
* 第二项
   > 你	
   > 世界

运行结果：

• 第一项

  Hello
  world

• 第二项

  你
  世界

5.代码

段落上的一个函数或片段的代码:

方法：用一个反引号```````包起来 , 例如运行代码````printf()函数 ```，可得：printf()` 函数

代码区块:

方法：用三个反引号包起来。
运行结果（代码略）：

public class test {
	public static void main(args[0]){
		System.out.println("没有IDE,爷忘记java咋写了...")
	}
}

6.链接

链接使用方法:

[链接名称](链接地址)

或者

<链接地址>

这是一个链接: 百度一下,你就知道
直接显示链接地址: http://www.baidu.com/
高级链接:
markdown代码：

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

运行结果：
这个链接用 1 作为网址变量 [Google][1]
这个链接用 Baidu 作为网址变量 [Baidu][2]
然后在文档的结尾为变量赋值（网址）
[1]: http://www.google.com/
[Baidu]: https://www.baidu.com/

7.图片

插入图片方法：
方法（alt 属性文本可以不写）：

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

插入本地图片：
markdown代码：

![](./pictures/test.png)
<center>Fig.1</center>

运行结果：

这里运行出错，在csdn上不可以插入本地图片，所以我重新上传了图片。
原markdown文件同级目录下有pictures文件夹，文件夹内包含需要加载的图片。

Fig.1

插入网络图片：
markdown代码：

![找不到图片](https://i-blog.csdnimg.cn/blog_migrate/03cf78e1378f055afb178094a0440c2c.png)
![](https://img-service.csdnimg.cn/img_convert/2419561a8b71918bf85e2dbedbeaeb07.png)

运行结果：

Fig.2

备注：“找不到图片”的运行结果是一个反例，原因是原网址的图片已经消失。

**html嵌入图片：(老师给的模板，不好用，需要使用vscode，以及markdown previewed enhanced，markdown pdf扩展，在typro中输出结果有点问题)

虽然这个代码不好用，我第一次计网作业还是用了这个代码，hhh，真香

<div>
  <img src="./pictures/test.png"><br />
  <div>Fig.3</div>
</div>

html代码2(放在文末)：

<style type="text/css">
div{
  text-align: center;
}
div>div {
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
  display: inline-block;
  padding: 2px;
}
div>img{
  border-radius: 0.3125em;
  box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);
}
</style>

运行结果：

与前文一致，我同样重新上传了图片

Fig.3

这个代码可能比老师的简洁一点，而且在typora之中没有bug.

<center>
    <div> <img src="./pictures/test.png" alt="Fig.4" style="zoom:38%;"/></div>
    <div>Fig.4</div>
</center>

Fig.4

8.表格

语法格式：

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

备注：使用|来分隔单元格，使用-来分隔表头和单元格

markdown代码：

|表头A|表头B|表头C|
|---|---|---|
|单元格1|单元格2|单元格3|
|单元格4|单元格5|单元格6|

运行结果：

表头A	表头B	表头C
单元格1	单元格2	单元格3
单元格4	单元格5	单元格6

表格对齐方式：

• -:设置内容与标题栏右对齐
• :-设置内容与标题栏左对齐
• :-:设置内容与标题栏居中对齐
  markdown代码：

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

运行结果：

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

9.高级技巧

支持html元素
不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等。
转义
可以使用转义符\进行转义（与java有点类似？）
例子：
markdown代码：

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

运行结果：

\
文本加粗
**正常显示星号**
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

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

公式
 当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

$$
\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}

运行结果为：

$${\mathbf{V}}_1\times {\mathbf{V}}_2=\left|\begin{array}{ccc}\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{array}\right|$$

10. Summary

• markdown编程可以得到十分“优雅”的pdf
• 其实原本输出的pdf没有太多bug，但是我导入到csdn后就有些不一样。
• 个人偏爱typora输出pdf

---

1. 我感到卧槽
   创建脚注格式类似这样 ²。 ↩︎

2. 菜鸟教程 – 学的不仅是技术，更是梦想！！！ ↩︎