【Markdown】揭秘优雅笔记背后的语法!#HTML

175 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第8天,点击查看活动详情

🎐 放在前面说的话

大家好,我是北 👧🏻

本科在读,此为日常捣鼓.

如有不对,请多指教,也欢迎大家来跟我讨论鸭 👏👏👏

还有还有还有很重要的,麻烦大可爱们动动小手,给北点颗心心♥,北北需要鼓励嗷呜~

今天我们来揭秘Markdownd优雅笔记背后的语法!hhh~

image.png

Let’s get it!

基础语法

1、标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2、字体

**我变胖了呃呃呃**\ 
*我歪了啊啊啊*\
***我胖还歪呜呜呜***\     
~~你还是把我删了吧~~ 
\ 起换行作用

我变胖了呃呃呃
我歪了啊啊啊
我胖还歪呜呜呜
你还是把我删了吧

3、引用

> 引用
> > 无限嵌套,可以n个

引用

无限嵌套,可以n个

4、分割线

---

***


5、图片

![图片alt](连接 title)

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce43d53fd85d4a569d859365620f698f~tplv-k3u1fbpfcp-watermark.image?)

image.png

6、超链接

链接和图片的写法类似,图片仅在超链接前多了一个 ! ,一般是 [文字描述] (链接)

[超链接名称](链接地址 连接title)

[掘金](https://juejin.cn/post/7103668699319500813)

掘金

7、代码&代码块&代码高光

`单行代码`

(```)
多行代码 代码块了啦
(```)

(```go)
fmt.Println("看见我的go代码高光了么?")
(```

go可以随便变,变成自己用的语言,如python、Java、c等

单行代码

多行代码 代码块了啦
fmt.Println("看见我的go代码高光了么?")

8、列表

1. 有序列表
2. 有序列表
3. 有序列表
- 无序列表1
    - 无序列表2
        - 无序列表3
  1. 有序列表
  2. 有序列表
  3. 有序列表
  • 无序列表1
    • 无序列表2
      • 无序列表3

9、 表格

|商品|数量|单价|  
|----|---|---|  
|蛋糕🎂|无数个|不贵啦不贵啦|  
|北|1|无价之宝啦|

默认左对齐

右对齐---:

剧中 :---:

商品数量单价
蛋糕🎂无数个不贵啦不贵啦
1无价之宝啦

进阶语法

1.转义&换行

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

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

2. 脚注

这是一段内容内容 [^1]。
[^1]: 这是脚注!!!
这是第二段内容的内容[^2]。
[^2]: 我是用来解释你的啦~

这是一段内容内容 1

不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。 目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:
但是不一定所有的平台都支持,以下也有一些在掘金不能显示的emomo...

3. 图片位置&大小调节

<div align=center>
<img src="https://img0.baidu.com/it/u=1246206694,3592233997&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"  width = "350" height = "290"><br>
<center><font size=2>图1 (^^ゞ</font></center>
</div>

图1 (^^ゞ

4. 网址显示

<https://juejin.cn/post/7103668699319500813>

juejin.cn/post/710366…

5. 字体&颜色自定义

<font face="黑体">我是黑体字</font><br>
<font face="微软雅黑">我是微软雅黑</font><br>
<font face="STCAIYUN">我是华文彩云</font><br>
<font color=red>我是红色</font><br>
<font color=#008000>我是绿色</font><br>
<font color=Blue>我是蓝色</font><br>
<font size=5>我是尺寸</font><br>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font><br>

emmm这里我不知道为什么掘金不支持,我也很momo...

image.png

6. 背景色

<table><tr><td bgcolor=blue>背景色:蓝色</td></tr></table>

image.png

7.跳转到同文章的某处

法医

<span id="jump">emmm这里我不知道为什么掘金不支持,我也很momo...</span>
[点击跳转到我momo时刻](#jump)

id一定要对应上噢,不然我不知道跳转到哪里了啦

点击跳转到我momo时刻

法尔

<p id ="4"></p>
 目录  

[1. 这是一个目录跳转示例](#1)   
 
[2. 这是一个目录跳转示例](#2)   
 
[3. 这是一个目录跳转示例](#3)   
  
<p id="1"></p>              
这是一个目录跳转示例

[返回目录](#4)              
 
<p id="2"></p>               
2. 这是一个目录跳转示例
 
[返回目录](#4)            
 
<p id="3"></p>              
3. 这是一个目录跳转示例

[返回目录](#4)        

目录

1. 这是一个目录跳转示例

2. 这是一个目录跳转示例

3. 这是一个目录跳转示例

这是一个目录跳转示例

返回目录

2. 这是一个目录跳转示例

返回目录

3. 这是一个目录跳转示例

返回目录

🎉 放在后面说的话

那就先写这些markdown背后的秘密吧,后期补充啦!赞赞赞球球~去复习喽白白

Footnotes

  1. 这是脚注!!! 这是第二段内容的内容2

  2. 我是用来解释你的啦~