MarkDown语言零基础从入门到实践一则全

目录

一.标题

二.列表

 三.代码

代码段

 代码区块

 四.文本

 五.线条

六.符号 （解决VSCode无法显示emoji表情问题）

七.表情符号

 八.转义字符

 九.数学公式

单行

​编辑 多行

 十.脚注

 十一.引用

 十二.链接

 十三.图片

网络图片

本地图片

十四.锚点

十五.目录（解决VSCode插件与Github无法[toc]自动生成目录树问题）

十六.表格

 十七.图形

十八.HTML行内样式

More

---

首先我们需要一个可以编辑运行Markdown文件的编辑器

我们可以使用VSCode来编辑，前提是需要安装一个Markdown All in One这样一个Markdown插件

这样我们就可以在编辑的同时在侧边栏查看到我们编辑的结果

---

一.标题

# Hello Markdown(一级标题)
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

---

二.列表

# 列表
- 无序列表
- 回车键自动生成下一个无序列表项
  - Tab键后跟- 可以生成二级列表
    - Tab键再跟- 生成三级列表
1. 有序列表
2. 按下回车自动生成下一个有序列表序列号

---

 三.代码

代码段

# 代码
## 代码片段
### JavaScript `this` 的指向问题

 代码区块

## 代码区块
#### 手动指定高亮显示语言
```go
package main
import "fmt"
func main () {
  a := "Hello Golang"
  fmt.Println(a)
}
```
```javascript
const a = 'Hello JavaScript'
console.log(a)
console.dir(a)
```
#### 让Markdown自动为我们选择合适的高亮显示语言
```markdown
const a = "Hello MarkDown"
console.log(a)
console.dir(a)
```
### 使用波浪线（部分编辑器不支持）
~~~js
const a = 'Hello JavaScript'
console.log(a)
console.dir(a)
~~~

---

 四.文本

## 文本
### 加粗和斜体
**加粗**
_斜体_
***加粗斜体***
___加粗斜体___

---

 五.线条

# 线条
## 水平线
---
## ~~删除线~~
## <u>下划线</u>

---

六.符号 

HTML 符号实体参考手册 | 菜鸟教程

---

七.表情符号

🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more 

 使用什么表情包直接点击copy就可以了

当然，如果我们使用的VSCode插件，那么我们的表情符号是无法显示出来正常表情图的

我们可以直接上这些网站直接复制表情（不是图片）

常用 Emoji 表情符号，可直接复制使用 - 在线工具-wetools.com微工具 

分类:🍓食物和饮料相关的Emoji大全 | EmojiAll

---

 八.转义字符

# 转义字符\
\```
\___

---

 九.数学公式

Markdown/LaTeX 数学公式和符号表 - 知乎

单行

# 数学公式
## 单行
$e^{i\pi} + 1 = 0$

 多行

## 多行
$$ \left\{
\begin{aligned}
x&=1\\
y&=2+x
\end{aligned}
\right. $$

---

 十.脚注

# 脚注
## 我们今天要学习的是Python、Golang、JavaScript[^ 1]一天学完，你可以吗？
[^ 1]: JavaScript是运行在浏览器中运行的语言，但如今不仅仅是这样了

---

 十一.引用

# 引用
> 这句话是我引用来的
> - ***所以我需要使用>符号来表示***

---

 十二.链接

# 链接
## 我们粘贴过来默认为超链接显示
https://blog.csdn.net/weixin_63836026?spm=1000.2115.3001.5343

## 或者使用<>包含起来
<https://brave-air.github.io>

## 链接自定义文字
[小蜗博客](https://blog.csdn.net/weixin_63836026?spm=1000.2115.3001.5343)

## 只显示、不具有跳转功能
[小蜗博客](` https://blog.csdn.net/weixin_63836026?spm=1000.2115.3001.5343 `)

---

 十三.图片

网络图片

复制网络图片URL--然后粘贴：

# 图片
## 网络图片
https://s3.amazonaws.com/static.niceboard.co/boards/qualified/companies/scotts-cheap-flights-_sIN1wYL1F.png

![这是一张网络上的图片](https://s3.amazonaws.com/static.niceboard.co/boards/qualified/companies/scotts-cheap-flights-_sIN1wYL1F.png
)
<!-- style="zoom:25%" -->
### 调整大小
<img src="https://s3.amazonaws.com/static.niceboard.co/boards/qualified/companies/scotts-cheap-flights-_sIN1wYL1F.png" style="zoom:25%"></img>

 点击去往浏览器

本地图片

本地图片放本地路径就可以了![]()

---

十四.锚点

# 锚点
[返回顶部](#hello-markdown一级标题)

---

十五.目录

我们可以使用[toc],但是似乎在该插件以及Github上不能使用[toc]自动创建目录树

不过我们可以Ctrl+Shift+P

输入：Markdown All in One: Create Table of Contents

就可以自动生成了，在Github上也同样适用 

---

十六.表格

# 表格
<!-- 左侧有冒号：靠左对齐 -->
<!-- 右侧有冒号：靠右对齐 -->
<!-- 俩边有冒号：居中对齐 -->
| 下面是表头分割线 | 下面是表头分割线 | 下面是表头分割线 |
| :--: | :--: | :--:|
| 上面是表头分割线 | 上面是表头分割线 | 上面是表头分割线 |
| 上面是表头分割线 | 上面是表头分割线 | 上面是表头分割线 |
| 上面是表头分割线 | 上面是表头分割线 | 上面是表头分割线 |
| 上面是表头分割线 | 上面是表头分割线 | 上面是表头分割线 |

---

 十七.图形

Markdown高级使用之流程图 - 小白先生哦 - 博客园

---

十八.HTML行内样式

# HTML行内样式
<font color="red">P标签文字，随意修改</font>

---

More

Markdown 教程 | 菜鸟教程

Markdown 官方教程