目录页
- 1.
Markdown
使用平台- 1.1.
VS Code
平台- 1.1.1. 安装链接
- 1.1.2.
Markdown
使用的插件安装- 1.1.2.1.
Markdown All in On
- 1.1.2.2.
Markdown Preview Enhanced
- 1.1.2.1.
- 1.1.
- 2. 普通文本编写规则
- 2.1. 标题使用样式
- 2.2. 标题目录的生成
- 2.3. 自动添加章节号码
- 2.4. 常规格式
- 2.5. 段落间的操作
- 2.6. 列表的建立
- 2.6.1. 有序列表
- 2.6.2. 无序列表
- 2.6.3. 可选列表
- 3. 引用的相关操作
- 3.1. 正文中引入代码
- 3.2. 代码块
- 3.3. 引用文本
- 3.4. 超链接
- 3.5. 脚注的引用
- 3.6. 自动链接
- 3.7. Markdown内部的自引
- 3.8. 小表情图标的插入
- 3.9. 表格的插入
- 3.10. 图片的插入
- 3.10.1. 图片大小设置
- 3.10.2. 调整对齐方式
- 4. 嵌入自定义的HTML内容
- 4.1. 注释
- 4.2. 超链接(hyperlink)
- 4.2.1.
a
标签简介
- 4.2.1.
- 4.3. 文本中字体的设置
- 4.4.
HTML
标签制作合并单元格的表格- 4.4.1. 基本语法
- 4.4.2. 对齐方式
- 4.4.3. 整体制作效果
- 4.5. 特殊要求
- 4.6. 代码块的隐藏
- 4.7. 图片的输入
- 4.7.1. 图片大小的调整
- 4.7.2. 图片对齐方式调整
- 4.7.3. 关于添加图片的总说明
- 4.8. 嵌入视频
- 5. 数学公式的引用
- 5.1. 一般规则
- 5.2. 行内公式
- 5.3. 公式块
- 5.3.1. 公式的书写
- 5.3.2. 特殊符号的表示
1. Markdown
使用平台
1.1. VS Code
平台
1.1.1. 安装链接
在VSCode软件官网下载安装包,完成软件的安装;
1.1.2. Markdown
使用的插件安装
1.1.2.1. Markdown All in On
1.1.2.2. Markdown Preview Enhanced
2. 普通文本编写规则
2.1. 标题使用样式
注意: #
与字符之间要有一个空格,如下图
标题使用样式
2.2. 标题目录的生成
操作如下:
- 点在文本中需要插入目录的位置。
- 通过
Ctrl + Shift + P
,打开命令板,选择Markdown All in One
下的Create Table of Contents
,并执行。
2.3. 自动添加章节号码
操作:通过Ctrl + Shift + P
,打开命令板,选择Markdown All in One
下的添加/更新章节序号
2.4. 常规格式
中文空格:中间嵌入 
,中文中文 中文中文
英文空格:中间嵌入 
,space key
加粗:文本左右各加两个“*”,如:加粗的文本,或者选中文本后按下Ctrl+B
倾斜:文本左右各加一个“*”,如:倾斜的文本,或者选中文本后按下Ctrl+I
既加粗又倾斜:结合加粗、倾斜的各自操作可知,在文本左右各加三个“*”即可,如:加粗倾斜的文本 ,这个操作结束了。
文本删除线:文本左右各加两个“~”,如:带删除线的文本
文本高亮:高亮文本
文本上标:(x+3)y
文本下标:(x+3)y
具体设置的效果图如下所示:
常规文本设置
2.5. 段落间的操作
换行:文本后加两个空格,并按下Enter键,效果如下
新段:连续两个回车
分割线:在一行中使用三个或以上的减号(星号或底线效果一致),需要在两段之间加三个“*”,效果如下:
这是第一段
这是第二段
具体设置的效果图如下所示:
段落间的操作
2.6. 列表的建立
2.6.1. 有序列表
建立方法:序号(如:1,2,3……)后加空格,具体效果如下:
- 第一项内容
- 第二项内容
- 第三项内容
- 子列表1
- 子列表2
- 子子列表
- 哈哈哈哈
具体设置的效果图如下所示:
有序列表的添加
2.6.2. 无序列表
建立方法:星号(*)或短线(-)后加空格,具体效果如下:
- 第一项内容
- 第二项内容
- 第三项内容
- 子列表
- 子列表
- 第一项内容
- 第二项内容
- 第三项内容
2.6.3. 可选列表
具体设置的效果图如下所示:
可选列表的添加
3. 引用的相关操作
3.1. 正文中引入代码
操作方法:加入一个上漂字符"`";
文本之间引入代码int a = 66
正文中引入代码
3.2. 代码块
操作方法:在三个上漂字符之间输入相应代码(即代码段前后各三个上漂),首行的上漂后可写入代码的语言,以便于解析。
以下是java代码:
public static void main(String[] args) {int a =666; //使用等号进行赋值运算
}
以下是Python代码:
if not os.path.exists(data_save_path): # 确保目标目录存在os.makedirs(data_save_path)print("未找到相关数据")
具体设置的效果图如下所示:
代码的引入
3.3. 引用文本
操作方法:行首加一个>
和空格
,如:
引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,引用别人文章中的句子,
具体设置的效果图如下所示:
引用文本
3.4. 超链接
操作如下:需要超链接的文本放入方括号[]
内,链接地址放入圆括号[]
内,且超链接的目标路径应空一行后再写。
- 加一个百度的超链接,如:百度、腾讯
- 链接比较多时可以采用引用的格式,如:百度和腾讯
说明:
- 正确的超链接引用,如:博文,语法为:
[博文][博文]
,这种将超链接放于[]
内可正常跳转。- 错误的超链接引用,如:博文,语法为:
[博文](博文)
,这种将超链接放于()
内不可正常跳转。- 超链接的语法为:
[博文]: https://www.baidu.com
。
超链接
3.5. 脚注的引用
操作方法:和超链接类似,引用一个脚注[1]。
具体设置的效果图如下所示:
超链接
3.6. 自动链接
操作方法:将文本放入尖括号<>
内,即可给文本自动加上链接,效果如下:http://stilig.link,实现超链接的代码如下:
<http://stilig.link>
3.7. Markdown内部的自引
通过[]()
的形式实现,如前面普通文本编写规则所说...
引用样式说明:
[]
中括号填写需要在页面上显示的内容()
小括号内部声明跳转目标标题, 以#
开头,标题题号如果包含.和下划线直接忽略掉,标题文本中如果有空格,使用-
横杠符号替代,标题文本中的大写字母转换成小写
具体设置的效果图如下所示:
Markdown内部的自引
3.8. 小表情图标的插入
可按一下方法将表情符号添加到Markdown
文件中:
- 将表情符号复制并粘贴到Markdown格式的文本中;
说明:
大多数情况下,可以简单地从 Emojipedia 等网站来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。
3.9. 表格的插入
操作说明:主要是采用“|”和“-”做好分割,制作效果如下,
表1 示例表格
表头 | 表头 | 表头 |
---|---|---|
aa | bb | cc |
aa | bb | cc |
aa | bb | cc |
关于表格的第二行具体含义:
-
一个即可,但为了文本对齐因此多加了几个- 文字默认靠左
- 对齐方式:在第二行写入相应的对齐方式,“:”在左侧表示左对齐,“:”在右侧表示右对齐,两边都有表示居中
具体设置的代码如下所示:
<!-- 让表格居中显示的风格 -->
<style>
.center{ width: auto; display: table; margin-left: auto; margin-right: auto;}
</style>
<!-- 这里就是一个完整的表格代码 --><p align="center"><font face="微软雅黑" size=5 >表1 示例表格</font>
</p> <div class="center">|表头|表头|表头|
|:--: |--:|:-- |
| aa |bb | cc |
| aa |bb | cc |
| aa |bb | cc |</div>
3.10. 图片的插入
普通格式为![Alt](url)
,其中,[Alt]
中用来添加图片说明;(url)
中是图片的本地/网络链接地址。也可采用HTML
的格式进行图片的引用,见图片的输入中图片的输入一节。普通图片输入格式如下图:
输入的Markdown语法为:
![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/test/20240418005552.png)
具体设置的效果图如下所示:
Markdown内部的自引
3.10.1. 图片大小设置
直接在连接地址后添加形如=600x600
(目标尺寸)的数字即可调整图片大小,如下:
输入的Markdown语法为:
![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/test/20240418005552.png =600x600)
说明:
- 等号
=
前面需要有一个空格- 带尺寸的图片:
=600x600
- 宽度确定高度等比例的图片:
=600x
- 高度确定宽度等比例的图片:
=x600
3.10.2. 调整对齐方式
若需要调整对齐方式,需要在图片链接地址后面添加指令#pic_center
,该命令的位置在指定尺寸的指令前面。
输入的Markdown语法为:
![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/test/20240418005552.png#pic_center =600x600)
说明:
#
前面不需要空格,=
前面需要有一个空格;- 居中对齐:
#pic_center
- 靠左对齐:
#pic_left
- 靠右对齐:
#pic_right
4. 嵌入自定义的HTML内容
参考:Markdown扩展语法——HTML(合并单元格、对齐方式、修改字体字号颜色、修改图片大小等)
4.1. 注释
操作:在源代码中写入的内容不在正文中显示,采用如下代码:<!-- 这是注释,这里可以随便写 -->
。
4.2. 超链接(hyperlink)
4.2.1. a
标签简介
- 在HTML中,超链接使用
a
标签来表示。a
标签是非常常见的而简单的标签。语法:<a href="http://www.baidu.com">百度一下</a>
,效果:百度一下。href
属性表示链接的地址,也就是点击超链接之后跳转的地址。 a
标签的target
属性,在创建网页中,默认情况下超链接在原来的浏览器窗口打开,但是我们可以使用target
属性来控制目标窗口的打开方式。语法为<a herf="链接地址" target="目标窗口的打开方式">超链接文字</a>
,如在新网页中打开百度(源代码为:<a href="http://www.baidu.com" target="_blank">百度</a>
),a
标签的target
属性的取值如下:a
标签的target
属性的取值如下:属性值 语义 _self
默认方式,即在当前窗口打开链接 _blank
在一个全新的空白窗口打开链接 _top
在顶层框架中打开链接 _parent
在当前框架的上一层里打开链接 - 更多超链接设置方法详见博文。
4.3. 文本中字体的设置
字体格式设置:结合HTML的语法(标签功能)可以自定义文本段落中的字体,如我现在想要一段红色特别标注的文字:字体颜色、大小、类型
- 其中参数
color
为字体颜色- 其中参数
size
为字体大小- 其中参数
face
为字体类型
下划线:代码为<u>下划线</u>
,效果为:下划线
文本居中显示:代码为<center>居中</center>
,效果为:
具体设置的效果图如下所示:
HTML格式的文本中字体的设置
4.4. HTML
标签制作合并单元格的表格
更多表格设置方法详见CSDN的博文——Markdown扩展语法。
4.4.1. 基本语法
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>
- 当文本元素超过两个时,元素之间另起一行,如下:
<tr> <td>text here</td><td>text here</td><td>text here</td> </tr>
- 合并行/列属于单元格的属性,要在
<td></td>
内部书写,n
为要合并的单元格数量。语法为<td rowspan="n">text here</td>
。
4.4.2. 对齐方式
通过HTML
语言设置表格或单元格内容的对齐方式(左对齐、居中、右对齐),常用到的标签属性如下所示:
符号 | 功能 |
---|---|
align="" | (属性)定义元素水平对齐方式 |
valign="" | (属性)定义元素垂直对齐方式 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
top | 顶端对齐 |
middle | 垂直居中 |
bottom | 底端对齐 |
说明:
- 表格使用水平对齐符号
align
设置其在网页中居左、居中或居右显示。单元格内文本可使用水平/垂直对齐align
/valign
设置其对齐方式;- 在对齐符号的双引号内填写对齐方式,两种对齐符号之间添加一个空格;如:
align="center" valign="center"
- 对齐语句填写在要定义的开始符号(
<table>
、<tr>
或<td>
)中
- 在
<table>
中添加定义,控制整个表格的对齐方式;- 在
<tr>
中添加定义,控制一行的对齐方式;- 在
<tb>
中添加定义,控制一个单元格的对齐方式
4.4.3. 整体制作效果
制作的表格如下所示:
表头 | ||
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 | 合并1 | 合并2 |
单元格 | ||
单元格 | ||
合并 | 单元格 | 单元格 |
单元格 | 单元格 |
上述表格由以下代码生成:
<style>
.center{ width: auto; display: table; margin-left: auto; margin-right: auto;}
</style>
<!-- 这里就是一个完整的表格代码 -->
<center> HTML标签制作的表格</center>
<div class="center"><table align="center" valign="center"> <!-- 表格开始 --><tr style="background-color: #eff3f5;" ><th colspan="3" style="text-align:center">表头</th></tr ><tr style="background-color: #f7f7f7;" align="center" valign="center"><td>单元格</td><td>单元格</td><td>单元格</td> </tr><tr align="center" valign="center"><td>单元格</td><td rowspan="3">合并1</td><td rowspan="3">合并2</td></tr><tr align="center" valign="center"><td >单元格</td></tr><tr align="center" valign="center"><td >单元格</td></tr><tr align="center" valign="center"><td rowspan="2" align="center" valign="center">合并</td><td>单元格</td><td>单元格</td></tr><tr align="center" valign="center"><td>单元格</td><td>单元格</td></tr></table>
</div>
4.5. 特殊要求
换行符号(代码<br>
):这是第一段
这是第二段
分割线符(代码<hr>
):第一段文本
第二段文本
4.6. 代码块的隐藏
当代码块过程,影响阅读体验时,可采用此语法进行代码块的隐藏
代码在此(点击查看)
dsfsdfsfsdfsdfsdfsdf
sdfssdfsdfsdfsdfsdf
sdfssdfsdfsdfsdd
具体设置的效果图如下所示:
HTML格式的文本中字体的设置
用到的代码如下
<details>
<summary><font color=blue>代码在此(点击查看)</font></summary>
<pre><code>dsfsdfsfsdfsdfsdfsdf
sdfssdfsdfsdfsdfsdf
sdfssdfsdfsdfsdd</code></pre>
</details>
4.7. 图片的输入
整张图片嵌入:
通过使用HTML
语法的<img>
标签更改图片尺寸(在这个标签内支持设定宽度、高度、对齐方式等属性);<center>
可以设置图片的对齐属性;
4.7.1. 图片大小的调整
通过<img>
标签内的长宽
属性进行设置,说明如下:
<img>
标签内长宽属性
的说明:
- 高度确定宽度等比例的图片,只要指定:
height = “600”
;- 宽度确定高度等比例的图片,只要指定:
width = “600”
;- 长宽属性后面的数值可以是具体的尺寸大小(如:
width = “600”,height = “600”
),也以写成百分比的形式(如:width = “60%”
)。
4.7.2. 图片对齐方式调整
通过在<img>
标签内添加align=“center”
属性修改图片的对齐方式,说明如下:
<img>
标签对齐方式属性
的说明:
- 居中对齐:
align = “middle”
;- 靠左对齐:
align = “left”
;- 靠右对齐:
align = “right”
;
虽然对齐这种设置比较简单,但很懂编辑器都没有效果。最好还是采用HTML对齐标签的方法,将<img>
标签包裹在<center>……</center>
标签内使用,可以实现更多、更好的效果。
4.7.3. 关于添加图片的总说明
关于这个用法的说明:
- 这实际是
html
的写法,其中src
填图片url
width
填所要显示的图片与原图的大小比例- 而我们在图片的下一行写上的文字实际就是题注
- 被
<center>...</center>
框住的图片和文字都居中
文本内部嵌入(附加格式修改):采用HTML的相应语法进行操作,修改图片的长宽,如:
整张图片嵌入一行:
这里可以输入图片的标题
代码内容为:
文本内部嵌入(附加格式修改):采用HTML的相应语法进行操作,修改图片的长宽,如:
<img src="https://img1.cfw.cn/upload/art_pic/2015/09/14/6c44cecc-be7e-4bb4-bb69-af1d6f093383.jpg"style="width:50px; heigh:3px">整张图片嵌入一行:<br>
<center> <img src ="https://img1.cfw.cn/upload/art_pic/2015/09/14/6c44cecc-be7e-4bb4-bb69-af1d6f093383.jpg"width="30%"><br>这里可以输入图片的标题
</center>
4.8. 嵌入视频
使用iframe
标签,更改其中src
对应bilibili
视频的aid
和cid
,组装新的HTML
源码,即可在文章内嵌入bilibili
视频,其中各参数说明见下表:
key | 说明 |
---|---|
aid | 视频ID 就是B站的 avxxxx 后面的数字 |
cid | 应该是客户端id, clientId 的缩写(推测的, 不一定准确) 经过测试, 这个字段不填也没关系 |
page | 第几个视频, 起始下标为 1 (默认值也是为1) 就是B站视频, 选集里的, 第几个视频 |
as_wide | 是否宽屏 1: 宽屏, 0: 小屏 |
high_quality | 是否高清 1: 高清, 0: 最低视频质量(默认) 默认或者 high_quality=0 是最低 360p high_quality=1 是最高1080p |
danmaku | 是否开启弹幕 1: 开启(默认), 0: 关闭 |
视频播放效果如下:
原始代码:
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>
参考:
王陸博主的关于博客园内嵌入bilibili视频一文;
5. 数学公式的引用
5.1. 一般规则
公式中换行采用两个斜杠\\
,有时公式的源代码中多输入一个\
是为了使用转义字符
的功能。
5.2. 行内公式
操作:左右各一个美元符号$
,效果如:$ \sin 2x = 2\cos x \sin x $,结束了。
5.3. 公式块
5.3.1. 公式的书写
操作:上下各两个美元符号$
,效果如:
$$
分式: \frac{3+y}{4-x} \
上下标:x_2 (下标)\
y^3 (上标)\
d_2^3 (上下标) \
普通公式:x+y=10 \
根式: \sqrt[3]{(x+30)} \
$$
公式标签:在公式后写入\tag{num}
$$
E_{\rm k}=\frac{1}{2}m v^2 \tag{1.1}
$$
具体设置的效果图如下所示:
公式块的书写
5.3.2. 特殊符号的表示
$$
\not= 不等于\
\approx 约等于 \
\leq 小于等于\
\geq 大于等于\
\times 乘号\
\div 除号\
\pm 正负号\
\sum 求和符号\
\prod 累乘\
\coprod 累除\
\overline{1+2+3} 上划线\
180^\circ 180° \
\sin(\pi+2x) sin
$$
参考:
- Markdown官方教程。
- CSDN中
Poem_357
博主的Markdown扩展语法一文。
这个是脚注 ↩︎