WebStorm 2025.2 Help

Markdown

Markdown 是一种轻量级标记语言,用于为纯文本添加格式元素。 WebStorm 可识别 Markdown 文件,提供带有高亮显示、自动补全和格式设置功能的专用编辑器,并在实时预览窗格中显示所渲染的 HTML。 支持基于 CommonMark specification

启用 Markdown 插件

此功能依赖 Markdown 插件,在 WebStorm 中默认捆绑并启用。 如果相关功能不可用,请确保未禁用此插件。

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 插件

  2. 打开 已安装 选项卡,找到 Markdown 插件,然后选中插件名称旁的复选框。

新建 Markdown 文件

默认情况下,WebStorm 会将具有 .md .markdown 扩展名的文件识别为 Markdown 文件。

  1. 项目 工具窗口内右键单击某个目录 Alt+1 ,然后选择 新建 | 文件

    或者,您可以选择所需的目录,按下 Alt+Insert ,然后选择 文件

  2. 为您的文件输入带有已识别扩展名的名称,例如: readme.md

Markdown 编辑器在您选择一段文本时会显示一个 浮动工具栏 ,并提供几项基本格式操作。 您可以使用 预览窗格 查看渲染后的 HTML。

Markdown 编辑器格式工具栏

对当前 项目 中的文件链接也提供 代码补全 ,例如在您需要引用源代码、图像或其他 Markdown 文件时。 如需详细信息,请参阅 链接

Markdown 编辑器补全弹窗

代码块

