Markdown 通用总结 version 2 - Jan 1st, 2024

1.1. Document and Author Information

File: Markdown通用总结.md
Project: Markdown通用总结
File Created: Friday, 1st July 2022 7:13:42 am
Author: Hanlin Gu ([email protected])

Last Modified: Tuesday, 2nd January 2024 11:10:12 am
Modified By: HG ([email protected]>)

1.2. 文献引用

推荐使用第1种;第2种方法使用html源码，在VSCode中无法成功编译；第3和4种方法需要看markdown渲染器的支持程度，不一定普适，但在CSDN中可以使用。

1.2.1. 方法1: 推荐使用

reference
https://blog.csdn.net/u012349679/article/details/103815049

基本用法：

<!-- 正文中引用格式 -->
文章正文需要引用的文章[<sup>n</sup>](#refer-anchor-n)

<!-- 文末参考格式 -->
参考

<!-- 添加锚点 -->
<div id="refer-anchor-n"></div>
<!-- 添加引用内容 -->
[n] 引用内容

源码：

**Markdown 增加文献引用**:

这边文章是介绍如何在 Markdown 中增加文献引用。

百度学术[<sup>1</sup>](#refer-anchor-1)

论文[<sup>2</sup>](#refer-anchor-2)

**参考**:

<div id="refer-anchor-1"></div>

[1] [百度学术](http://xueshu.baidu.com/)

<div id="refer-anchor-2"></div>

[2] 论文引用信息

效果显示：

Markdown 增加文献引用:

这边文章是介绍如何在 Markdown 中增加文献引用。

百度学术¹

论文²

参考:

[1] 百度学术

[2] 论文引用信息

1.2.2. 方法2：html，可引相同序号，手动编号

Reference
https://blog.csdn.net/qq_36667170/article/details/121656279

使用html编写，可以索引到同样的序号，但需要手动编上序号。

源码：

这是一条引用<sup><a href="#ref1">1</a></sup>
这是一条引用<sup><a href="#ref2">2</a></sup>
这是一条引用<sup><a href="#ref1">1</a></sup>
这是一条引用<sup><a href="#ref3">3</a></sup>

1. <p name = "ref1">test</p>
2. <a name = "ref2" href="https://lolitasian.blog.csdn.net/article/details/121656279">https://lolitasian.blog.csdn.net/article/details/121656279</a>
3. <br><img name = "ref3" src="/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvYjY0MDZkYjRkMzI3ZDNkZmQxMGUxODNjMTJmOTFlM2IucG5n" alt="image not found"></img>

效果展示：

这是一条引用¹
这是一条引用²
这是一条引用¹
这是一条引用³

说明：

html大多是成对存在的，所以记得加上后标签</xxx>，  是特例，不用后标签。
 是上标
<a> 是超链接，href 是指向的位置
 是段落，当然也可以用什么  之类的你喜欢就好
<img>是照片，src 是图片的地址，alt 是无法读取图片时显示的内容

1.2.3. 方法3：成对出现，可引相同序号，手动编号

[^n]与[^n]:成对出现，可以引相同序号，但需要手动编号。

注意：这种方法，在VSCode编译器中，无法实现引用相同序号。

源码:

这是一条引用[^1]
这是一条引用[^2]
这是一条引用[^1]
这是一条引用[^3]
[^1]:https://lolitasian.blog.csdn.net/article/details/121656279
[^2]:[https://lolitasian.blog.csdn.net/article/details/121656279](https://lolitasian.blog.csdn.net/article/details/121656279)
[^3]:<br>![在这里插入图片描述](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvYjY0MDZkYjRkMzI3ZDNkZmQxMGUxODNjMTJmOTFlM2IucG5n)

效果显示：

这是一条引用¹
这是一条引用²
这是一条引用¹
这是一条引用³

1.2.4. 方法4：无法引用相同序号，可自动排序

^[引用内容]

源码:

这是一条引用^[https://lolitasian.blog.csdn.net/article/details/121656279]
这是一条引用^[[https://lolitasian.blog.csdn.net/article/details/121656279](https://lolitasian.blog.csdn.net/article/details/121656279)] 
这是一条引用^[<br>![在这里插入图片描述](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvYjY0MDZkYjRkMzI3ZDNkZmQxMGUxODNjMTJmOTFlM2IucG5n)]

效果显示：

这是一条引用⁴
这是一条引用⁵
这是一条引用⁶

1.3. 公式 Equation

普通公式输入只需要在所需处添加 $ $ 即可，但无法居中，例如：

$f(x) = w x +b$

$f (x) = w x + b$

1.3.1. 公式居中

如果需要居中公式，则需要添加$$ $$即可，如

$$
f(x) = w x + b
$$

$f (x) = w x + b$

1.4. 插图图片 Inset Image

借用HTML的语法，来实现图片的居中和大小定义。

为了使用的方便，可以在snippet中添加代码块，以实现快速调用。如何添加snippet参考，前往章节代码块设置 snippet setting查看如何使用。

1.4.1. 图片居中

将以下address_of_the_image修改为对应的图片所存储的位置，可以使本机地址，也可以是图片的网页地址。

调用snippet时,直接在Markdown文本中输入prefix。

1.4.1.1. 指定宽度

实现图片居中，指定宽度为75%：

1. Markdown

<center><img src="address_of_the_image" style="width:75%"></center>

2. Snippet设置

使用时直接在Markdown文本中输入prefix，本例中为imgCntWidth。

// insert an "image" with center alignment and width equals 75% of the page width
"image Center width": {
 "prefix": "imgCntWidth",
 "body": [
  "<center><img src=\"$1\"style=\"width:75%\"></center>",
  "",
  "$2"
 ],
 "description": "insert a centered image with width as 75%"
},

1.4.1.2. 指定高度

实现图片居中，指定高度为300 px：

1. Markdown

<center><img src="address_of_the_image" style="height:300px"></center>

2. Snippet设置

使用时直接在Markdown文本中输入prefix，本例中为imgCntHeight。

// insert an "image" with center alignment and height equals 300px, the whole
 // page height is around 1000px
"image Center height": {
 "prefix": "imgCntHeight",
 "body": [
  "<center><img src=\"$1\" style=\"height:300px\"></center>",
  "",
  "$2"
 ],
 "description": "insert a centered image with height as 300px"
},

1.4.2. 图片并列

1.4.2.1. 两张图片并列

实现图片左右合并，宽度为50%与50%，高度为500 px：

1. Markdown

<div style="display:flex;">
  <img src="address_of_image1" style="width:50%;height:500px">
  <img src="address_of_image2" style="width:50%;height:500px">
</div>

2. Snippet

使用时直接在Markdown文本中输入prefix，本例中为imgTwo。

// insert two images that is aligned in markdown
// each image is 50% width and 500px height
"image aligned two": {
 "prefix": "imgTwo",
 "body": [
  "<div style=\"display:flex;\">",
  "\t<img src=\"$1\" style=\"width:50%;height:500px\">",
  "\t<img src=\"$2\" style=\"width:50%;height:500px\">",
  "</div>",
  "\n$3"
 ]
},

1.4.2.2. 两张图片并列并居中

Markdown不支持将两张图片并排排列并居中，但您可以使用HTML和CSS来实现此效果。实现两张图片并排排列、居中对齐的示例代码：

1. Markdown

<div style="display:flex; justify-content:center;">
  <img src="image1.jpg" style="margin-right: 10px; flex: 1;">
  <img src="image2.jpg" style="margin-left: 10px; flex: 1;">
</div>

该代码将两个<img>元素包含在一个<div>中，并使用CSS flexbox 布局来水平并排排列并放置在中心。margin-right和margin-left属性设置图像之间的间距，flex属性使图像元素的宽度自动调整以适应其容器的宽度。

2. Snippet

// insert two images that is aligned and centered in markdown
// each image is 35% width and 250px height
"image center aligned two": {
 "prefix": "imgCntTwo",
 "body": [
  "<div style=\"display:flex; justify-content:center\">",
  "\t<img src=\"$1\" style=\"width:35%;height:250px;margin-right: 10px;\">",
  "\t<img src=\"$2\" style=\"width:35%;height:250px;margin-left: 10px;\">",
  "</div>",
  "\n$3"
 ]
},

1.4.3. 图片居中并在图片下方插入题注

参考：
1. html里文字如何放在图片下方并且居中对齐？ - 南山行者的回答 - 知乎
https://www.zhihu.com/question/388703154/answer/1560421794

1. Markdown

<div class="box">
	<center>
		<div class="box-bg">
			<img src="图片地址" style="width:75%" alt="">
		</div>
		<div class="box-text">
			<p>题注文字</p>
		</div>
	</center>
</div>

2. Snippet设置

"image Center width": {
	"prefix": "imgCntWidth",
	"body": [
		"<div class=\"box\">",
		"\t<center>",
		"\t\t<div class=\"box-bg\">",
		"\t\t\t<img src=\"$1\" style=\"width:75%\" alt=\"\">",
		"\t\t</div>",
		"\t\t<div class=\"box-text\">",
		"\t\t\t<p>$2</p>",
		"\t\t</div>",
		"\t</center>",
		"</div>"
		"",
		"$3"
	],
	"description": "insert a centered image with width as 75%"
},

1.5. 插入表格 Insert Table

1.5.1. 表格整体居中

将插入的表格整体居中：

1. Markdown

<!-- 让表格居中显示的风格 -->
<style>
table
{
  margin:auto
}
</style>

2. Snippet

// insert an "table" with center alignment and width equals 75% of the page width
"table Center": {
 "prefix": "tabCenter",
 "body": [
  "<!-- 让表格居中显示的风格 -->",
  "<style>",
  "table",
  "{",
  "\tmargin:auto",
  "}",
  "</style>",
  "\n$1"
 ],
 "description": "insert a centered table"
},

1.5.2. 表格内换行

在要换行出添加 即可。

Markdown代码：

|姓名|爱好|
|--|--|
|张三|足球<br>篮球|
|李四|羽毛球<br>乒乓球|

姓名	爱好
张三	足球篮球
李四	羽毛球乒乓球

1.5.3. 单元格内文字位置调整

Markdown代码：

|标题一|标题二|标题三|标题四|
|- |:---|---:|:---:|
|居中|居左|居右|居中|
|居中|居左|居右|居中|
|单元格内换行<br>换行|单元格内换行<br>换行|单元格内换行<br>换行|单元格内换行<br>换行|

两竖线|中间为一个单元格，第二行为配置行，配置表格显示用，并不显示出来；

配置行内个列冒号:的位置决定该列对齐的位置：

居左 :--
居右 --:
居中 :--:

标题一	标题二	标题三	标题四
居中	居左	居右	居中
居中	居左	居右	居中
单元格内换行换行	单元格内换行换行	单元格内换行换行	单元格内换行换行

1.5.4. 复杂表格（合并表格）

markdown本身并不支持合并单元格，但是兼容html

<tr> </tr>:一行
<td> </td>:一列
<th> </th>:表头
必须先 tr 再 td

跨行合并：rowspan 跨列合并：colspan

1.5.4.1. 表头在上方

表头在上方
<table>
  <tr>
    <th>表头1</th>
    <th colspan=2>表头2</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
    <td rowspan=2>内容</td>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

表头1	表头2
内容	内容	内容
内容	内容	内容

1.5.4.2. 表头在左侧

<!-- 表头在左侧 -->
<table>
    <tr>
      <th>表头</th>
      <td colspan=2>内容</td>
    </tr>
    <tr>
      <th rowspan=2>表头</th>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
    </tr>
</table>

表头	内容
表头	内容	内容
表头	内容	内容

1.6. 文字内容编辑 Text Edition

1.6.1. 导出PDF时强制换页

在需要强制分页的地方插入以下代码可以实现导出pdf时的换页：

reference
https://blog.csdn.net/littleBlack2003/article/details/116093127

代码：

<div STYLE="page-break-after: always;"></div>

1.6.2. 正文中引用本文章节

[引用文字](#章节编号)

源码：

在markdown中设置文献参考，详细内容见章节[文献引用](#12-文献引用)

效果显示：

在markdown中设置文献参考，详细内容见章节文献引用

1.6.3. 注释

写作时通常会遇到需要隐藏部分内容，暂时不显示，此时可使用注释功能。

普通注释：选中需要该为注释内容后，使用ctrl + /

#### 标题
<!-- 注释 -->
正文

1.6.4. 显示时折叠内容

Reference
https://www.zhihu.com/question/284043845

<details>
<summary>点击查看详细内容</summary>
展开的内容
</details>

点击查看详细内容展开的内容 image not found

注意：在显示md文件时可以折叠，但是导出PDF后无法显示折叠内容。

1.7. 代码块设置 Snippet Setting

Markdown可以设置快速代码块，也就是可以使用prefix前置代号来快速输入一整块代码。

1.7.1. 方法

Open the markdown.json file

F1 $\rightarrow$ key in Snippets: Configure User Snippets and hit enter
$\rightarrow$ key in markdown.json

Revise the markdown.json file

Example:

"Image Center": {
  "prefix": "imgCenter",
  "body": [
   "<center><img src=\"$1\" style=\"width:75%\"></center>",
   "",
   "$2"
  ],
  "description": "insert a centered image with width as 75%"
 },

This is the snippet for centered image with width set to 75%. Let’s break down
the details.

The "Image Center" is the snippet name and it has attributions as "prefix",
"body", and "description".

The "prefix" is the name that you input in markdown file to call the code block.
The "body" is the code block itself. And "description" is for the reference
to understand what this snippet is for.

In the "body" section, $1 is the position of the cursor, $2 is the next
position using tab. $1, $2 for tab stops, $0 for the final cursor position,
and ${1:label}, ${2:another} for placeholders. Placeholders with the same
ids are connected.

1.7.2. 作者 Snippet Setting

{
	// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"keybd": {
		"prefix": "keybd",
		"body": [
			"<kbd></kbd>"
		]
	},
	// extension "markdown-pdf" output a page break
	"page break": {
		"prefix": "break",
		"body": [
			"<div style=\"page-break-after:always\"></div>"
		],
		"description": "Break a new page"
	},
	// insert an "image" with "caption", center alignment and width equals 95% of the page
	"image Caption Width": {
		"prefix": "imgCapWidth",
		"body": [
			"<figure>",
			"<img src=\"$1\" style=\"width:95%\" alt=\"image not found\">",
			"<figcaption>$2</figcaption>",
			"</figure>"
		]
	},
	// insert an "image" with "caption", center alignment and height equals 300px of the page
	"image Caption Height": {
		"prefix": "imgCapHeight",
		"body": [
			"<figure>",
			"<img src=\"$1\" style=\"height:300px\" alt=\"image not found\">",
			"<figcaption>$2</figcaption>",
			"</figure>"
		]
	},
	// insert an "image" with center alignment and width equals 95% of the page width
	// "image Center width": {
	// 	"prefix": "imgCntWidth",
	// 	"body": [
	// 		"<center><img src=\"$1\" style=\"width:75%\" alt=\"image not found\"></center>",
	// 		"",
	// 		"$2"
	// 	],
	// 	"description": "insert a centered image with width as 75%"
	// },
	"image Center width": {
		"prefix": "imgCntWidth",
		"body": [
			"<div class=\"box\">",
			"\t<center>",
			"\t\t<div class=\"box-bg\">",
			"\t\t\t<img src=\"$1\" style=\"width:75%\" alt=\"\">",
			"\t\t</div>",
			"\t\t<div class=\"box-text\">",
			"\t\t\t<p>$2</p>",
			"\t\t</div>",
			"\t</center>",
			"</div>"
			"",
			"$3"
		],
		"description": "insert a centered image with width as 75%"
	},
	// insert an "image" with center alignment and height equals 300px, the whole
	// page height is around 1000px
	"image Center height": {
		"prefix": "imgCntHeight",
		"body": [
			"<center><img src=\"$1\" style=\"height:300px\" alt=\"image not found\"></center>",
			"",
			"$2"
		],
		"description": "insert a centered image with height as 300px"
	},
	// insert two images that is aligned in markdown
	// each image is 50% width and 500px height
	"image aligned two": {
		"prefix": "imgTwo",
		"body": [
			"<div style=\"display:flex;\">",
			"\t<img src=\"$1\" style=\"width:50%;height:500px\" alt=\"image not found\">",
			"\t<img src=\"$2\" style=\"width:50%;height:500px\" alt=\"image not found\">",
			"</div>",
			"\n$3"
		]
	},
	// insert two images that is aligned and centered in markdown
	// each image is 30% width and 250px height
	"image center aligned two": {
		"prefix": "imgCntTwo",
		"body": [
			"<div style=\"display:flex; justify-content:center\">",
			"\t<img src=\"$1\" style=\"width:35%;height:250px;margin-right: 10px;\" alt=\"image not found\">",
			"\t<img src=\"$2\" style=\"width:35%;height:250px;margin-left: 10px;\" alt=\"image not found\">",
			"</div>",
			"\n$3"
		]
	},
	// insert an "table" with center alignment and width equals 75% of the page width
	"table Center": {
		"prefix": "tabCenter",
		"body": [
			"<!-- 让表格居中显示的风格 -->",
			"<style>",
			"table",
			"{",
			"\tmargin:auto",
			"}",
			"</style>",
			"\n$1"
		],
		"description": "insert a centered table"
	},
	// Insert a 'python" codeblock
	"code Python": {
		"prefix": "inPy",
		"body": [
			"```python",
			"$1",
			"```",
			"",
			"$2"
		],
		"description": "insert an empty python code block"
	},
	// Insert a "python" codeblock as input and a "script" codeblock as output
	"code Python with Output": {
		"prefix": "inPyScript",
		"body": [
			"```python",
			"$1",
			"```",
			"",
			"Output:",
			"",
			"```script",
			"$2",
			"```",
			"",
			"$3"
		],
		"description": "insert an empty python code block with output follows"
	},
	// Insert a "python" codeblock as input and output figure
	"code Python with Output Figure": {
		"prefix": "inPyFig",
		"body": [
			"```python",
			"$1",
			"```\n",
			"Output:\n",
			"<center><img src=\"$2\" style=\"width:95%\"></center>\n",
			"$3"
		],
		"description": "insert an empty python code block with output follows"
	},
	// insert a "shell" codeblock
	"code Shell": {
		"prefix": "inShell",
		"body": [
			"```shell",
			"$1",
			"```",
			"",
			"$2"
		],
		"description": "insert an empty shell code block"
	},
	//insert a "script" codeblock
	"code Script": {
		"prefix": "inScript",
		"body": [
			"```script",
			"$1",
			"```",
			"",
			"$2"
		],
		"description": "insert an empty script code block"
	},
	// insert a "html" codeblock
	"code HTML": {
		"prefix": "inHTML",
		"body": [
			"```html",
			"$1",
			"```",
			"",
			"$2"
		],
		"description": "insert a html codeblock"
	},
	// insert a "LaTeX" codeblock
	"code LaTeX": {
		"prefix": "inLaTeX",
		"body": [
			"```latex",
			"$1",
			"```",
			"",
			"$2"
		]
	},
	// insert a "json" codeblock
	"code json": {
		"prefix": "inJson",
		"body": [
			"```json",
			"$1",
			"```",
			"",
			"$2"
		]
	},
	// Insert a 'javascript" codeblock
	"code Java": {
		"prefix": "inJava",
		"body": [
			"```Java",
			"$1",
			"```",
			"",
			"$2"
		],
		"description": "insert an empty python code block"
	},
	// key in an right arrow
	"right arrow": {
		"prefix": "arrowR",
		"body": [
			"$\\rightarrow$"
		],
		"description": "insert a right arrow"
	},
	// color the text
	"color text": {
		"prefix": "colorTxt",
		"body": [
			"<span style=\"color:$1\">$2</span>"
		],
		"description": "input colored text in markdown"
	},
	"color and bold text": {
		"prefix": "colorBoldTxt",
		"body": [
			"<span style=\"color:$1\"><b>$2</b></span>"
		],
		"description": "input colored text in markdown"
	},
	// "math symbol": differentiation (not italic)
	"differentiate symbol": {
		"prefix": "diffSym",
		"body": [
			"\\mathrm{d} $1"
		],
		"description": "symbol of differentiation that is not italic"
	},
	// insert web links
	"insert websites": {
		"prefix": "inWeb",
		"body": [
			"[$2](<$1>)",
			"\n$3"
		]
	},
	// insert references
	"insert references":{
		"prefix": "inRef",
		"body":[
			"[<sup>$1</sup>](#refer-anchor-$2)\n",
			"<div id=\"refer-anchor-$3\"></div>\n"
			"[$4] $5"
		]
	},
	// Markdown All in One
	// omit a specific section
	"omit in toc":{
		"prefix": "omitTOC",
		"body":[
			"<!-- omit in toc -->\n"
		]
	},
	// export file from .md to others
	// Markdown All in One
	// md2html: title
	"md to html title":{
		"prefix": "htmlTitle",
		"body":[
			"<!-- title: $1 -->\n"
		]
	}
}

https://lolitasian.blog.csdn.net/article/details/121656279 ↩︎ ↩︎
https://lolitasian.blog.csdn.net/article/details/121656279 ↩︎
↩︎
https://lolitasian.blog.csdn.net/article/details/121656279 ↩︎
https://lolitasian.blog.csdn.net/article/details/121656279 ↩︎
↩︎