VSCode Markdown 编辑器使用教程

1. 项目介绍

vscode-markdown-editor 是一个 Visual Studio Code 扩展，旨在将 VSCode 转变为一个功能齐全的 WYSIWYG（所见即所得）Markdown 编辑器。该扩展支持多种编辑模式，包括即时渲染模式、WYSIWYG 模式和分屏模式。此外，它还支持多种 Markdown 扩展，如 KaTeX、Mermaid、Graphviz、ECharts 等，使得用户可以在编辑 Markdown 文档时轻松插入数学公式、流程图、图表等内容。

2. 项目快速启动

安装

1. 打开 Visual Studio Code。
2. 按下 Ctrl+P 或 Cmd+P 打开快速打开对话框。
3. 输入以下命令并按下回车：

   ext install zaaack.markdown-editor
   

使用

命令模式

1. 打开一个 Markdown 文件。
2. 按下 Ctrl+Shift+P 或 Cmd+Shift+P 进入命令模式。
3. 输入 markdown-editor: Open with markdown editor 并按下回车。

快捷键

1. 打开一个 Markdown 文件。
2. 按下 Ctrl+Shift+Alt+M（Windows）或 Cmd+Shift+Alt+M（Mac）。

右键菜单

1. 在资源管理器中右键点击一个 Markdown 文件。
2. 选择 Open with markdown editor。

编辑器标题菜单

1. 右键点击已打开的 Markdown 文件的标签标题。
2. 选择 Open with markdown editor。

3. 应用案例和最佳实践

案例一：技术文档编写

在编写技术文档时，vscode-markdown-editor 可以帮助你快速插入代码块、数学公式和流程图。例如，你可以使用 KaTeX 插入数学公式：

$$
E = mc^2
$$

案例二：博客文章撰写

在撰写博客文章时，你可以使用 Mermaid 来绘制流程图或序列图：

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

### 最佳实践

- **自定义 CSS**：通过编辑 `settings.json` 文件，你可以自定义编辑器的样式，例如调整行高和字体：
  ```json
  "markdown-editor.customCss": "vditor-ir pre { line-height: 32px; padding-right: calc(100% - 800px) !important; margin-left: 100px; font-family: system-ui !important; }"

4. 典型生态项目

1. VSCode

vscode-markdown-editor 是基于 Visual Studio Code 开发的扩展，因此与 VSCode 的生态系统紧密集成。VSCode 提供了丰富的插件和工具，可以进一步提升 Markdown 编辑体验。

2. Vditor

vscode-markdown-editor 使用了 Vditor 作为其核心编辑器组件。Vditor 是一个功能强大的 Markdown 编辑器库，支持多种 Markdown 扩展和自定义功能。

3. KaTeX

KaTeX 是一个快速、轻量级的数学公式渲染库，vscode-markdown-editor 支持在 Markdown 文档中插入 KaTeX 公式。

4. Mermaid

Mermaid 是一个用于绘制流程图、序列图和甘特图的 JavaScript 库，vscode-markdown-editor 支持在 Markdown 文档中插入 Mermaid 图表。

通过这些生态项目的支持，vscode-markdown-editor 能够提供一个功能全面、易于使用的 Markdown 编辑环境。