Makdown语法合集

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
2. 文件转化
- 2.1. Markdown导出为Pdf
3. 普通文本编写规则
4. 引用的相关操作
5. 嵌入自定义的HTML内容
6. 高级使用技巧
- 6.1. 调用格式居中标题
7. 数学公式的引用

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. Markdown导出为Pdf

使用vscode中的markdown预览增强插件（Markdown Preview Enhanced），右击点击会弹出各种导出选项，都没有用！导出的不好看，而且很折腾，而且要安装prince,pandoc之类的，有但不实用，推荐按照下述方法进行：使用插件Markdown Preview Enhanced, 预览界面右击选择open in brower, 在浏览器按ctrl+p打印, 并保存为pdf就好了。

3. 普通文本编写规则

3.1. 标题使用样式

注意： #与字符之间要有一个空格，如下图

标题使用样式

3.2. 标题目录的生成

操作如下：

点在文本中需要插入目录的位置。
通过Ctrl + Shift + P，打开命令板，选择Markdown All in One 下的Create Table of Contents，并执行。

3.3. 自动添加章节号码

操作：通过Ctrl + Shift + P，打开命令板，选择Markdown All in One 下的添加/更新章节序号

3.4. 常规格式

中文空格：中间嵌入&emsp;，中文中文中文中文
英文空格：中间嵌入&ensp;，space key
加粗：文本左右各加两个“*”，如：加粗的文本，或者选中文本后按下Ctrl+B
倾斜：文本左右各加一个“*”，如：倾斜的文本，或者选中文本后按下Ctrl+I
既加粗又倾斜：结合加粗、倾斜的各自操作可知，在文本左右各加三个“*”即可，如：加粗倾斜的文本 ，这个操作结束了。
文本删除线：文本左右各加两个“~”，如：~~带删除线的文本~~
下划线：Markdown自身没有下划线，需要采用HTML的<u>标签实现，即写<u>下划线文本</u>，即可出现形如“下划线文本”的效果；
文本高亮/文本标记：高亮文本
文本上标：(x+3)^y
文本下标：(x+3)_y

具体设置的效果图如下所示：

常规文本设置

3.5. 段落间的操作

换行：文本后加两个空格，并按下Enter键，效果如下
新段：连续两个回车
分割线：在一行中使用三个或以上的减号（星号或底线效果一致），需要在两段之间加三个“*”，效果如下：

这是第一段

这是第二段

具体设置的效果图如下所示：

段落间的操作

3.6. 列表的建立

3.6.1. 有序列表

建立方法：序号（如：1,2,3……）后加空格,具体效果如下：

第一项内容
第二项内容
第三项内容
1. 子列表1
2. 子列表2
  1. 子子列表
  2. 哈哈哈哈

具体设置的效果图如下所示：

有序列表的添加

3.6.2. 无序列表

建立方法：星号（*）或短线（-）后加空格,具体效果如下：

第一项内容
第二项内容
第三项内容
- 子列表
- 子列表

第一项内容
第二项内容
第三项内容

3.6.3. 可选列表

可选列表（需要选择时里面加任意字符）
可选列表

具体设置的效果图如下所示：

可选列表的添加

4. 引用的相关操作

4.1. Emoji（小黄脸、表情符号）

Markdown语法中是支持emoji表情的。具体语法是:emoji:，例如，在md文件中输入:wink:，就会得到😉表情。不同的表情根据不同的Markdown编辑器会有不同的显示效果，有些表情也存在不支持的情况。更多常用的emoji表情可在下列参考网站查找：：

Github中的Markdown表情合集——仓库1，仓库2；
Emoji Cheat Sheet支持根据描述查找表情；
Emojipedia；

对于想自定义emoji的小伙伴，可以访问一下链接：

Emojimix.app：可以任意组合emoji的网站，十分可爱。朋友们可以发挥你们的想象力，生成一些离谱的emoji组合，并一键保存，再也不用担心emoji荒啦；

4.2. 正文中引入代码

