Markdown
Markdown 是一种轻量级标记语言,用于为纯文本添加格式元素。 WebStorm 可识别 Markdown 文件,提供带有高亮显示、自动补全和格式设置功能的专用编辑器,并在实时预览窗格中显示所渲染的 HTML。 支持基于 CommonMark specification。
启用 Markdown 插件
此功能依赖 Markdown 插件,在 WebStorm 中默认捆绑并启用。 如果相关功能不可用,请确保未禁用此插件。
按下 Ctrl+Alt+S 打开设置,然后选择 。
打开 已安装 选项卡,找到 Markdown 插件,然后选中插件名称旁的复选框。
新建 Markdown 文件
默认情况下,WebStorm 会将具有 .md 或 .markdown 扩展名的文件识别为 Markdown 文件。
在 项目 工具窗口内右键单击某个目录 Alt+1 ,然后选择 。
或者,您可以选择所需的目录,按下 Alt+Insert ,然后选择 文件。
为您的文件输入带有已识别扩展名的名称,例如: readme.md 。
Markdown 编辑器在您选择一段文本时会显示一个 浮动工具栏 ,并提供几项基本格式操作。 您可以使用 预览窗格 查看渲染后的 HTML。

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

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

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

禁用代码块中的编码辅助
如果您的代码块不打算满足语法正确性,您可以关闭代码注入功能以及代码块中的语法错误检查。
按下 Ctrl+Alt+S 打开设置,然后选择 。
清除以下选项:
在代码隔离中注入语言
显示代码隔离中的问题
点击 确定 应用更改。
从 Markdown 文件中运行命令
克隆项目后,通常会有一个 README.md 文件,包含运行应用程序、配置环境等操作的说明和命令。 WebStorm 可识别这些命令,并为运行命令提供侧边图标。
点击相应的侧边图标,或在光标位于所需运行的命令上时按下 Ctrl+Shift+F10。

您可以在 IDE 设置 Ctrl+Alt+S 中禁用 Markdown 文件中用于运行命令的侧边图标,路径为 :取消选中 检测可以直接从Markdown 文件运行的命令 复选框。
如需详细信息,请参阅 Markdown 语言设置。
图表
Markdown 编辑器可以渲染使用 Mermaid 和 PlantUML 定义的图表。 该功能默认处于禁用状态,需执行额外步骤进行启用。

启用 Mermaid 图表支持
按下 Ctrl+Alt+S 打开设置,然后选择 。
查找并安装 Mermaid 插件。
启用 PlantUML 图表支持
按下 Ctrl+Alt+S 打开设置,然后选择 。
在 Markdown 扩展 中安装并启用 PlantUML。
WebStorm 下载相关扩展后,点击 确定 应用更改。
HTML 预览
默认情况下,Markdown 编辑器会在 Markdown 源码旁边显示 HTML 渲染预览窗格。 您可以点击 Markdown 编辑器右上角的 编辑器 或
预览 ,仅显示编辑器或预览窗格。
水平拆分编辑器和预览
默认情况下,编辑器与预览以垂直方式(并排)排列,这样在宽屏显示器上更加方便查看。 您也可以选择水平拆分,使预览显示在编辑器下方,这样在竖屏显示器上将更加方便。
右键点击 Markdown 文件标签页的标题,并选择 拆分自下方

要配置预览的默认布局,您可以在 中使用 预览布局 列表。
禁用编辑器和预览滚动条同步
默认情况下,编辑器与预览窗格的滚动条是同步的,也就是说,预览窗格中的位置与源码中相对应。
按下 Ctrl+Alt+S 打开设置,然后选择 。
取消 在编辑器和预览中同步滚动 的选中。
点击 确定 应用更改。
更改预览字体大小
虽然您可以通过 自定义 CSS 为预览定义字体大小,但也可以为内置样式表设置字体大小。
按下 Ctrl+Alt+S 打开设置,然后选择 。
在 预览字体大小 字段中设置字体大小。
点击 确定 应用更改。
如果您经常需要调整预览的字体大小,可为以下两个操作分配快捷键,而无需每次在设置中更改: 增大预览字体大小 和 减小预览字体大小。
自定义 CSS
WebStorm 提供默认样式表,用于在预览窗格中渲染 HTML。 这些样式表旨在与默认的 UI themes 保持一致。 您可以配置特定的 CSS 规则,以进行轻微的显示调整,例如更改标题的字体大小或列表中的行间距。 或者,您可以提供全新的 CSS,以更好地匹配预期的输出效果,例如当您希望复现 GitHub Markdown style 时。


配置用于呈现 HTML 预览的 CSS
按 Ctrl+Alt+S 打开设置,然后选择 。
在 自定义CSS 下配置设置:
选择 加载自 指定自定义 CSS 文件的位置。
选择 CSS 规则 规则以输入您想要覆盖的特定 CSS 规则。

单击 确定 应用更改。
以下是一个自定义 CSS 规则的示例:
图像
默认情况下,Markdown 使用以下图像语法,您可以使用它在 项目 中通过路径补全进行输入:

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

在 插入图像 对话框中指定图像路径。

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

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

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

如果您选中了部分文本,该文本将包含在 [ ] 中作为链接文本。 如果您已将 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 ,以将其与所有相关用法一起重命名。
生成目录
您可以生成当前文件中可用标题的缩进列表。
将光标放置到要添加当前文件目录的位置,然后按 Alt+Insert 打开 插入… 弹窗。
选择 目录。

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

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

