搭建Markdown写作环境(基于vscode)

目录

Markdown 简介

Markdown 是一种易于读写的轻量级的标记语言，编写出的作品简洁美观。
它的主要优点如下：

  1. 支持 LaTex 可以方便的书写数学公式
  2. 支持 html 标签，可以方便的插入图片和批量修改图片格式
  3. 支持转 pdf

搭建 Markdown 写作环境

  1. 下载VScode
    点链接选择版本下载即可
    https://code.visualstudio.com/
  2. 下载插件
    最左侧导航栏点击下图按键
    markdown_20250517_000001

搜索 "mark" 下载以下插件

markdown_20250517_000000

这样就把 Markdown 的环境搭建好了

使用 Markdown 写作

预览

右上角点击下图按键即可预览当前 Markdown 的效果
markdown_20250517_000002
效果如下
markdown_20250517_000003

转pdf

  1. 在预览打开情况下，右键右侧的预览
    markdown_20250517_000005
  2. 鼠标滑到 "Export"
    markdown_20250517_000004
  3. 鼠标滑到 "Chrome(Puppeteer)"
    markdown_20250517_000006
  4. 鼠标滑到 "PDF"并单击
    markdown_20250517_000007

Markdown 语法

内嵌html标签

在Markdown可以使用 html[1] 标签

如 <h1> <img> 等，本文不再赘述

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题(最多六级)

目录

[TOC]

效果如下：
markdown_20250517_000008
注：本文目录已经写在最上方

链接

超链接

代码:

[欢迎阅读我的博客(超链接)](https://www.cnblogs.com/Proaes)

效果:
欢迎阅读我的博客(超链接)

参考式

与超链接类似，主要用于一个链接在文中被多次用到

代码:

[欢迎阅读我的博客(参考式)][MyBlogs]

[MyBlogs]:https://www.cnblogs.com/Proaes

效果:

欢迎阅读我的博客(参考式)

脚注

代码:

使用 footnote[^footnote]可以效率地书写文档

[^footnote]:footnote 脚注

效果:

使用 footnote[2]可以效率地书写文档

图片

图片基本语法
Markdown 格式
![图片简介，当图片找不到时显示]()
![该路径找的到所以显示图片](https://i0.hdslb.com/bfs/openplatform/0986b8192a47768ef01fca6df488f184b796582b.jpg)

效果:

图片简介，当图片找不到时显示
该路径找的到所以显示图片

html 格式
<img alt = "图片简介，当图片找不到时显示" src="" >
<br><!-- 换行 -->
<img alt = "该路径找的到所以显示图片" src="https://i0.hdslb.com/bfs/openplatform/0986b8192a47768ef01fca6df488f184b796582b.jpg" >

效果:

图片简介，当图片找不到时显示
该路径找的到所以显示图片
便捷粘贴图片的同时整理图片

在复制图片直接粘贴之后，图片的文件名可能为"image-*.png" 在不同的文件夹里面可能重名，导致需要该图片上传图床改成在线形式时被覆盖

接下来介绍解决方案

插件 Paste Image

下载下面插件

markdown_20250517_200831

在 .vscode/settings.json 添加以下内容即可

"pasteImage.path": "${currentFileDir}/images",
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
"pasteImage.defaultName": "YMMDD_HHmmss",
"pasteImage.insertPattern": "![${imageFileNameWithoutExt}](./${imageFilePath})"

这样复制粘贴就会在当前.md文件下创建一个"images"文件夹，并在里面生成一个以"当前文件名"+"当前时间"命名的图片文件，并且自动生成了注释，便于在图床上传后更改对应链接

列表

在尾行 按 TAB 键可补全下一行

无序列表

代码:

* 1
+ 2
- 3

效果:

  • 1
  • 2
  • 3
有序列表

代码:

1. 1
2. 2
3. 3

4) 4
5) 5
6) 6

效果:

  1. 1
  2. 2
  3. 3
  1. 4
  2. 5
  3. 6

转义字符以及缩进

转义字符

以下字符前需要反斜杠转义 \ (在下文将会提到的公式中)

序号 符号 中文 类型
1 _ 下划线 公式
2 # 井号 公式
3 {} 大括号 公式
4 & 与 公式
5 % 百分号 公式

在md正文中可能由于编辑器认为你写的是html标签，这时候也可以转义

代码:

\<img>

效果:

<img>

缩进

代码:

&emsp; 全角
&ensp; 半角

效果:

  全角
  半角

Markdown 代码段(markdown.json)

运用代码段[3]可以方便快捷的书写代码

在 Markdown 中想使用代码段与 .cpp 等不同，需要打开设置再进行相应配置才行

Markdown 代码段设置

打开 "设置"

  1. ctrl + ,
  2. 左上角 -> "文件" -> "首选项" -> "设置"
  3. 左下角齿轮 -> "设置"

点击右上角的 "打开设置"

markdown_20250517_000009

markdown_20250517_000010

在{}内加上

