工具先生

使用方法

Markdown 预览的使用方法

可在同一画面中编辑 Markdown,并确认预览、HTML 输出和代码块显示。可整理标题和列表,切换主题与显示方式,然后复制 Markdown 或 HTML,或下载 HTML。

Markdown 预览 缩略图Markdown 预览 缩略图

适用场景

适合在这些时候使用

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

可实现内容

这个工具可以做什么

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

指南

各画面区域的使用方法

按画面区域说明设置、输入、预览、结果和保存等操作方法。

01 HOWTO

Markdown 输入区域

在左侧输入区直接编辑 Markdown。可输入标题、段落、分隔线、引用、列表、代码和表格,并确认预览反映。

显示 Markdown 预览的 Markdown 输入区域的画面显示 Markdown 预览的 Markdown 输入区域的画面

这个区域可以做什么

  • 可以直接输入 Markdown 正文
  • 可以编辑标题、段落、引用和列表
  • 可以在右侧预览中确认编辑结果
  • 长文也可滚动继续编辑

操作位置

01
标题级别

通过标题级别选择器插入 H1 到 H6 的层级。

显示 Markdown 预览的 Markdown 输入区域的画面: 标题级别显示 Markdown 预览的 Markdown 输入区域的画面: 标题级别
02
强调和行内代码

用粗体、强调、删除线和行内代码整理重要词语或短代码。

显示 Markdown 预览的 Markdown 输入区域的画面: 强调和行内代码显示 Markdown 预览的 Markdown 输入区域的画面: 强调和行内代码
03
引用和列表

用引用、无序列表和有序列表整理说明和步骤。

显示 Markdown 预览的 Markdown 输入区域的画面: 引用和列表显示 Markdown 预览的 Markdown 输入区域的画面: 引用和列表
04
链接、图片、代码和表格

为技术笔记或说明文档添加链接、图片、代码块和表格。

显示 Markdown 预览的 Markdown 输入区域的画面: 链接、图片、代码和表格显示 Markdown 预览的 Markdown 输入区域的画面: 链接、图片、代码和表格

02 HOWTO

格式工具栏和编辑辅助区域

使用工具栏和右上方编辑辅助,可进行格式化、行号、自动换行、清空、复制、历史记录、撤销和重做。

显示 Markdown 预览的格式工具栏和编辑辅助区域的画面显示 Markdown 预览的格式工具栏和编辑辅助区域的画面

这个区域可以做什么

  • 可以用按钮插入 Markdown 语法
  • 可以切换行号和自动换行
  • 可以清空或复制 Markdown
  • 可以用历史记录、撤销和重做调整编辑状态

操作位置

01
引用、无序列表和有序列表

用按钮添加引用、无序列表和有序列表。

显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 引用、无序列表和有序列表显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 引用、无序列表和有序列表
02
链接、图片、代码块和表格

可从工具栏插入链接、图片、代码块和表格。

显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 链接、图片、代码块和表格显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 链接、图片、代码块和表格
03
历史记录、撤销和重做

使用 Markdown 历史记录、撤销和重做返回或重新应用编辑。

显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 历史记录、撤销和重做显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 历史记录、撤销和重做
04
标题和输入显示

通过标题级别、行号和自动换行,让长篇 Markdown 更容易编辑。

显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 标题和输入显示显示 Markdown 预览的格式工具栏和编辑辅助区域的画面: 标题和输入显示

03 HOWTO

预览、主题和显示切换区域

在预览中确认 Markdown 显示结果,并切换主题、分栏显示、转到 Markdown、转到编辑器和全屏显示。

显示 Markdown 预览的预览、主题和显示切换区域的画面显示 Markdown 预览的预览、主题和显示切换区域的画面

这个区域可以做什么

  • 可以确认 Markdown 预览结果
  • 可以切换 GitHub Light 等主题
  • 可以使用分栏显示、转到 Markdown 和转到编辑器
  • 可以用全屏显示扩大确认区域

操作位置

01
主题

切换预览主题,确认更接近共享目标的显示效果。

显示 Markdown 预览的预览、主题和显示切换区域的画面: 主题显示 Markdown 预览的预览、主题和显示切换区域的画面: 主题
02
显示切换

用分栏显示、转到 Markdown、转到编辑器在编辑和确认之间切换。

显示 Markdown 预览的预览、主题和显示切换区域的画面: 显示切换显示 Markdown 预览的预览、主题和显示切换区域的画面: 显示切换
03
全屏显示

在更宽区域确认长文和代码块。

显示 Markdown 预览的预览、主题和显示切换区域的画面: 全屏显示显示 Markdown 预览的预览、主题和显示切换区域的画面: 全屏显示
04
预览确认

确认标题、段落、引用、列表、代码和表格的显示结果。

显示 Markdown 预览的预览、主题和显示切换区域的画面: 预览确认显示 Markdown 预览的预览、主题和显示切换区域的画面: 预览确认

04 HOWTO

HTML 输出和代码块确认区域

确认 HTML 标签页、HTML 复制和下载,以及代码块语言、行号、自动换行和代码复制,按共享目标取出内容。

显示 Markdown 预览的 HTML 输出和代码块确认区域的画面显示 Markdown 预览的 HTML 输出和代码块确认区域的画面

这个区域可以做什么

  • 可以确认 HTML 输出
  • 可以复制或下载 HTML
  • 可以确认代码块语言
  • 可以操作代码行号、自动换行和复制

操作位置

01
HTML 复制和下载

可以使用 HTML 输出操作复制 HTML,或下载为 HTML 文件。

显示 Markdown 预览中 HTML 复制和 HTML 下载操作位置的画面显示 Markdown 预览中 HTML 复制和 HTML 下载操作位置的画面
02
再次确认显示

取出前可回到分栏显示或在区域之间移动确认。

显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 再次确认显示显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 再次确认显示
03
再次确认主题

可再次切换主题,确认预览或 HTML 输出的可读性。

显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 再次确认主题显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 再次确认主题
04
代码块辅助

可以确认代码语言、行号、自动换行和代码复制。

显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 代码块辅助显示 Markdown 预览的 HTML 输出和代码块确认区域的画面: 代码块辅助

注意事项

注意事项

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

确认事项

并排编辑 Markdown 输入并确认预览

Markdown 输入的修改会反映到预览中。可一边编辑,一边确认标题、引用、列表、代码和表格。

确认事项

按任务切换显示控制和主题

分栏显示、转到 Markdown、转到编辑器和全屏显示可帮助在编辑与集中确认之间切换。

确认事项

根据共享目标选择 Markdown、HTML 或代码输出

除了复制 Markdown,还可以复制和下载 HTML,并在代码块中使用语言、行号、自动换行和复制控制。

FAQ

关于 Markdown 预览 的常见问题

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

与 GitHub 相比,为什么要用这个?

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

适合长文本或代码块吗?

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

可以显示图片和链接吗?

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

可以保存编写的 Markdown 吗?

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

支持 Markdown 表格吗?

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

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

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

下一步指南

相关指南

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