操作方法：加入一个上漂字符"`";
文本之间引入代码int a = 66正文中引入代码

4.3. 代码块

操作方法：在三个上漂字符之间输入相应代码(即代码段前后各三个上漂)，首行的上漂后可写入代码的语言，以便于解析。

以下是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("未找到相关数据")

具体设置的效果图如下所示：

代码的引入

4.4. 引用文本

操作方法：行首加一个>和空格，如：

引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，引用别人文章中的句子，

具体设置的效果图如下所示：

引用文本

4.5. 超链接

操作如下：需要超链接的文本放入方括号[]内，链接地址放入圆括号[]内，且超链接的目标路径应空一行后再写。

加一个百度的超链接，如：百度、腾讯
链接比较多时可以采用引用的格式，如：百度和腾讯

说明：

正确的超链接引用，如：博文，语法为：[博文][博文]，这种将超链接放于[]内可正常跳转。

错误的超链接引用，如：博文，语法为：[博文](博文)，这种将超链接放于()内不可正常跳转。

超链接的语法为：[博文]: https://www.baidu.com。

超链接

4.6. 脚注的引用

操作方法：和超链接类似,引用一个脚注^[1]。

具体设置的效果图如下所示：

超链接

4.7. 自动链接

操作方法：将文本放入尖括号<>内，即可给文本自动加上链接，效果如下：http://stilig.link，实现超链接的代码如下：

<http://stilig.link>

4.8. Markdown内部的自引

通过[]()的形式实现，如前面普通文本编写规则所说...

引用样式说明：

[]中括号填写需要在页面上显示的内容

()小括号内部声明跳转目标标题，以#开头，标题题号如果包含.和下划线直接忽略掉，标题文本中如果有空格，使用-横杠符号替代，标题文本中的大写字母转换成小写

具体设置的效果图如下所示：

Markdown内部的自引

4.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>

4.10. 图片的插入

普通格式为![Alt](url)，其中，[Alt]中用来添加图片说明；(url)中是图片的本地/网络链接地址。也可采用HTML的格式进行图片的引用，见图片的输入中图片的输入一节。普通图片输入格式如下图：

测试图片

测试图片

输入的Markdown语法为：

![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/software/Markdown/Ref-picture/20240418005552.png)

具体设置的效果图如下所示：

Markdown内部的自引

4.10.1. 图片大小设置

直接在连接地址后添加形如=600x600(目标尺寸)的数字即可调整图片大小，如下：

测试图片

测试图片-调整大小

输入的Markdown语法为：

![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/software/Markdown/Ref-picture/20240418005552.png =300x90)

说明：

等号=前面需要有一个空格

带尺寸的图片：=600x600

宽度确定高度等比例的图片：=600x

高度确定宽度等比例的图片：=x600

4.10.2. 调整对齐方式

若需要调整对齐方式，需要在图片链接地址后面添加指令#pic_center，该命令的位置在指定尺寸的指令前面。

测试图片

测试图片-调整对齐方式和大小

输入的Markdown语法为：