要插入一个围栏代码块,请在代码块前后使用三重反引号 ```。 如果您为代码块指定了语言,默认情况下,Markdown 编辑器会 注入相应语言

围栏代码块中的 Markdown 补全:选择语言

这将启用指定语言的语法高亮和其他编码辅助功能,例如: 代码补全代码检查意图操作

围栏代码块中的 Markdown 补全

禁用代码块中的编码辅助

如果您的代码块不打算满足语法正确性,您可以关闭代码注入功能以及代码块中的语法错误检查。

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 语言与框架 | Markdown

  2. 清除以下选项:

    • 在代码隔离中注入语言

    • 显示代码隔离中的问题

  3. 点击 确定 应用更改。

从 Markdown 文件中运行命令

克隆项目后,通常会有一个 README.md 文件,包含运行应用程序、配置环境等操作的说明和命令。 WebStorm 可识别这些命令,并为运行命令提供侧边图标。

  • 点击相应的侧边图标,或在光标位于所需运行的命令上时按下 Ctrl+Shift+F10

    在 Markdown 文件中检测到待运行命令的标识图标

您可以在 IDE 设置 Ctrl+Alt+S 中禁用 Markdown 文件中用于运行命令的侧边图标,路径为 语言和框架 | Markdown :取消选中 检测可以直接从Markdown 文件运行的命令 复选框。

如需详细信息,请参阅 Markdown 语言设置

图表

Markdown 编辑器可以渲染使用 MermaidPlantUML 定义的图表。 该功能默认处于禁用状态,需执行额外步骤进行启用。

Markdown 中的 Mermaid 图表

启用 Mermaid 图表支持

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 插件

  2. 查找并安装 Mermaid 插件。

启用 PlantUML 图表支持

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 语言与框架 | Markdown

  2. Markdown 扩展 中安装并启用 PlantUML

  3. WebStorm 下载相关扩展后,点击 确定 应用更改。

HTML 预览

默认情况下,Markdown 编辑器会在 Markdown 源码旁边显示 HTML 渲染预览窗格。 您可以点击 Markdown 编辑器右上角的 “编辑器”按钮编辑器“预览”按钮预览 ,仅显示编辑器或预览窗格。

水平拆分编辑器和预览

默认情况下,编辑器与预览以垂直方式(并排)排列,这样在宽屏显示器上更加方便查看。 您也可以选择水平拆分,使预览显示在编辑器下方,这样在竖屏显示器上将更加方便。

  • 右键点击 Markdown 文件标签页的标题,并选择 拆分自下方

Markdown 编辑器和实时预览窗格

要配置预览的默认布局,您可以在 语言与框架 | Markdown 中使用 预览布局 列表。

禁用编辑器和预览滚动条同步

默认情况下,编辑器与预览窗格的滚动条是同步的,也就是说,预览窗格中的位置与源码中相对应。

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 语言与框架 | Markdown

  2. 取消 在编辑器和预览中同步滚动 的选中。

  3. 点击 确定 应用更改。

更改预览字体大小

虽然您可以通过 自定义 CSS 为预览定义字体大小,但也可以为内置样式表设置字体大小。

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 语言与框架 | Markdown

  2. 预览字体大小 字段中设置字体大小。

  3. 点击 确定 应用更改。

如果您经常需要调整预览的字体大小,可为以下两个操作分配快捷键,而无需每次在设置中更改: 增大预览字体大小减小预览字体大小

自定义 CSS

WebStorm 提供默认样式表,用于在预览窗格中渲染 HTML。 这些样式表旨在与默认的 UI themes 保持一致。 您可以配置特定的 CSS 规则,以进行轻微的显示调整,例如更改标题的字体大小或列表中的行间距。 或者,您可以提供全新的 CSS,以更好地匹配预期的输出效果,例如当您希望复现 GitHub Markdown style 时。

默认 Markdown CSS
使用类似 GitHub 渲染样式的自定义 CSS 进行 Markdown 预览

配置用于呈现 HTML 预览的 CSS

  1. Ctrl+Alt+S 打开设置,然后选择 语言与框架 | Markdown

  2. 自定义CSS 下配置设置:

    • 选择 加载自 指定自定义 CSS 文件的位置。

    • 选择 CSS 规则 规则以输入您想要覆盖的特定 CSS 规则。

    指定自定义 CSS 文件
  3. 单击 确定 应用更改。

以下是一个自定义 CSS 规则的示例:

body { background: #DDDDDD; color: #888888; font-size: 250% !important; } strong { text-decoration: underline; }

图像

默认情况下,Markdown 使用以下图像语法,您可以使用它在 项目 中通过路径补全进行输入:

![alt-text](path/to/file.png "optional-title")
在 Markdown 文档中插入的图像

插入图像

  1. Ctrl+U

    或者,按 Alt+Insert 打开 插入… 弹窗,然后选择 图像

    选择添加图像
  2. 插入图像 对话框中指定图像路径。

    Markdown:插入图像对话框
  3. 单击 确定

要配置图像,请单击插入图像所在行的侧边栏中的 配置图像图标。 例如,您可以在 插入图像配置图像 对话框中选择 转换为HTML ,以使用原始 HTML 标记在 Markdown 文件中插入图像。

使用原始 HTML 插入图像

您可以使用以下语法定义链接:

[link-text](link-url "optional-title")
在 Markdown 文件中插入链接
  • Ctrl+Shift+U

    或者,按 Alt+Insert 打开 插入… 弹窗,然后选择 链接

    在 Markdown 文件中插入链接

如果您选中了部分文本,该文本将包含在 [ ] 中作为链接文本。 如果您已将 URL 复制到剪贴板,该 URL 将包含在 ( ) 中作为链接地址。

可选标题将在您将鼠标悬停在链接上时显示。

  • 除了 URL,您还可以添加指向当前文件中任意标题的链接:

    # This is a chapter Link to [this chapter](#this-is-a-chapter)
  • 您还可以添加指向相对于当前文件的任意其他文件的链接:

    # This is a chapter Link to [a chapter in another file](another-file.md#some-chapter)

WebStorm 会根据当前上下文提供可用链接标签的补全功能,包括相对于当前文件的文件及有效的标题标签。

按住 Ctrl+Click 点击链接标签以跳转到所引用的标题。

您可以在标题或标签上调用 查找用法(U) Alt+F7 ,以查看指向该标签的所有链接。 您还可以在标题或标签上调用 重命名 重构功能 Shift+F6 ,以将其与所有相关用法一起重命名。

生成目录

您可以生成当前文件中可用标题的缩进列表。

  1. 将光标放置到要添加当前文件目录的位置,然后按 Alt+Insert 打开 插入… 弹窗。

  2. 选择 目录

    在 Markdown 文件中创建目录

    如果该文件中已有目录,您可在添加、删除或重命名标题后选择 更新目录 进行更新。

    更新 Markdown 文件中的目录

目录包含在 <!-- TOC --> 注释标签中。

已插入目录

表格

WebStorm 提供对 Markdown 表格创建与编辑的支持。

插入表格

  1. Alt+Insert 打开 插入… 弹窗,然后选择

    在 Markdown 文件中插入表格
  2. 选择表格的大小(行数和列数)。

  3. 输入每个单元格的内容,然后按 Tab 将光标移到下一个单元格。 要添加新行,请按 Shift+Enter。 在您输入时,WebStorm 会自动调整行列尺寸,以适应单元格中的内容。

    有关在编辑表格时禁用辅助功能的更多信息,请参阅 智能键:Markdown

WebStorm 会高亮任何格式不正确的表格,并允许您进行修复。 在您从列表中选择快速修复操作后,WebStorm 会显示应用修复的预览结果。

Markdown 对格式不正确表格的检查

默认情况下,WebStorm 会在编辑器中显示表格的列和行标记。 请使用这些标记来选择、移动、插入、删除和对齐列与行。 这些标记是一种特定于 Markdown 文件的特殊类型的 inlay hints。 如果您未看到这些标记,请按 Ctrl+Alt+S 打开 IDE 设置,转到 编辑器 | 嵌入提示 ,并勾选 其他 | Markdown | 表嵌入 选项。

在 Markdown 文件中编辑表格

单击列标记可执行以下操作:

  • “左移列”按钮向左移动列

  • “右移列”按钮向右移动列

  • “在左侧插入列”按钮在左侧插入列

  • “在右侧插入列”按钮在右侧插入列

  • “选择列单元格”按钮选择列单元格

  • “左对齐”按钮左对齐

  • “居中对齐”按钮居中对齐

  • “右对齐”按钮右对齐

  • “移除列”按钮移除列

单击行标记可执行以下操作:

  • “上移行”按钮向上移动行

  • “下移行”按钮向下移动行

  • “在上方插入行”按钮在上方插入行

  • “在下方插入行”按钮在下方插入行

  • “选择行”按钮选择行

  • “移除行”按钮移除行

数学表达式

Markdown 插件支持使用 TeX 与 LaTeX 语法在文档中添加数学表达式。 使用单个美元符号 $...$ 表示行内数学公式,使用两个美元符号 $$...$$ 表示数学代码块。

Markdown 中的数学表达式

如果您想插入字面量美元符号,请使用反斜杠进行转义: \$\$$

浮动工具栏

当您在 Markdown 文件中选中文本时,WebStorm 会显示一个浮动工具栏,其中包含各种格式选项。 Markdown 浮动工具栏 选择常规文本或标题,标题级别范围从 H1H6

  • 加粗粗体 Ctrl+B

  • 斜体斜体 Ctrl+I

  • 删除线删除线 Ctrl+Shift+S

  • 代码代码 Ctrl+Shift+C

  • 创建链接创建链接 Ctrl+Shift+U

  • 无序列表无序列表

  • 有序列表有序列表

  • 复选列表复选标记列表

包含编辑操作的 Markdown 工具栏

自定义浮动工具栏

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 外观与行为 | 菜单与工具栏

  2. Markdown 编辑器浮动工具栏 下添加或移除必要的操作。

    自定义 Markdown 浮动工具栏

    如需了解更多信息,请参阅 菜单和工具栏

  3. 点击 确定(O) 应用更改。

隐藏浮动工具栏

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 高级设置

  2. Markdown 下选择 隐藏浮动工具栏

  3. 点击 确定(O) 应用更改。

重新格式化 Markdown 文件

WebStorm 可使用适当的换行、空行和缩进来 重新格式化 Markdown 文件。

您可以在提交至 VCS、运行构建或执行其他操作时自动触发重新格式化,也可以随时手动调用:

  • 在主菜单中,转到 代码 | 重新设置代码格式 或按 Ctrl+Alt+L

WebStorm 会根据 Markdown 文件的 代码样式 设置格式化内容。

配置 Markdown 代码样式设置

  • 按下 Ctrl+Alt+S 打开设置,然后选择 编辑器 | 代码样式 | Markdown

如需了解更多信息,请参阅 Markdown 代码样式设置

转换 Markdown 文件

Markdown 插件默认支持将 Markdown 文件导出为 HTML 和 PDF 格式。 如果配置了 Pandoc ,还可以导出为 Microsoft Word 文件(DOCX),并从中导入。

配置 Pandoc

WebStorm 应能自动检测您的 Pandoc 安装。 如果未能检测到,请执行以下操作:

  1. 在主菜单中,转到 工具(T) | Markdown | 配置Pandoc…

  2. Pandoc 设置 中指定 Pandoc 可执行文件的位置以及导入自 Microsoft Word 文档的图片的存储位置。

  3. 点击 确定 应用更改。

从 Microsoft Word 导入

  1. 在主菜单中,转到 工具(T) | Markdown | 导入Word 文档…

  2. 指定文档的位置。

将 Markdown 文件导出为其他格式

WebStorm 可导出为 Microsoft Word(需要 Pandoc )、PDF 和 HTML 格式。

  1. 点击 “编辑器和预览”按钮编辑器和预览“预览”按钮预览 在编辑器中显示 HTML 预览窗格

  2. 在主菜单中,转到 工具(T) | Markdown | 将Markdown 导出到…

  3. 导出Markdown 对话框中,指定输出文件的名称、位置和格式,然后点击 确定(O)

    Markdown 导出对话框

提高效率的技巧

自定义 Markdown 的高亮设置

WebStorm 会根据 配色方案 设置高亮显示各种 Markdown 元素。

  1. 设置 对话框(Ctrl+Alt+S )中,选择 编辑器 | 颜色方案 | Markdown

  2. 选择配色方案,接受从默认设置继承的高亮配置,或根据 颜色和字体 中的说明进行自定义。

  • 使用 结构 工具窗口 Ctrl+7文件结构 弹窗 Ctrl+F12 浏览并跳转至相关标题。

向 Markdown 文件添加注释

Markdown 没有用于注释行的专用语法。 不过,可以使用不带地址的链接标签模拟注释行,例如:

[comment]: <> (Your comment text)
  • 将插入符号放置在要注释的行上,按 Ctrl+/

    这将添加一个链接标签,将注释文本放入括号中,如有必要,还会在前面添加一个空行。 再次按下相同的快捷键可取消注释。

换行并填充段落

默认情况下,WebStorm 不会自动对长行进行硬换行。 当您 重新格式化文件时,它会对行进行换行。

  • 按下 Ctrl+Alt+S 打开设置,然后选择 编辑器 | 代码样式 | Markdown。 配置 Markdown 代码样式设置 以启用输入时自动换行。

  • 或者,完全禁用硬换行,以保留超过配置的最大行长度的段落。

  • 您还可以使用 编辑(E) | 填充段落 操作,仅对插入符号所在段落添加换行。

最后修改日期: 2025年 9月 26日