在VS Code中使用Markdown书写(Windows平台)

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按照提示安装即可,到"选择附件任务"这一步骤时建议全部勾选,这样之后就可以通过VS Code直接打开文件夹了

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

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

1.6蓝色图标"Install"变为"Uninstall"便说明安装完成

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

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

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

1.10选择"中文(简体)(zh-cn)"

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

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

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

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

2. 安装MarkDown插件

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

2.2选择"Markdown Preview Enhanced"并安装

2.3选择"Markdown PDF"并安装

2.4选择"Markdownlint"并安装(此项非必选)

2.5在扩展中搜索"markmap",选择"Markmap"并安装

3. 书写

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

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

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的"扩展设置"

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

4.3在"Code Block Theme"中可修改代码块的主题

4.4在"Preview Theme"中可修改预览的主题

5. 发布

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

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

6. Mermaid

6.1在扩展中搜索"mermaid",选择"Markdown  Preview Mermaid Support"并安装

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

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

7. 小结

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

欢迎交流与分享!!!


相关推荐

  • Markdown——使用 vs code 配置 Markdown 工作环境 快速编辑文档
  • VsCode更换MarkDown样式到底能有多好看?
  • 将 VS Code 打造最佳 Markdown 编辑器
  • 入门指南:使用 Visual Studio Code 高效编辑 Markdown
  • 副业赚了57万
  • Kubecost 2.0 发布,带来了网络监控功能
  • 知乎:多云架构下大模型训练,如何保障存储稳定性?
  • 告别 React,拥抱 Svelte:21天重写应用,开发速度翻倍代码量减半!
  • Redis 容器化,是不是个“软柿子”?
  • 要涨了!!!
  • 全是坑!慎用 Arrays.asList
  • 首屏时间,你说你优化了,那你倒是计算出给给我看啊!
  • 实力打脸!Adobe用竞品Midjourney图片训练Firefly。内部员工批评不断终爆料。用户:赚了但很惭愧,我上传了数千张
  • 企业级离线数仓分层设计和演化之路
  • 面试官:说一下加密后的数据如何进行模糊查询?
  • 面试官:线上MySQL的自增id用尽怎么办?
  • 字节员工:最近金价好高。家里还有一斤多黄金,要不要出一波呀
  • GPT-4升级被曝引入Q*,推理/数学更强废话更少,竞技场重夺王位
  • 手机可以跑大模型了,一夜下载量超2000
  • [开源]一款通用管理平台,模块插件式开发,前后端分离,开箱即用