MDViewer

功能一览

2026-07-27 2503 字 约 5 分钟

渲染能力、阅读体验、搜索、导出与技术实现的完整说明。

功能

渲染能力

Markdown 语法

在 CommonMark 与 GitHub Flavored Markdown 的基础上,额外支持:

语法 写法 说明
表格 | a | b | 支持三种对齐,表头可排序
任务列表 - [x] 完成 已完成项自动加删除线
删除线 ~~文字~~ GFM
高亮 ==文字== 黄色荧光笔效果
插入 ++文字++ 下划线
下标 H~2~O
上标 x^2^
脚注 文字[^1] 双向跳转
定义列表 术语 换行 : 解释
缩写 *[HTML]: HyperText... 悬停显示全称
表情 :rocket: 名称转 Emoji
自动链接 <https://…> 裸 URL 也会识别

数学公式

KaTeX 渲染,速度远快于 MathJax。

  • 行内$E = mc^2$\(E = mc^2\)
  • 块级$$…$$\[…\]
  • 支持矩阵、aligned 多行对齐、cases 分段函数、求和积分、希腊字母与常用宏包符号

阅读器对 $ 做了保护性判断:$100$5 - $10 这类价格写法不会被误判成公式。

图表

Mermaid 渲染,写在 ```mermaid 代码块里即可。支持流程图、时序图、类图、状态图、ER 图、甘特图、饼图、用户旅程图、思维导图、Git 分支图、象限图、时间线等。

图表主题绑定站点主题变量,切换深色模式时会自动重新渲染换色。鼠标悬停在图表上,右上角可复制源码或下载 SVG。

代码高亮

  • 服务端由 Chroma 高亮(文档页),客户端由 highlight.js 高亮(阅读器),两者共用同一套配色变量,视觉一致
  • 每个代码块提供:语言标签、复制按钮、行号开关、自动换行开关
  • 超过 24 行自动折叠,点击展开
  • 支持 title 标注文件名:
1
2
3
```js {title="app.js"}
const a = 1;
```

警示块

两种写法都支持。GitHub 风格(文档站与阅读器都可用):

1
2
3
4
5
6
7
8
> [!NOTE]
> 一般性说明

> [!TIP]
> 实用建议

> [!WARNING]
> 需要注意

容器风格(仅阅读器可用,文档页不解析):

1
2
3
::: tip 自定义标题
容器语法支持 note / tip / important / warning / caution / danger / details
:::

六种类型:NOTE TIP IMPORTANT WARNING CAUTION DANGER

Front Matter

YAML(---)、TOML(+++)、JSON({})三种格式都能识别。titledescriptiondateauthortagscategories 会提取到文档头部展示,其余字段折叠在「Front Matter」卡片里。

阅读体验

主题

  • 浅色 / 深色 / 跟随系统三档,按 D 循环切换
  • 首屏渲染前用内联脚本应用主题,不会闪白
  • 深色模式下代码配色、图表配色、公式颜色全部同步调整

排版调节

, 打开设置面板:

项目 范围
正文字号 13 – 22 px
行间距 1.40 – 2.40
版心宽度 窄 / 标准 / 宽 / 全宽
正文字体 无衬线 / 衬线
代码行号 显示 / 隐藏

设置存在浏览器 localStorage 里,跨页面、跨会话保持。

导航

  • 文件树:目录可折叠,支持按文件名实时筛选
  • 大纲:二到四级标题,滚动时用 IntersectionObserver 高亮当前章节,目录自身也会跟随滚动
  • 阅读进度:顶部渐变进度条,滚动超过 600px 出现回到顶部按钮
  • 位置记忆:每篇文档的滚动位置按比例保存,重新打开时恢复
  • 上下篇J / K 在文件列表里前后跳转

图片

点击放大进入灯箱:滚轮缩放、拖拽平移、双击切换 1×/2×、+ - 0 键盘控制、可直接下载。

搜索

阅读器内的跨文件搜索

/Ctrl+K 打开。载入文件夹后会在后台读取所有 Markdown 建立 Fuse.js 模糊索引,权重依次为标题 > 文件名 > 正文 > 路径。结果显示文件路径与高亮命中的上下文片段,方向键选择、回车打开。

文档内查找

FCtrl+F,在当前文档内逐项高亮匹配,回车跳下一个、Shift+回车跳上一个,显示「第几个 / 共几个」。

全站搜索

文档页面的索引是预先生成的,搜索框直接在浏览器里查这份索引,纯前端、零后端请求。

编辑

M 进入编辑模式:左边写 Markdown 源码,右边实时预览(防抖 260 ms),中间的分隔条可拖动,比例记进设置。

  • 工具栏:标题、加粗、斜体、删除线、行内代码、三种列表、引用、链接、图片、表格、代码块、公式、Mermaid、提示块、分隔线。已应用的格式再点一次即可取消
  • 键盘Ctrl+B/I/K 加粗、斜体、链接;Tab 缩进多行选区;列表中回车自动续行并递增序号,空条目上回车结束列表。所有操作走 execCommand,保留浏览器原生撤销栈
  • 保存Ctrl+S 写回本地原文件。首次保存时浏览器会弹出授权框,把之前的只读授权升级为读写
  • 草稿:每 1.2 秒空闲把内容存进 IndexedDB。切文件、关工作区、关页面时若有未保存修改都会拦一道确认;下次打开该文件会提示恢复草稿
  • Mermaid 缓存:预览按图表源码缓存渲染结果,打字时不会反复重绘图表

说明

写回原文件依赖 File System Access API,只有 Chrome / Edge 等浏览器支持。Firefox、Safari,以及用拖放方式打开的工作区,保存会自动降级为下载 .md 文件。

导出

方式 快捷键 产物
导出 HTML E 单个 .html 文件,CSS 内联、图片转为 data URI,断网也能打开
导出 PDF P 弹出选项对话框后走浏览器打印管线,输出矢量文字、可选中可搜索

PDF 导出可调:纸张(A4 / Letter / A5)、方向、页边距、正文缩放、标题页、可点击的目录页、H1 或 H2 是否另起一页、代码是否换行、是否打印外链地址。深色主题下会临时把 Mermaid 图表切成浅色重绘,避免深底浅字印到白纸上。

重要

最后一步是浏览器的打印对话框,把「目标」选为「另存为 PDF」。页码与页眉页脚由该对话框的「页眉和页脚」选项控制——Chrome 不支持 CSS @page 的页眉页脚区域,纯 CSS 无法自行绘制页码。

技术实现

依赖与体积

模块 用途 体积 加载时机
主包 markdown-it + 插件、highlight.js、Fuse.js、应用代码 约 505 KB 首屏
文档页包 增强脚本 + 搜索 约 60 KB 首屏
KaTeX 公式 约 261 KB + 660 KB 字体 页面出现公式时
Mermaid 图表 约 3.3 MB 页面出现图表时

所有依赖都在构建期打包进产物,运行时不请求任何第三方 CDN,可完全离线部署,也不存在外部资源被墙的问题。

隐私

  • 阅读器的文件读取与写回全部在浏览器内完成,没有任何上传行为
  • 不加载第三方脚本,无埋点、无统计、无 Cookie
  • 设置存 localStorage,目录句柄、阅读位置与编辑草稿存 IndexedDB,都在本机

多语言

界面提供 English、简体中文、繁体中文、日本語、Español、Français 六种语言。英文在根路径,其余语言带 /zh//zh-hant//ja//es//fr/ 前缀,各有独立可分享的网址。顶栏的地球图标可随时切换,会尽量跳到当前页面的对应译文。

界面文案集中在 data/i18n/<lang>.toml,模板与浏览器端脚本共用同一份表;页面只加载当前语言的文案。首次访问时若浏览器语言与当前页面不一致,底部会出现一次可永久关闭的切换提示。

相关