三种 Markdown 编辑模式切换
三种模式对比
NoteGen 的 Markdown 编辑器基于 Tiptap,提供三种编辑模式,点击编辑器右上角的切换按钮即可互切:
| 模式 | 编辑体验 | 预览方式 | 适合谁 |
|---|---|---|---|
| 所见即所得 | 直接编辑渲染后的富文本,不用看 Markdown 语法 | 实时渲染在同一区域 | Markdown 新手、习惯 Word 式编辑的用户 |
| 即时渲染 | 像 Typora,编辑即预览,源码和渲染融合 | 实时融合 | 熟悉 Typora 的用户、追求优雅的编辑体验 |
| 分屏预览 | 左边源码、右边预览,传统双栏 | 左右分栏同时显示 | 大屏用户、需要精确控制 Markdown 源码的用户 |
所见即所得模式
- 直接加粗、高亮、改色,不用打
**或# - 对不熟悉 Markdown 语法的用户最友好
- 支持表格直接拖拽、任务列表直接勾选
- 内部还是 Markdown 存储,导出不会丢失格式
即时渲染模式
- 类似 Typora 最经典的那种感觉
- 光标的输入位置周围是源码,远处自动变成渲染效果
- 适合纯文本流、不想分屏但又想看到效果的场景
- 熟悉 Typora 的用户无缝过渡
分屏预览模式
- 左边是纯净的 Markdown 源码
- 右边是实时渲染的预览
- 适合:大屏显示器、精确控制 Markdown 细节、需要对比源码和渲染效果
- 可以只在左侧编辑,右侧自动更新
模式之间切换
三种模式的底层文件都是同一个 .md,切换时不会丢内容。甚至可以同时打开同一个文件的不同视图——一个主窗口分屏,一个独立窗口所见即所得。
小贴士
- 如果经常在三种模式之间切,记一下快捷键
- 贴入外部 HTML 内容时,不管什么模式都会自动转成 Markdown
- 图表、公式、代码块等复杂元素在所见即所得模式下操作更直观