"liveServer.settings.port": 5501,
"[markdown]": {
    "editor.quickSuggestions": {
        "comments": "on",
        "strings": "on",
        "other": "on"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

下面是全部的json

{
    "workbench.colorTheme": "Quiet Light",
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 500,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "security.allowedUNCHosts": [
        "wsl.localhost"
    ],
    "cnblogsClient.windows.workspace": "e:\\files\\Main\\cnblogs\\p",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "liveServer.settings.port": 5501,
    "[markdown]": {
        "editor.quickSuggestions": {
            "comments": "on",
            "strings": "on",
            "other": "on"
        },
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "markdown-preview-enhanced.alwaysShowBacklinksInPreview": false,
    "markdown-pdf.outputDirectoryRelativePathFile": true,
}

我的 Markdown 代码段

下面展示我的 Markdown 代码段，用于参考

并且在第一个代码段给出每行的具体意思，相信再根据下面我的代码段，读者能够学会如何生成自己的代码段

{
	// 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"
	// }
	"Print to console log": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"Print to console md": {
		"prefix": "md",
		"body": [
			"<!--",
			"Source file:",
			"$RELATIVE_FILEPATH",
			"-->",
			"<style>",
				"\t.body {",
					"\t\tfont-size: 16px;",
					"\t\tcolumn-count: 1;",
					"\t\tcolumn-gap: 8px;",
					"\t\tpage-break-inside: avoid;",
					"\t\t-webkit-page-break-inside: avoid;",
				"\t}",
				"\t@page {",
					"\t\t@top-center {",
						"\t\t\tcontent: \"页眉\";",
						"\t\t\tposition: fixed;",
						"\t\t\tbottom: 2px;",
					"\t\t}",
				"\t}",
				"\t@page {",
					"\t\t@bottom-right {",
						"\t\t\tcontent: counter(page) \" \/ \" counter(pages);",
						"\t\t\tposition: fixed;",
						"\t\t\tbottom: 2px;",
						"\t\t\tright: 2px;",
					"\t\t}",
				"\t}",
				"\t.watermark {",
					"\t\tposition: fixed;",
					"\t\ttop: 10%;",
					"\t\tleft: 25%;",
					"\t\tcolor: rgba(255, 255, 255, 0.0);",
					"\t\tfont-size: 18pt;",
					"\t\ttransform: rotate(30deg);",
				"\t}",
				"\timg {",
					"\t\ttext-align: center;",
					"\t\tmargin: 0 auto;",
					"\t\twidth: 60%;",
				"\t}",
				"\t.page-break {",
					"\t\tpage-break-after: always !important;",
					"\t\tmargin-bottom: 0 !important;",
					"\t\tmin-height: 0 !important;",
				"\t}",
			"</style>",
			"",
			"<script>",
				"\tfunction WaterMark() {",
					"\t\tlet s = ``;",
					"\t\tlet n = 10;",
					"\t\tfor (let i = 1; i <= n; ++ i) {",
						"\t\t\ts += \"watermark\";",
						"\t\t\tlet brn = 2;",
						"\t\t\tfor (let j = 1; j <= brn; ++ j) {",
							"\t\t\t\ts += \"<br>\";",
						"\t\t\t}",
					"\t\t}",
					"\t\tdocument.getElementById(\"wm\").innerHTML = s;",
				"\t}",
			"</script>",
			"",
			"<div class=\"watermark\">",
				"\t<p id=\"wm\"></p >",
				"\t<script>",
					"\t\tWaterMark();",
				"\t</script>",
			"</div>",
			"",
			"<div class=\"body\">",
			"$0",
			"</div>",
			"",
			"<div class=\"body\">",
			"",
			"## 联系我",
			"",
			"博客失去时效性或有任何不详尽的可联系我",
			"",
			"QQ: 2832640093",
			"</div>",
		],
		"description": "Log output to console"
	},
	"Print to console pg": {
		"prefix": "pg",
		"body": [
			"</div>",
			"<div class=\"page-break\"></div>",
			"<div class=\"body\">",
		],
		"description": "Log output to console"
	},
	"Print to console pre": {
		"prefix": "pre",
		"body": [
			"<pre>",
			"$0",
			"</pre>",
		],
		"description": "Log output to console"
	},
	"Print to console f": {
		"prefix": "f",
		"body": [
			"[^$0]:",
		],
		"description": "Log output to console"
	},
	"Print to console h": {
		"prefix": "h",
		"body": [
			"<h>$0</h>",
		],
		"description": "Log output to console"
	},
	"Print to console d": {
		"prefix": "d",
		"body": [
			"<details>",
			"<summary><font size=\"4\" color=\"orange\">",
			"例子：",
			"</font></summary>" ,
			"$0",
			"</details>",
		],
		"description": "Log output to console"
	},
}

块级数学公式

联系我

博客失去时效性或有任何不详尽的可联系我

QQ: 2832640093

  1. Hyper Text Markup Language，即超文本标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 ↩︎

  2. footnote 脚注。 ↩︎

  3. 代码段是可添加到代码文件的可重用代码的小块。即输入自己定义的关键词就能在该处插入事先编写好的对应代码 ↩︎

posted @ 2025-05-03 02:07  Proaes  阅读(106)  评论(0)    收藏  举报