表格
WebStorm 提供对 Markdown 表格创建与编辑的支持。
插入表格
按 Alt+Insert 打开 插入… 弹窗,然后选择 表。

选择表格的大小(行数和列数)。
输入每个单元格的内容,然后按 Tab 将光标移到下一个单元格。 要添加新行,请按 Shift+Enter。 在您输入时,WebStorm 会自动调整行列尺寸,以适应单元格中的内容。
有关在编辑表格时禁用辅助功能的更多信息,请参阅 智能键:Markdown
WebStorm 会高亮任何格式不正确的表格,并允许您进行修复。 在您从列表中选择快速修复操作后,WebStorm 会显示应用修复的预览结果。

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

单击列标记可执行以下操作:
向左移动列
向右移动列
在左侧插入列
在右侧插入列
选择列单元格
左对齐
居中对齐
右对齐
移除列
单击行标记可执行以下操作:
向上移动行
向下移动行
在上方插入行
在下方插入行
选择行
移除行
数学表达式
Markdown 插件支持使用 TeX 与 LaTeX 语法在文档中添加数学表达式。 使用单个美元符号 $...$ 表示行内数学公式,使用两个美元符号 $$...$$ 表示数学代码块。

如果您想插入字面量美元符号,请使用反斜杠进行转义: \$ 或 \$$。
浮动工具栏
当您在 Markdown 文件中选中文本时,WebStorm 会显示一个浮动工具栏,其中包含各种格式选项。
选择常规文本或标题,标题级别范围从 H1 到 H6。
粗体 Ctrl+B
斜体 Ctrl+I
删除线 Ctrl+Shift+S
代码 Ctrl+Shift+C
创建链接 Ctrl+Shift+U
无序列表
有序列表
复选标记列表

自定义浮动工具栏
按下 Ctrl+Alt+S 打开设置,然后选择 。
在 Markdown 编辑器浮动工具栏 下添加或移除必要的操作。

如需了解更多信息,请参阅 菜单和工具栏。
点击 确定(O) 应用更改。
隐藏浮动工具栏
按下 Ctrl+Alt+S 打开设置,然后选择 。
在 Markdown 下选择 隐藏浮动工具栏。
点击 确定(O) 应用更改。
重新格式化 Markdown 文件
WebStorm 可使用适当的换行、空行和缩进来 重新格式化 Markdown 文件。
您可以在提交至 VCS、运行构建或执行其他操作时自动触发重新格式化,也可以随时手动调用:
在主菜单中,转到 或按 Ctrl+Alt+L。
WebStorm 会根据 Markdown 文件的 代码样式 设置格式化内容。
配置 Markdown 代码样式设置
按下 Ctrl+Alt+S 打开设置,然后选择 。
如需了解更多信息,请参阅 Markdown 代码样式设置。
转换 Markdown 文件
Markdown 插件默认支持将 Markdown 文件导出为 HTML 和 PDF 格式。 如果配置了 Pandoc ,还可以导出为 Microsoft Word 文件(DOCX),并从中导入。
配置 Pandoc
WebStorm 应能自动检测您的 Pandoc 安装。 如果未能检测到,请执行以下操作:
在主菜单中,转到 。
在 Pandoc 设置 中指定 Pandoc 可执行文件的位置以及导入自 Microsoft Word 文档的图片的存储位置。
点击 确定 应用更改。
从 Microsoft Word 导入
在主菜单中,转到 。
指定文档的位置。
将 Markdown 文件导出为其他格式
WebStorm 可导出为 Microsoft Word(需要 Pandoc )、PDF 和 HTML 格式。
点击
编辑器和预览 或
预览 在编辑器中显示 HTML 预览窗格。
在主菜单中,转到 。
在 导出Markdown 对话框中,指定输出文件的名称、位置和格式,然后点击 确定(O)。

提高效率的技巧
自定义 Markdown 的高亮设置
WebStorm 会根据 配色方案 设置高亮显示各种 Markdown 元素。
在 设置 对话框(Ctrl+Alt+S )中,选择 编辑器 | 颜色方案 | Markdown。
选择配色方案,接受从默认设置继承的高亮配置,或根据 颜色和字体 中的说明进行自定义。
在大型 Markdown 文件中导航
使用 结构 工具窗口 Ctrl+7 或 文件结构 弹窗 Ctrl+F12 浏览并跳转至相关标题。
向 Markdown 文件添加注释
Markdown 没有用于注释行的专用语法。 不过,可以使用不带地址的链接标签模拟注释行,例如:
将插入符号放置在要注释的行上,按 Ctrl+/。
这将添加一个链接标签,将注释文本放入括号中,如有必要,还会在前面添加一个空行。 再次按下相同的快捷键可取消注释。
换行并填充段落
默认情况下,WebStorm 不会自动对长行进行硬换行。 当您 重新格式化文件时,它会对行进行换行。
按下 Ctrl+Alt+S 打开设置,然后选择 。 配置 Markdown 代码样式设置 以启用输入时自动换行。
或者,完全禁用硬换行,以保留超过配置的最大行长度的段落。
您还可以使用 操作,仅对插入符号所在段落添加换行。