![测试图片](https://raw.githubusercontent.com/zpy1160390580/ybj-PicGo-picture-bed/main/images/software/Markdown/Ref-picture/20240418005552.png#pic_center =300x90)

说明：

#前面不需要空格，=前面需要有一个空格;

居中对齐：#pic_center

靠左对齐：#pic_left

靠右对齐：#pic_right

5. 嵌入自定义的HTML内容

参考：Markdown扩展语法——HTML（合并单元格、对齐方式、修改字体字号颜色、修改图片大小等）

5.1. 常用的HTML标签

5.1.1. ``标签——注释

操作：在源代码中写入的内容不在正文中显示，采用如下代码：。

5.1.2. `<kbd>`标签——键盘文本

<kbd> 标签用于定义键盘文本，即将文本至于其中（<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>）即可出现的效果为：Ctrl/Command + Z。

5.1.3. `<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 在当前框架的上一层里打开链接

更多超链接设置方法详见博文。

属性值	语义
`_self`	默认方式，即在当前窗口打开链接
`_blank`	在一个全新的空白窗口打开链接
`_top`	在顶层框架中打开链接
`_parent`	在当前框架的上一层里打开链接

5.2. 文本中字体的设置

字体格式设置：结合HTML的语法（标签功能）可以自定义文本段落中的字体，如我现在想要一段红色特别标注的文字：字体颜色、大小、类型

其中参数color为字体颜色

其中参数size为字体大小

其中参数face为字体类型

下划线：代码为<u>下划线</u>，效果为：下划线

文本居中显示：代码为<center>居中</center>，效果为：

居中

具体设置的效果图如下所示：

HTML格式的文本中字体的设置

逐渐显示的文字：通过Readme Typing SVG网页(项目地址)进行设置，效果如下：

Typing SVG
逐渐显示的文字

5.3. `HTML`标签制作合并单元格的表格

更多表格设置方法详见CSDN的博文——Markdown扩展语法。

5.3.1. 基本语法

Markdown本身不提供合并单元格的语法，但支持HTML标记语言，所以我们可以通过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>。

5.3.2. 对齐方式

通过HTML语言设置表格或单元格内容的对齐方式（左对齐、居中、右对齐）,常用到的标签属性如下所示：

HTML对齐表格的属性

符号	功能
align=""	(属性)定义元素水平对齐方式
valign=""	(属性)定义元素垂直对齐方式
left	左对齐
center	居中对齐
right	右对齐
top	顶端对齐
middle	垂直居中
bottom	底端对齐

说明：

表格使用水平对齐符号align设置其在网页中居左、居中或居右显示。单元格内文本可使用水平/垂直对齐align/valign设置其对齐方式；

在对齐符号的双引号内填写对齐方式，两种对齐符号之间添加一个空格；如：align="center" valign="center"

对齐语句填写在要定义的开始符号（<table>、<tr>或<td>）中

在<table>中添加定义，控制整个表格的对齐方式；

在<tr>中添加定义，控制一行的对齐方式；

在<tb>中添加定义，控制一个单元格的对齐方式

5.3.3. 整体制作效果

制作的表格如下所示：

HTML标签制作的表格

表头
单元格	单元格	单元格
单元格	合并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>

5.4. 特殊要求

换行符号（代码<br>）：这是第一段
这是第二段
分割线符（代码<hr>）：第一段文本

第二段文本

5.5. 代码块的隐藏

当代码块过程，影响阅读体验时，可采用此语法进行代码块的隐藏

代码在此（点击查看）

dsfsdfsfsdfsdfsdfsdf sdfssdfsdfsdfsdfsdf sdfssdfsdfsdfsdd

具体设置的效果图如下所示：

HTML格式的文本中字体的设置

用到的代码如下

<details>
<summary><font color=blue>代码在此（点击查看）</font></summary>
<pre><code>

dsfsdfsfsdfsdfsdfsdf
sdfssdfsdfsdfsdfsdf
sdfssdfsdfsdfsdd

</code></pre>
</details>

5.6. 图片的输入

整张图片嵌入：

通过使用HTML语法的<img>标签更改图片尺寸(在这个标签内支持设定宽度、高度、对齐方式等属性)；<center>可以设置图片的对齐属性；

5.6.1. 图片大小的调整

通过<img>标签内的长宽属性进行设置，说明如下：

<img>标签内长宽属性的说明：

高度确定宽度等比例的图片，只要指定：height = “600”；

宽度确定高度等比例的图片，只要指定：width = “600”；

长宽属性后面的数值可以是具体的尺寸大小（如：width = “600”，height = “600”），也以写成百分比的形式（如：width = “60%”）。

5.6.2. 图片对齐方式调整

通过在<img>标签内添加align=“center”属性修改图片的对齐方式，说明如下：

<img>标签对齐方式属性的说明：

居中对齐：align = “middle”；

靠左对齐：align = “left”；

靠右对齐：align = “right”；

虽然对齐这种设置比较简单，但很懂编辑器都没有效果。最好还是采用HTML对齐标签的方法，将<img>标签包裹在<center>……</center>标签内使用，可以实现更多、更好的效果。

5.6.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>


<!--  嵌入带超链接的图片：  --><br>
<p align="center">
  <a href="******">      <!--    -->
    <img src="" width="60%"></a>
</p>

5.7. 嵌入视频

使用iframe标签，更改其中src对应bilibili视频的aid和cid，组装新的HTML源码，即可在文章内嵌入bilibili视频，其中各参数说明见下表：

视频外链HTML参数说明

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.8. markdown 实现页内跳转

5.8.1. 方法1：

先确定一个跳转目的地A，并设定id。然后在其他地方B加上链接入口，即可实现从B转到A

<!-- 目的地A为Hello Word 语句 id为jump-->
<span id="jump">Hello World</span>
 
<!-- 跳转入口为入口-->
 
[入口](#jump)

5.8.2. 方法2: 借助HTML语法实现

标记处：
<a href ="#id"> 跳转文首</a>

跳转此处
<div id="id"></div>

6. 高级使用技巧

6.1. 调用格式居中标题

书写格式如下：

🏷️ 日志

7. 数学公式的引用

7.1. 一般规则

公式中换行采用两个斜杠\\，有时公式的源代码中多输入一个\是为了使用转义字符的功能。

7.2. 行内公式

操作：左右各一个美元符号$，效果如：$ \sin 2x = 2\cos x \sin x $，结束了。

7.3. 公式块

7.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} \]

具体设置的效果图如下所示：

公式块的书写

7.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扩展语法一文。

这个是脚注 ↩︎

posted @ 2024-05-10 20:46 yibeijiu 阅读(195) 评论(0) 收藏举报

刷新页面返回顶部

一杯酒

Makdown语法合集

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

2. 文件转化

2.1. Markdown导出为Pdf

3. 普通文本编写规则

3.1. 标题使用样式

3.2. 标题目录的生成

3.3. 自动添加章节号码

3.4. 常规格式

3.5. 段落间的操作

3.6. 列表的建立

3.6.1. 有序列表

3.6.2. 无序列表

3.6.3. 可选列表

4. 引用的相关操作

4.1. Emoji（小黄脸、表情符号）

4.2. 正文中引入代码

4.3. 代码块

4.4. 引用文本

4.5. 超链接

4.6. 脚注的引用

4.7. 自动链接

4.8. Markdown内部的自引

4.9. 表格的插入

4.10. 图片的插入

4.10.1. 图片大小设置

4.10.2. 调整对齐方式

5. 嵌入自定义的HTML内容

5.1. 常用的HTML标签

5.1.1. 标签——注释

5.1.2. <kbd>标签——键盘文本

5.1.3. <a>标签——超链接

5.2. 文本中字体的设置

5.3. HTML标签制作合并单元格的表格

5.3.1. 基本语法

5.3.2. 对齐方式

5.3.3. 整体制作效果

5.4. 特殊要求

5.5. 代码块的隐藏

5.6. 图片的输入

5.6.1. 图片大小的调整

5.6.2. 图片对齐方式调整

5.6.3. 关于添加图片的总说明

5.7. 嵌入视频

5.8. markdown 实现页内跳转

5.8.1. 方法1：

5.8.2. 方法2: 借助HTML语法实现

6. 高级使用技巧

6.1. 调用格式居中标题

🏷️ 日志

7. 数学公式的引用

7.1. 一般规则

7.2. 行内公式

7.3. 公式块

7.3.1. 公式的书写

7.3.2. 特殊符号的表示

公告

1. `Markdown`使用平台

1.1. `VS Code` 平台

1.1.2. `Markdown`使用的插件安装

1.1.2.1. `Markdown All in On`

1.1.2.2. `Markdown Preview Enhanced`

5.1.1. ``标签——注释

5.1.2. `<kbd>`标签——键盘文本

5.1.3. `<a>`标签——超链接

5.3. `HTML`标签制作合并单元格的表格