1/3
2/3
3/3
在VS Code中使用Markdown书写(Windows平台)
想想创造
2023年03月26日 08:00

0. 说明

        本文主要介绍在Windows平台下如何在VS Code中使用Markdown,包含了VS Code的安装及初步设置,Markdown插件的安装,文件的书写、预览及Markdown Preview Enhanced的预览主题设置,Markdown文件其他格式的发布以及Mermaid的初步介绍。


所包含的Markdown插件:

Markdown All in One:一款集成了大部分书写Markdown文件时所需功能的插件

Markdown Preview Enhanced:提供了Markdown文件的实时预览及导出

Markdown PDF能将Markdown文件导出为PDF及其他格式的文件类型

Markdownlint:可提供实时的Markdown语法格式检查,但其对语法格式过于严格,可根据自身情况选择安装

Markmap:能将Markdown文件预览为思维导图形式,十分推荐


所包含的Mermaid插件:

Markdown  Preview Mermaid Support:能在Markdown文件中书写Mermaid格式的文本

Mermaid Markdown Syntax Highlighting:可以将Mermaid格式的文本高亮显示,方便易读


目录

1. 安装VS Code及初步设置

2. 安装MarkDown插件

3. 书写

4. Markdown Preview Enhanced的主题设置

5. 发布

6. Mermaid

7. 小结


1. 安装VS Code及初步设置

1.1在官网下载VS Code,进入VS Code官网并点击蓝色图标"Download for Windows(Stable Build)"(基于Windows平台的稳定版本)下载安装包

1.2双击安装包开始安装,建议安装路径不要有中文

1.3按照提示安装即可,到"选择附件任务&#​34;这一步骤时建议全部勾选,这样之后就可以通过VS Code直接打开文件夹了

1.4安装完成后启动VS Code,此时为全英文界面,下面需要为其安装中文扩展程序

1.5点击左侧扩展,即方块图标,搜索"chinese&#​34;,点击蓝色图标"Install&#​34;开始安装

1.6蓝色图标"Install&#​34;变为"Uninstall&#​34;便说明安装完成

1.7重新打开VS Code,可以看到界面还未变成中文显示(若你的显示为中文了,可直接跳转到1.12步骤),还需以下操作

1.8打开已安装的扩展-中文语言包,在其"DETAILS&#​34;-"使用方法&#​34;中有具体操作步骤,演示如下

1.9键盘按下"Ctrl+Shift+P&#​34;组合键打开"命令面板&#​34;,输入"display&#​34;,选择"Configure Display Language&#​34;

1.10选择"中文(简体)(zh-cn)&#​34;

1.11在弹出的对话框中选择"Restart&#​34;,软件便会重新启动

1.12在新启动的VSCode中打开左下角"管理&#​34;,并打开"设置&#​34;

1.13在搜索栏中输入"zoom&#​34;,勾选"按住Ctrl键并滚动鼠标滚轮时对编辑器字体大小进行缩放&#​34;,就可以随意进行字体的缩放了

1.14到此便安装并初步设置完成了,接下来便可以安装MarkDown插件了

2. 安装MarkDown插件

2.1打开VS Code左侧扩展并搜索"markdown&#​34;,选择"Markdown All in One&#​34;并安装

2.2选择"Markdown Preview Enhanced&#​34;并安装

2.3选择"Markdown PDF&#​34;并安装

2.4选择"Markdownlint&#​34;并安装(此项非必选)

2.5在扩展中搜索"markmap&#​34;,选择"Markmap&#​34;并安装

3. 书写

3.1在桌面新建文件夹"Note&#​34;(文件夹的位置与名称可自行决定),文件夹右键单击,选择"通过Code打开&#​34;

3.2打开后点击新建文件的图标,建立Markdown文件,注意文件后缀名为".md&#​34;

3.3根据Markdown语法书写自己的文件(黄色下划线是Markdownlint检查出的含有语法问题的文本,Markdownlint对语法格式要求比较严格,一般情况下这些错误并无影响)

3.4书写的文件可通过Markdown Preview Enhanced预览,预览的两种方式如下图中的①和②

3.5Markdown Preview Enhanced预览结果如下图

3.6书写的文件也可通过Markmap预览成思维导图形式,预览的方式如下

3.7Markmap预览结果如下图

4. Markdown Preview Enhanced的主题设置

4.1Markdown Preview Enhanced默认的预览主题也可进行修改,进入Markdown Preview Enhanced的"扩展设置&#​34;

4.2在搜索栏输入"markdown-preview-enhanced theme"

4.3在"Code Block Theme&#​34;中可修改代码块的主题

4.4在"Preview Theme&#​34;中可修改预览的主题

5. 发布

5.1书写好的markdown文件可以通过Markdown Preview Enhanced发布,在预览页面中右键单击,选择"Chrome(Puppeteer)&#​34;,可发布为三种不同的格式文件(PDF/PNG/JPEG)

5.2书写好的markdown文件也可通过Markdown PDF发布,在文件页面中右键单击,可选择"Markdown PDF:Export (pdf)&#​34;等格式文件进行发布

6. Mermaid

6.1在扩展中搜索"mermaid&#​34;,选择"Markdown  Preview Mermaid Support"并安装

6.2选择"Mermaid Markdown Syntax Highlighting"并安装

6.3在markdown文件中可直接进行mermaid格式语句书写

7. 小结

        初次分享,希望这篇文章对你有所帮助,后续将继续分享更多的学习过程

        欢迎交流与分享!!!