渲染能力
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标注文件名:
|
|
警示块
两种写法都支持。GitHub 风格(文档站与阅读器都可用):
|
|
容器风格(仅阅读器可用,文档页不解析):
|
|
六种类型:NOTE TIP IMPORTANT WARNING CAUTION DANGER。
Front Matter
YAML(---)、TOML(+++)、JSON({})三种格式都能识别。title、description、date、author、tags、categories 会提取到文档头部展示,其余字段折叠在「Front Matter」卡片里。
阅读体验
主题
- 浅色 / 深色 / 跟随系统三档,按 D 循环切换
- 首屏渲染前用内联脚本应用主题,不会闪白
- 深色模式下代码配色、图表配色、公式颜色全部同步调整
排版调节
按 , 打开设置面板:
| 项目 | 范围 |
|---|---|
| 正文字号 | 13 – 22 px |
| 行间距 | 1.40 – 2.40 |
| 版心宽度 | 窄 / 标准 / 宽 / 全宽 |
| 正文字体 | 无衬线 / 衬线 |
| 代码行号 | 显示 / 隐藏 |
设置存在浏览器 localStorage 里,跨页面、跨会话保持。
导航
- 文件树:目录可折叠,支持按文件名实时筛选
- 大纲:二到四级标题,滚动时用 IntersectionObserver 高亮当前章节,目录自身也会跟随滚动
- 阅读进度:顶部渐变进度条,滚动超过 600px 出现回到顶部按钮
- 位置记忆:每篇文档的滚动位置按比例保存,重新打开时恢复
- 上下篇:J / K 在文件列表里前后跳转
图片
点击放大进入灯箱:滚轮缩放、拖拽平移、双击切换 1×/2×、+ - 0 键盘控制、可直接下载。
搜索
阅读器内的跨文件搜索
按 / 或 Ctrl+K 打开。载入文件夹后会在后台读取所有 Markdown 建立 Fuse.js 模糊索引,权重依次为标题 > 文件名 > 正文 > 路径。结果显示文件路径与高亮命中的上下文片段,方向键选择、回车打开。
文档内查找
按 F 或 Ctrl+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,模板与浏览器端脚本共用同一份表;页面只加载当前语言的文案。首次访问时若浏览器语言与当前页面不一致,底部会出现一次可永久关闭的切换提示。