Markdown扩展语法（合并单元格、设置表格文字图片对齐方式、修改字体字号颜色、修改图片大小等）平台：Vscode

Poem_357

已于 2024-02-02 19:43:23 修改

阅读量1k

点赞数 4

文章标签： vscode

于 2023-11-08 13:34:18 首次发布

本文链接：https://blog.csdn.net/chuiertujing/article/details/134287385

版权

Markdown扩展语法

写在前面：

实现扩展语法篇中提到的各类功能的方式不止本篇博客这一种，比如设置对齐，除本博客提到的方法外，还可以通过修改css等方式来实现。但通过对比，从逻辑、记忆难度和本人的书写习惯出发，最终选择了一种方式去呈现。
这篇主要讲述的是Markdown的扩展语法，主要针对特殊的应用场景。如果只是作为日常的书写记录，我认为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 align="center">
    <tr align="center">
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
    </tr>
    <tr align="center">
        <td>row1, col1</td>
        <td>row1, col2</td>
        <td>row1, col3</td>
    </tr>
    <tr align="center">
        <td rowspan="2">rowspan</td>
        <td>row2, col2</td>
        <td>row2, col3</td>
    </tr>
    <tr align="center">
        <td colspan="2">row3, col2</td>
    </tr>
</table>

效果：

Header1	Header2	Header3
row1, col1	row1, col2	row1, col3
rowspan	row2, col2	row2, col3
rowspan	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>）中
1. 在<table>中添加定义，控制整个表格的对齐方式；
2. 在<tr>中添加定义，控制一行的对齐方式；
3. 在<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
rowspan	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

定义字体、字号和颜色

与合并单元格相同，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>

效果：

text

引用类型链接

引用类型链接使URL在Markdown中更易于显示、阅读和管理。其相当于将行内链接拆分成两部分，并通过标签来连接。
个人认为引用类型链接和[text](URL)的区别不大，但在有大量URL时，更好管理。

引用类型链接分为两部分：

与文本保持内联的部分
存储在文件中其他位置的部分（一般是末尾）

链接的第一部分格式[显示文本][label]
书写：

该部分使用两组方括号，方括号之间没有空格；
第一组方括号内放置链接显示文本；
第二组方括号内放置显示的标签，该标签是指向存储在文档其他位置的链接，可以包括数字、字母、空格或标点符号。

链接的第二部分格式[label]: <URL> "tittle"
书写：

第一个方括号（用于链接的标签）后，紧跟一个冒号和至少一个空格，如：[label]: ；
将链接的网址URL扩在尖括号中；
将连接的可选标题扩在双引号中，标题和URL之间以空格连接。

示例：

作家的命运是很奇特的。开头往往是[巴洛克式][1]，爱虚荣的巴洛克式，多年后，如果吉星高照，他有可能达到的不是简练（简练算不了什么），而是谦逊而隐蔽的复杂性。

[1]: <https://zhuanlan.zhihu.com/p/63298524> "巴洛克式是什么风格？"

效果：
作家的命运是很奇特的。开头往往是巴洛克式，爱虚荣的巴洛克式，多年后，如果吉星高照，他有可能达到的不是简练（简练算不了什么），而是谦逊而隐蔽的复杂性。

注意：

考虑到不同版本Markdown程序的兼容性，URL中间的空格使用%20代替。
可以将链接的第二部分放在文档中的任何位置，比如在文档末尾作为尾注或脚注

脚注

脚注使我们可以添加注释和参考，而不使正文混乱。
与引用类链接相比，主要用于文档内部的跳转。读者可以单击脚注链接跳至页面底部的脚注，多用于添加注释内容。

脚注分为两部分：

文本内联部分
脚注部分

文本内联部分的书写方式：[^label]

使用方括号和插入符号[^]创建脚注，在插入符号^后添加标识符；
标识符可以是数字或字母，但不能包含空格和制表符；
脚注要按顺序标号。

示例：

Here`s a simple footnote[^1], and here is the longer one.[^bignote]

脚注部分的书写方式：[^label]: text here

将上一部分带有标识符的脚注放至文档末尾（或任意位置）；
在脚注后紧跟冒号和空格，再添加注释文本。

脚注可以添加到文档任意位置，列表、块引用和表格等元素除外。

示例：

佩特说过，一切艺术都具有音乐的属性。
[^1]: Walter Horatio Pater(1839-1894)，英国评论家、散文家，倡导一种精美的散文题材，对唯美主义有较大影响。
[^2]: 出自[阿根廷]豪尔赫·路易斯·博尔赫斯《另一个、同一个》

效果：
佩特¹说过，一切艺术都具有音乐的属性。²

文档内跳转

跳转语法分为两部分：

放置跳转链接的地方
要跳转到的位置

跳转链接的书写方式：<a href="#id">text here</a>
要跳转到位置的书写方式：<div id="id">text here</div>

示例：

# 第一个跳转
<a href="#1">跳到一个地方去:sunglasses:</a>
<div id="1">你跳过来了</div>

# 第二个跳转
<a href="#2">跳转回去</a>
<div id="2">又回来了</div>

效果：
跳到一个地方去😎

又回来了

### 定义列表 --- 一些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 Cheat Sheet
- 推荐网址: EMOJIALL
键入表情符号简码 emoji shortcode
推荐插件：Markdowntools

示例：

去露营了！:tent:
开心开心！:joy:

效果：
去露营了！⛺️
开心开心！😂

你跳过来了

跳转回去

Walter Horatio Pater(1839-1894)，英国评论家、散文家，倡导一种精美的散文题材，对唯美主义有较大影响。 ↩︎
出自[阿根廷]豪尔赫·路易斯·博尔赫斯《另一个、同一个》 ↩︎

Poem_357

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
Markdown扩展语法（合并单元格、设置表格文字图片对齐方式、修改字体字号颜色、修改图片大小等）平台：Vscode

通过语法说明、示例和渲染效果详细介绍了Markdown的扩展语法。其包括合并单元格，设置对齐方式，修改字体、字号和颜色，修改图片大小和位置，添加脚注、任务列表和emoji表情等内容。
复制链接

扫一扫