工具先生

使用方法

Markdown 预览的使用方法

可在查看主题化预览的同时切换 Markdown 输入与编辑的工具，可按任务需要在分栏与全屏之间切换。适合一边撰写文章或文档，一边确认显示效果。

使用 Markdown 预览
Markdown 预览 缩略图Markdown 预览 缩略图
步骤
2 步
指南
附截图说明
内容
注意事项与 FAQ

适用场景

适合在这些时候使用

  • 一边确认显示效果一边撰写文章或文档
  • 比较不同主题下代码块与引用的显示
  • 在全屏中检查长篇 Markdown 内容
  • 推送到 GitHub 前确认 README 的显示效果
  • 在多个主题间比较代码块的语法高亮
  • 快速查看 Markdown 模板的输出结果

可实现内容

这个工具可以做什么

  • Markdown 编辑与预览并排显示
  • 切换主题
  • 切换分栏与全屏视图
  • 代码块的语法高亮
  • 在编辑器与全屏预览之间切换
  • 并排比较不同主题下的渲染效果

步骤

步骤

这里按顺序整理操作流程与确认点，便于边看页面边继续操作。

步骤 1

输入 Markdown

在左侧 Markdown 编辑器中输入内容。右侧预览会根据当前输入实时更新。

显示 Markdown 预览左侧输入区域的编辑器裁剪截图显示 Markdown 预览左侧输入区域的编辑器移动端裁剪截图

确认点

  • 左侧编辑器中显示输入内容
  • 右侧预览中反映相同内容

本画面的操作

01
切换标题

可在 H1、H2、H3 标题级别之间切换，并直接应用到当前行或选中文本。

显示 Markdown 预览编辑器中标题控制的截图显示 Markdown 预览编辑器中标题控制的移动端截图
02
强调文本

可通过粗体、斜体与行内代码突出重要内容。

显示 Markdown 预览编辑器中文本强调控制的截图显示 Markdown 预览编辑器中文本强调控制的移动端截图
03
列表与引用

可切换无序列表、有序列表与引用，用于整理 README 或说明内容。

显示 Markdown 预览编辑器中列表与引用控制的截图显示 Markdown 预览编辑器中列表与引用控制的移动端截图
04
代码块与链接

可插入代码块，或通过链接按钮分别编辑链接文字与 URL。

显示 Markdown 预览编辑器中代码块与链接控制的截图显示 Markdown 预览编辑器中代码块与链接控制的移动端截图
05
撤销 / 重做

Mac 可使用 Cmd + Z 与 Shift + Cmd + Z，Windows 可使用 Ctrl + Z 与 Ctrl + Shift + Z 进行撤销与重做。

显示 Markdown 预览编辑器中撤销与重做操作的截图显示 Markdown 预览编辑器中撤销与重做操作的移动端截图
06
键盘操作

在 Markdown 编辑器中，可使用 Tab / Shift + Tab 调整缩进与层级。结合 Cmd 或 Ctrl 后，可用 B 切换粗体、I 切换斜体、Shift + X 切换删除线、K 插入链接、Alt + 0 切换为段落、Alt + 1〜6 切换标题级别、Shift + 7 / 8 / 9 切换有序列表、无序列表与引用、Alt + C 切换代码块。在预览编辑器中，选中列表或引用时也可通过 Tab / Shift + Tab 调整层级。

步骤 2

切换主题与布局确认结果

一边确认预览，一边切换主题。可根据想确认的内容在分栏、仅编辑器、仅预览和全屏之间切换。

显示 Markdown 预览右侧预览面板的预览区域裁剪截图显示 Markdown 预览右侧预览面板的预览区域移动端裁剪截图

确认点

  • 可在 GitHub Light、GitHub Dark、Presentation、Notebook、Terminal 之间切换
  • 可在分栏、单栏与全屏视图之间切换
  • 代码块与引用在视觉上易于区分

本画面的操作

01
切换主题

可在 GitHub Light、GitHub Dark、Presentation、Notebook、Terminal 之间切换，比较发布前的显示效果。

显示 Markdown 预览中切换主题位置的显示控制截图显示 Markdown 预览中切换主题位置的显示控制移动端截图
02
分栏视图

左侧输入 Markdown、右侧查看预览，可同时进行编辑与确认，适合 README 或文章草稿。

显示 Markdown 预览中分栏与单栏切换位置的显示控制截图显示 Markdown 预览中分栏与单栏切换位置的显示控制移动端截图
03
单栏视图

当想专注输入或专注确认时，可只显示 Markdown 或只显示预览。

显示 Markdown 预览中分栏与单栏切换位置的显示控制截图显示 Markdown 预览中分栏与单栏切换位置的显示控制移动端截图
04
全屏

可将 Markdown 或预览扩展到整个浏览器窗口，更方便确认长文或代码块。

显示 Markdown 预览中进入全屏位置的显示控制截图显示 Markdown 预览中进入全屏位置的显示控制移动端截图
05
复制

可使用每个面板右上角的复制图标，立即复制当前 Markdown 内容。

显示 Markdown 预览中各面板右上角复制图标的截图显示 Markdown 预览中各面板右上角复制图标的移动端截图

注意事项

注意事项

将使用前应先判断的重要点按原因归纳整理。

确认事项

切换主题，确认接近最终发布场景的外观

即使是同一份 Markdown，不同主题下的标题、代码块和引用显示也会有所不同。编写时顺便比较，可以减少最后调整。

确认事项

长文本或代码块可切换全屏确认

对于长文档或代码示例，切换到全屏更容易集中精力检查标题结构与换行情况。

注意

不支持本地图片路径，请使用托管图片的 URL

Markdown 中的图片通过 URL 引用显示，本地文件路径无法加载。请使用公开托管的图片 URL。

FAQ

关于 Markdown 预览 的常见问题

这里先整理能帮助使用前判断的常见问题。

与 GitHub 相比，为什么要用这个？

当你需要比较主题、在全屏中查看长文档，或并排微调编辑器与预览内容时，会更方便。

适合长文本或代码块吗？

适合。可在分栏、单栏与全屏之间切换，更便于检查长文本与代码块。

可以显示图片和链接吗？

支持标准 Markdown 语法。不支持加载本地图片路径，请使用公开图片的 URL。

可以保存编写的 Markdown 吗？

没有自动保存功能。请复制文字另行保存，或使用浏览器的保存功能。

支持 Markdown 表格吗？

支持。标准 Markdown 表格语法可以正常渲染，列宽会根据当前主题自适应。

可以同时打开多个文件吗？

本页只有一个 Markdown 输入区域，不支持同时编辑多个文件。

下一步指南

相关指南

这里整理了相关指南，便于继续操作时不迷失。

图片格式转换的使用方法

本指南说明如何选择图片、指定输出格式，并在确认预览后下载结果。

查看指南
图片格式转换的使用方法

图片裁剪与缩放的使用方法

本指南说明如何选择图片、调整裁剪区域与输出尺寸，并保存结果。

查看指南
图片裁剪与缩放的使用方法

图片背景透明化的使用方法

本指南说明如何选择图片、移除背景，并在确认结果后保存透明 PNG。

查看指南
图片背景透明化的使用方法
图片工具视频工具文本工具开发支援工具设计工具生成工具