Markdown扩展语法(合并单元格、设置表格 文字 图片对齐方式、修改字体字号颜色、修改图片大小等)
Markdown扩展语法
写在前面:
- 实现扩展语法篇中提到的各类功能的方式不止本篇博客这一种,比如设置对齐,除本博客提到的方法外,还可以通过修改css等方式来实现。但通过对比,从逻辑、记忆难度和本人的书写习惯出发,最终选择了一种方式去呈现。
- 这篇主要讲述的是Markdown的扩展语法,主要针对特殊的应用场景。如果只是作为日常的书写记录,我认为Markdown基础语法就已经够用了。基础语法我也写过一篇,感兴趣的可以去看看。
在列表中嵌套其他元素
要在保留列表连续性的同时在列表中添加另一种元素,需将该元素缩进一个或两个制表符。
- 添加段落、引用、图片和列表嵌套需要缩进1个制表符
- 添加代码嵌套需要缩进2个制表符
段落
示例:
- This is the first list item.
- This is the second list item.
I need to add other paragraph below the second list item.
- This is the third list item.
效果:
- This is the first list item.
- This is the second list item.
I need to add other paragraph below the second list item. - This is the third list item.
引用块
示例:
- This is the first list item.
- This is the second list item.
> I need to add other paragraph below the second list item.
- This is the third list item.
效果:
- This is the first list item.
- This is the second list item.
I need to add other paragraph below the second list item.
- This is the third list item.
列表
示例:
1. This is the first list item.
2. This is the second list item.
- I need to add other paragraph below the second list item.
3. This is the third list item.
效果:
- This is the first list item.
- This is the second list item.
- I need to add other paragraph below the second list item.
- This is the third list item.
图片
示例:
- This is the first list item.
- This is the second list item.
<img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="30%" height="30%">
- This is the third list item.
效果:
- This is the first list item.
- This is the second list item.
- This is the third list item.
代码块
示例:
- This is the first list item.
- This is the second list item.
```c
{I need to add other paragraph below the second list item.}
```
- This is the third list item.
效果:
- This is the first list item.
- This is the second list item.
c {I need to add other paragraph below the second list item.}
- This is the third list item.
合并单元格
Markdown本身不提供合并单元格的语法,但支持HTML标记语言,所以我们可以通过HTML实现跨行/跨列的表格效果。
HTML表格用到的元素符号:
符号 | 全称 | 功能 |
---|---|---|
<table> |
--- | 表格开始 |
</table> |
--- | 表格结束 |
<tr> |
table row | 行开始 |
</tr> |
table row | 行结束 |
<th> |
table header | 表头开始 |
</th> |
table header | 表头结束 |
<td> |
table data | 单元格数据(表格元素)开始 |
</td> |
table data | 单元格数据(表格元素)结束 |
<rowspan="n"> |
span:跨度 | 合并n行 |
<colspan="n"> |
span:跨度 | 合并n列 |
书写要点:
- 在表格中,开始符号和结束符号之间写文本数据;
<td>text here</td>
- 当文本元素超过两个时,元素之间另起一行;
HTML <tr> <td>text here</td> <td>text here</td> <td>text here</td> </tr>
- 合并行/列属于单元格的属性,要在
<td></td>
内部书写,n为要合并的单元格数量。
语法:<td rowspan="n">text here</td>
示例:
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<td>row1, col1</td>
<td>row1, col2</td>
<td>row1, col3</td>
</tr>
<tr>
<td rowspan="2">rowspan</td>
<td>row2, col2</td>
<td>row2, col3</td>
</tr>
<tr>
<td colspan="2">row3, col2</td>
</tr>
</table>
效果:
Header1 | Header2 | Header3 |
---|---|---|
row1, col1 | row1, col2 | row1, col3 |
rowspan | row2, col2 | row2, col3 |
row3, col2 |
对齐方式
通过HTML语言设置表格或单元格内容的对齐方式(左对齐、居中、右对齐)
HTML元素对齐用到的元素符号:
符号 | 注释 | 功能 |
---|---|---|
align="" |
align:对齐 | 定义元素水平对齐方式 |
valign="" |
vertical align | 定义元素垂直对齐方式 |
left | ...... | 左对齐 |
center | ...... | 居中对齐 |
right | ...... | 右对齐 |
top | ...... | 顶端对齐 |
middle | ...... | 垂直居中 |
bottom | ...... | 底端对齐 |
书写要点:
- 表格使用水平对齐符号
align
设置其在网页中居左、居中或居右显示。单元格内文本使用水平/垂直对齐align/valign
设置其对齐方式; - 在对齐符号的双引号内填写对齐方式,两种对齐符号之间添加一个空格;
如:align="center" valign="center"
- 对齐语句填写在要定义的开始符号(
<table><tr><td>
)中- 在
<table>
中添加定义,控制整个表格的对齐方式; - 在
<tr>
中添加定义,控制一行的对齐方式; - 在
<tb>
中添加定义,控制一个单元格的对齐方式;
- 在
示例:
<table align="center">
<tr align="center" valign="center">
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr align="center" valign="center">
<td>row1, col1</td>
<td>row1, col2</td>
<td>row1, col3</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">rowspan</td>
<td>row2, col2</td>
<td>row2, col3</td>
</tr>
<tr align="center" valign="center">
<td colspan="2">row3, col2</td>
</tr>
</table>
效果:
Header1 | Header2 | Header3 |
---|---|---|
row1, col1 | row1, col2 | row1, col3 |
rowspan | row2, col2 | row2, col3 |
row3, col2 |
背景色
同样的,Markdown语法不支持修改文字背景色,但可以使用HTML来修改表格属性伪装成背景色。
该功能用到的HTML符号:
符号 | 注释 | 功能 |
---|---|---|
bgcolor | background color | 定义元素背景色 |
书写:将单个单元格视为一行文字,在<td bgcolor="">
的双引号中添加背景色,背景色可以使用英文,也可以使用十六进制表示。
语法:<td bgcolor="">text here</td>
示例:
<table><tr><td bgcolor="yellow">text here</font></td></tr></table>
<table><tr><td bgcolor="#42b983">text here</font></td></tr></table>
效果:
text here |
text here |
定义字体、字号和颜色
与合并单元格相同,Markdown本身不提供修改字体属性的语法,但支持HTML标记语言,所以我们可以通过HTML实现更改文字字体、字号和颜色的效果。
实现该功能用的HTML符号:
符号 | 注释 | 功能 |
---|---|---|
font | 文字 | 修改文字属性 |
face | 字体 | 定义文字字体 |
size | 字号 | 定义文字字号 |
color | 颜色 | 定义文字颜色 |
书写要点:
- font是一对标签,要对文字属性进行修改,需要在起始标签
<font>
中添加语句;
<font>text here</font>
- 修改字体,使用
face=""
,所用字体添加在双引号中; - 修改字号,使用
size=""
,所用字体添加在双引号中;- size可能值为0~7,浏览器默认字号为3
- 修改颜色,使用
color=""
,所用字体添加在双引号中;- 颜色可以用英文、十六进制表示
示例:
<font face="Adobe Garamond">text here</font>
<font face="黑体" size="5">text here</font>
<font face="黑体" size="2" color="blue">text here</font>
<font face="Adele" size="7" color="#DCDCDC">text here</font>
效果:
text here
text here
text here
text here
修改图片大小和位置
实现该功能用的符号:
符号 | 注释 | 功能 |
---|---|---|
width | 宽度 | 定义图片宽度 |
height | 高度 | 定义图片高度 |
align | align:对齐 | 定义元素对齐方式 |
div | division:划分 | 修改划分元素(这里指图片)的属性 |
img src="" | image source | 设置图片地址 |
书写要点:
- 图片插入语法使用
<img src="">
,在双引号中添加图片链接;
如:<img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg">
- 在图片链接后添加定义图片大小的语句,语句之间用空格连接;
<img src="" width="" height="">
- 图片的宽度和高度可以用百分比或像素定义;
<img src="" width="50%" height="50%">
<img src="" width="250" height="250">
- 定义图片位置的语句写在父元素
<div></div>
的起始元素<div>
中。
<div align=""><img src="" width="" height=""></div>
示例:
<div align="center"><img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="30%" height="30%"></div>
<div align="center"><img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="170" height="170"></div>
效果:
![](https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg)
![](https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg)
引用类型链接
引用类型链接使URL在Markdown中更易于显示、阅读和管理。其相当于将行内链接拆分成两部分,并通过标签来连接。
个人认为引用类型链接和[text](URL)
的区别不大,但在有大量URL时,更好管理。
引用类型链接分为两部分:
- 与文本保持内联的部分
- 存储在文件中其他位置的部分(一般是末尾)
链接的第一部分格式[显示文本][label]
书写:
- 该部分使用两组方括号,方括号之间没有空格;
- 第一组方括号内放置链接显示文本;
- 第二组方括号内放置显示的标签,该标签是指向存储在文档其他位置的链接,可以包括数字、字母、空格或标点符号。
链接的第二部分格式[label]: <URL> "tittle
"
书写:
- 第一个方括号(用于链接的标签)后,紧跟一个冒号和至少一个空格,如:
[label]:
; - 将链接的网址URL扩在尖括号中;
- 将连接的可选标题扩在双引号中,标题和URL之间以空格连接。
注意:
- 考虑到不同版本Markdown程序的兼容性,URL中间的空格使用
%20
代替。 - 可以将链接的第二部分放在文档中的任何位置,比如在文档末尾作为尾注或脚注
示例:
作家的命运是很奇特的。开头往往是[巴洛克式][1],爱虚荣的巴洛克式,多年后,如果吉星高照,他有可能达到的不是简练(简练算不了什么),而是谦逊而隐蔽的复杂性。
[1]: <https://zhuanlan.zhihu.com/p/63298524> "巴洛克式是什么风格?"
效果:
作家的命运是很奇特的。开头往往是巴洛克式,爱虚荣的巴洛克式,多年后,如果吉星高照,他有可能达到的不是简练(简练算不了什么),而是谦逊而隐蔽的复杂性。
脚注
脚注使我们可以添加注释和参考,而不使正文混乱。
与引用类链接相比,主要用于文档内部的跳转。读者可以单击脚注链接跳至页面底部的脚注,多用于添加注释内容。
脚注分为两部分:
- 文本内联部分
- 脚注部分
文本内联部分的书写方式:[^label]
- 使用方括号和插入符号
[^]
创建脚注,在插入符号^
后添加标识符; - 标识符可以是数字或字母,但不能包含空格和制表符;
- 脚注要按顺序标号。
示例:
Here`s a simple footnote[^1], and here is the longer one.[^bignote]
脚注部分的书写方式:[^label]: text here
- 将上一部分带有标识符的脚注放至文档末尾(或任意位置);
- 在脚注后紧跟冒号和空格,再添加注释文本。
- 脚注可以添加到文档任意位置,列表、块引用和表格等元素除外。
示例:
佩特说过,一切艺术都具有音乐的属性。
[^1]: Walter Horatio Pater(1839-1894),英国评论家、散文家,倡导一种精美的散文题材,对唯美主义有较大影响。
[^2]: 出自[阿根廷]豪尔赫·路易斯·博尔赫斯《另一个、同一个》
定义列表
一些Markdown处理器允许创建术语及其对应定义的定义列表。要创建定义列表,需在第一行上键入术语。在下一行,键入一个冒号,后跟一个空格和定义。
- First Term
- This is the definition of the first term.
- Second Term
- This is one definition of the second term.
- This is another definition of the second term.
任务列表
创建带复选框的任务列表,需在任务列表前添加破折号-
和方括号[]
,并在两者之间和方括号内添加空格( [ ]
)。若要选择复选框,需在方括号内添加x([x]
)。
示例:
- [ ] 在地球上花费不多
- [ ] 梦境不收入场费
- [x] 幻想只有在破灭时才须代价
效果:
使用emoji表情
- 将表情复制粘贴到Markdown格式的文本中
- 键入表情符号简码 emoji shortcode
- 推荐插件:Markdowntools
示例:
去露营了!:tent:
开心开心!:joy:
效果:
去露营了!⛺
开心开心!😂