文章编辑器全功能特性手册
文章编辑器全功能特性手册
面向作者的完整功能参考。编辑器为 Tiptap 富文本(WYSIWYG),保存时双写:content_html(展示权威源,保留下划线/颜色/高亮/对齐等样式)与 content_md(Markdown 源,降级展示/导出用,有损——见第 13 节)。
用法:本文档本身就是一份「可直接粘贴的演示」。新建文章 → 全选复制本文档原文(含 $、 $$、代码块、表格等)→ 粘贴保存 → 在前台逐项比对渲染效果。文档中的所有公式均为真实可渲染的 LaTeX,不是「源码↔预期」两列对照。
1. 文本样式
效果 | Markdown 语法 | 快捷键 | 备注 |
|---|---|---|---|
加粗 |
|
| |
斜体 |
|
| |
下划线 | 无 Markdown 表达 |
| 仅存 content_html |
删除线 |
|
| 保留 GFM 单、双波浪号语义 |
下标 |
|
| 工具栏「下标」,与上标互斥 |
上标 |
|
| 工具栏「上标」,与下标互斥 |
行内代码 |
|
| |
高亮 |
| 工具栏高亮按钮(多色) | 颜色仅存 content_html |
文字颜色 | 无 Markdown 表达 | 顶部工具栏色板 | 仅存 content_html |
链接 |
| 工具栏/气泡菜单 | 裸 URL 自动识别为链接(autolink) |
对齐 | 无 Markdown 表达 | 工具栏(左/中/右/两端) | 作用于标题与段落 |
入口提示:颜色选择在顶部工具栏色板;气泡菜单(选中文本时浮出)只有「粗体 / 斜体 / 行内代码 / 链接」四项。
正文上下标使用原生 HTML,不把 ~文本~ 改成下标,也不新增 ^文本^ 方言。数学公式中的上下标仍使用 LaTeX 的 _ 与 ^。包含正文上下标的段落、标题和表格会按需导出 HTML 载体,保留混合格式与字面标点。
2. 标题与目录
支持 H1–H4 四级标题,语法为 # / ## / ### / #### 加空格。
文章页自动渲染目录(TOC),提取 H2 / H3 / H4(H1 不进目录),锚点可点击跳转,滚动时高亮当前章节。
正文内
#+空格快捷生成标题;H1–H3 也可走 Slash 菜单。
3. 列表
无序(-/*/+ 加空格)、有序(1. 加空格)、任务(- [ ] / - [x] 加空格)。
任务列表在文章页渲染为可读勾选框(只读)。
列表内
Tab/Shift+Tab缩进/反缩进。
4. 引用与分割线
引用块用 > 行首触发;分割线用 --- 触发。
4.1 提示块
支持 GitHub 的 NOTE、TIP、IMPORTANT、WARNING、CAUTION 五种提示块。标记必须位于引用块首行并独占一行,可带行尾空格或制表符:
> [!NOTE]
> 补充说明,支持 **强调**。
>
> - 第一项
> - 第二项
> [!TIP]
> 操作建议。
> [!IMPORTANT]
> 需要注意的信息。
> [!WARNING]
> 操作风险。
> [!CAUTION]
> 可能造成损失的操作。Slash 菜单可插入五种提示块,也可在已有提示块中切换类型。工具栏「解除提示块」只移除包装,保留正文。多段、列表与代码块可放入提示正文;普通引用、未知类型、转义标记以及代码中的示例不会升级为提示块。类型标题由编辑器和阅读端生成,不重复写入正文。
4.2 折叠内容
使用原生 <details>/<summary>,不新增冒号围栏方言:
<details><summary>查看实验细节</summary><p>第一段 H<sub>2</sub>O。</p><p>第二段说明。</p></details>Slash 菜单「折叠块」插入后默认展开并定位摘要。摘要和正文都可编辑,正文支持多段、列表、代码与嵌套折叠块;编辑器左侧按钮设置保存后的默认展开状态。工具栏「折叠块 / 解除折叠」可解除包装并保留内容。
阅读端使用浏览器原生交互:点击摘要或聚焦摘要后按 Enter / Space 切换;<details open> 表示默认展开。Markdown 导出保留完整 HTML,并将载体内换行编码为 ,防止代码空行截断折叠结构。
5. 代码块
const a = 1;行首输入
```加语言名(如javascript、go)再回车,或 Slash 菜单「代码块」插入。编辑器右上角下拉切换语言;前台按语言高亮,并显示语言标签与复制按钮。
6. 图片
工具栏「图片」下拉 / Slash 菜单「图片」→ 本地上传或素材库。
上传走分片通道(
purpose=post),支持秒传与断点续传。文章页自动走
w=1200缩略(GIF 保动画),点击看原图。Markdown 语法
同样有效。
7. 表格
列 A | 列 B |
|---|---|
1 | 2 |
Slash 菜单或工具栏「表格」插入 3×3 空表(带表头)。光标进入表格后顶部出现表格工具栏:增删行列、合并/拆分单元格、删除整表。
8. 数学公式
渲染核心为 KaTeX + mhchem 扩展 + 项目物理宏表。本节每一条都是可直接渲染的真实 LaTeX——把本节整段贴入编辑器,应该看到对应的符号/公式排版,而不是命令名文本。
8.1 两种形态与输入规则
形态 | 渲染示例 | 输入方式 |
|---|---|---|
行内公式 | 质能方程 E = mc^2 著名 | Slash「行内公式」,或粘贴 |
公式块 | 见下方示例 | Slash「公式块」,或粘贴 |
键入提示:手动键入时,编辑器的即时转换规则是 `
...
(行内)与$...`(块,行首三美元);单 `...$
在键入时不会即时转换,但**粘贴或 Markdown 导入时**会被@tiptap/markdown` 正常识别为行内公式。手动插入最稳的方式是走 Slash 菜单。
$100、$5 美元这类货币写法不会误触公式。点击公式进入编辑态(源码 + 实时预览),Esc/Enter退出。
8.2 基础结构(真实渲染)
上下标同挂:x^{2}_{i}、a_{n}、x^2
分数与展示型分数:\frac{a}{b}、\dfrac{a}{b}
根号与 n 次根:\sqrt{x}、\sqrt[3]{x}
分数作指数(嵌套):x^{\frac{1}{2}}
二项式系数:\binom{n}{k}
8.3 希腊字母与常用符号
小写(含变体):
\alpha \, \beta \, \gamma \, \delta \, \epsilon \, \varepsilon \, \zeta \, \eta \, \theta \, \vartheta \, \iota \, \kappa \, \lambda \, \mu \, \nu \, \xi \, \pi \, \varpi \, \rho \, \varrho \, \sigma \, \varsigma \, \tau \, \upsilon \, \phi \, \varphi \, \chi \, \psi \, \omega
大写:
\Gamma \, \Delta \, \Theta \, \Lambda \, \Xi \, \Pi \, \Sigma \, \Upsilon \, \Phi \, \Psi \, \Omega
关系与集合:
\infty \, \partial \, \nabla \, \pm \, \mp \, \times \, \div \, \cdot \, \leq \, \geq \, \neq \, \approx \, \equiv \, \sim \, \propto
\in \, \notin \, \subset \, \subseteq \, \supset \, \supseteq \, \cup \, \cap \, \emptyset \, \forall \, \exists \, \neg \, \land \, \lor \, \Rightarrow \, \Leftrightarrow \, \to \, \mapsto
\epsilon 与 \varepsilon、\phi 与 \varphi 形状不同——粘贴本行可见两种字形对照。
8.4 大型运算符(上下限)
行内公式里大运算符的上下限会压缩到侧边:\sum_{i=1}^{n} i、\int_0^1 x\,dx;块级则在正上下方。
8.5 函数名与对数三角
函数名为直立体(不斜),
\operatorname{}可定义任意直立函数名。
8.6 括号与定界符
圆 / 方 / 花 / 角 / 双竖括号(花括号须转义):(x)、[x]、\{x\}、\langle x \rangle、\|x\|
括号随内容自动放大:\left( \dfrac{a}{b} \right)、\left[ \dfrac{a}{b} \right]
左大括号右空(
\right.不可见闭合):\left\{ x \mid x > 0 \right.物理宏自动缩放圆括号:\qty(\dfrac{a}{b})
8.7 标注、帽子与向量
\vu为物理宏单位向量(自动带帽子)。
8.8 矩阵与分段函数(全族环境)
裸矩阵 / 圆括号 / 方括号:
花括号 / 单竖线 / 双竖线:
分段函数与方程组:
行分隔
\\、列分隔&。矩阵行尾的\\是合法语法不是污染——清洗反斜杠双写时务必保留。
8.9 对齐与多行
aligned按&对齐(通常放等号前);gathered各行居中。
8.10 字体与文本
\text{}内可排中文与混合文字:x \text{(其中 } x \geq 0 \text{)}。
8.11 空格
语法 | 渲染 | 含义 |
|---|---|---|
| a\,b | 窄空格(thin) |
| a\;b | 中空格(medium) |
| a\ b | 标准空格 |
| a\quad b | 宽空格 |
| a\qquad b | 更宽 |
8.12 化学(mhchem 全语法)
分子式与离子
水、葡萄糖、硫酸:\ce{H2O}、\ce{C6H12O6}、\ce{H2SO4}
离子电荷:\ce{SO4^2-}、\ce{Na+}、\ce{Ca^2+}
同位素:\ce{^{14}C}、\ce{^{235}U}、\ce{^{2}H}
配位化合物:\ce{[Cu(NH3)4]^2+}、\ce{[Fe(CN)6]^4-}
反应方程式
->反应箭头、<=>可逆箭头、^气体符号、v沉淀符号、[\Delta]反应条件、(g)/(l)/(aq)物态标注——分子式中字母均直立体,不斜。
物理单位
\pu{9.8 m/s^2}、\pu{1.6e-19 C}、\pu{298 K}、\pu{6.022e23/mol}、\pu{3.0e8 m/s}
\pu{}输出直立体单位、自动处理科学计数与下标。
8.13 物理宏表(项目内置,全清单)
\RR \ZZ \NN \QQ \CC \dd{} \dv{}{} \pdv{}{}
\bra{} \ket{} \braket{}{} \expval{}
\abs{} \norm{} \vu{} \grad \divg \curl \qty()源码 | 渲染 | 含义 |
|---|---|---|
| \RR \, \ZZ \, \NN \, \QQ \, \CC | 实数 / 整数 / 自然数 / 有理数 / 复数集 |
| \dd{x} | 直立体微分 d |
| \dv{f}{x} | 莱布尼茨导数(双参数) |
| \pdv{f}{x} | 偏导(双参数) |
| \bra{\phi} \ket{\psi} \braket{\phi}{\psi} | 狄拉克左矢 / 右矢 / 内积 |
| \expval{H} | 期望值(角括号) |
| \abs{x} \norm{v} | 绝对值 / 范数(自动缩放) |
| \vu{i} | 单位向量(带帽子) |
| \grad \divg \curl | 梯度 / 散度 / 旋度 |
| \qty(\dfrac{a}{b}) | 自动缩放圆括号 |
刻意差异:
\div仍是除号 \div(不覆写),散度必须用\divg;\dv/\pdv为双参数形态(不支持 physics 包的单参数算子形态)。
8.14 综合实例(物理)
牛顿第二定律与万有引力
麦克斯韦方程组(微分形式)
麦克斯韦方程组(积分形式)
薛定谔方程(含时)
定态薛定谔与本征值方程
爱因斯坦场方程
狄拉克方程(协变形式)
洛伦兹变换与能动量关系
拉格朗日量与欧拉-拉格朗日方程
哈密顿量
热力学四大方程(简单形式)
理想气体状态方程
8.15 综合实例(数学分析)
泰勒级数
傅里叶级数
高斯积分
欧拉公式与欧拉恒等式
黎曼 Zeta 函数
柯西不等式
留数定理(柯西积分公式)
二项式定理
斯特林公式
8.16 综合实例(线性代数)
行列式(3 阶)与莱布尼茨公式
特征值方程
协方差矩阵
矩阵乘法
正交投影
奇异值分解
8.17 综合实例(概率统计)
贝叶斯定理
全概率公式与期望
二项分布
正态分布
中心极限定理
协方差与相关系数
熵与交叉熵
8.18 综合实例(量子力学)
对易子与不确定关系
自旋算符(泡利矩阵)
期望值(狄拉克记号)
归一化与正交性
一维势阱能级
谐振子能级
8.19 综合实例(化学综合)
氧化还原配平(高锰酸钾氧化 Fe²⁺)
酯化反应(可逆)
电池反应(铅酸蓄电池)
缓冲溶液(亨德森-哈塞尔巴尔赫方程)
配位化合物命名前驱
热化学方程式
8.20 错误容错
故意写错的公式 $\frac{1$(缺右括号)→ 不白屏、不打断页面:公式位置渲染红色错误标记,其余内容正常。编辑器内同样容错,方便边写边改:
8.21 注意事项(踩坑高发)
反斜杠不要双写。
\\是 LaTeX 换行命令(矩阵/aligned 换行靠它)。从 LLM 输出、JSON 接口、部分平台导出拷贝的公式常带\\pi双写,渲染出来是命令名文本("pi、varphi、frac")——改回\即可。本项目与 GitHub/Typora/Obsidian 行为一致,不自动折叠。矩阵/aligned 行尾的
\\是合法语法不是污染,清洗双写时务必保留。花括号是结构符,字面花括号写
\{\}。KaTeX 不支持的 LaTeX 宏包(如
physics、siunitx本体、TikZ)不可用;常用物理命令已由 8.13 宏表覆盖。
9. 图块与流程图
图块承载结构化图示(流程图、时序图、状态图等),架构与数学公式同源(ADR-0004 图块模型):通用 format 属性节点 + 围栏块 Markdown 载体 + 浏览时渲染 + 渲染器注册表。首期支持 Mermaid 格式,后续按渲染器注册表纯增量扩展其他格式。
9.1 输入与形态
用 ```mermaid 围栏块或 Slash 菜单「流程图」插入。每张图是一个独立图块节点(atom),点击进入弹层编辑(源码 + 实时预览),Esc / 点击外部退出。主题跟随站点明暗——框架色(背景、文字、线条)对齐站点配色,节点填色保留 mermaid 默认彩色以便区分。
输入提示:最稳的方式是走 Slash 菜单「流程图」或直接粘贴
```mermaid围栏块。手动逐字键入围栏可能先被识别为普通代码块,撤销后改走 Slash 菜单即可。当前状态:编辑器节点与输入入口已就绪,阅读端渲染与弹层编辑正在接入。完成前,文章中的 mermaid 围栏在阅读端会降级显示为源码文本。
本节每张图都是可直接渲染的真实 mermaid 源码——把对应围栏块贴入编辑器,应该看到渲染出的图,而非源码文本。mermaid 覆盖流程图、时序图、类图、状态图、ER、甘特、饼图、思维导图等十余种图类型,下面逐类给出示例。
9.2 流程图(Flowchart)
最常用。graph 或 flowchart 起头,方向 TB/TD(上下)、LR(左右)、BT/RL。节点形状用括号区分:[矩形]、(圆角)、{菱形}、((圆形))、>旗形]、[/平行四边形/]。
graph LR
A[需求] --> B{评审通过?}
B -->|是| C[开发]
B -->|否| D[打回修改]
D --> A
C --> E[测试] --> F[发布]子图(subgraph)分组、虚线箭头(-.->)、带文字箭头(-->|文字|)、样式按节点 id 指定(class A red; 配 classDef red fill:#fee)。
9.3 时序图(Sequence)
参与者之间的消息时序。participant 声明角色,->> 实线实心箭头、-->> 虚线、--)/--) 异步、x 失败。activate/deactivate 显示激活条,Note over/aside 加注释,loop/alt/opt/par 分组。
sequenceDiagram
participant U as 用户
participant A as 前端
participant B as 后端
participant D as 数据库
U->>A: 点击登录
A->>B: POST /auth/login
B->>D: 查询用户
D-->>B: 用户记录
B-->>A: Set-Cookie: session
A-->>U: 跳转首页
Note over A,B: opaque session 模型9.4 类图(Class Diagram)
UML 类关系。class 定义类(属性 +public/-private/#protected),关系:<|-- 继承、*-- 组合、o-- 聚合、--> 关联、..> 依赖、..|> 实现。
classDiagram
class Animal {
+String name
+int age
+eat() void
+sleep() void
}
class Dog {
+bark() void
}
class Cat {
+meow() void
}
Animal <|-- Dog
Animal <|-- Cat9.5 状态图(State Diagram)
状态机。stateDiagram-v2 起头(v2 语法更全),[*] 表示起止状态,A --> B: 触发条件。note 加注释,复合状态用 state 名称 {...} 嵌套。
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 用户付款
待支付 --> 已取消: 超时/取消
已支付 --> 已发货: 商家发货
已发货 --> 已签收: 用户签收
已签收 --> [*]
已取消 --> [*]9.6 实体关系图(ER Diagram)
数据库表关系。实体A ||--o{ 实体B : "关系名",连接符四段:基数(|| 一对一、}| 一对多强制、o{ 零对多)+ 关系线。字段在实体 {} 内,PK/FK 标主外键。
erDiagram
USER ||--o{ POST : "发布"
USER ||--o{ COMMENT : "评论"
POST ||--o{ COMMENT : "包含"
USER {
bigint id PK
string username
string email
}
POST {
bigint id PK
bigint author_id FK
string title
text content
}
COMMENT {
bigint id PK
bigint post_id FK
bigint author_id FK
text body
}9.7 甘特图(Gantt)
项目排期。dateFormat 指定日期格式,section 分组,任务语法 名称 :状态, id, 起始, 持续。状态 done/active/crit/空(待办),after id 表示依赖前序任务。
gantt
title 项目排期
dateFormat YYYY-MM-DD
section 设计
需求分析 :done, a1, 2026-01-01, 7d
原型设计 :done, a2, after a1, 5d
section 开发
前端开发 :active, b1, after a2, 14d
后端开发 :b2, after a2, 14d
section 上线
测试 :c1, after b1, 5d
部署 :c2, after c1, 2d9.8 饼图(Pie Chart)
占比可视化。pie title 标题 起头,每行 "标签" : 数值。
pie title 技术栈占比
"React 前端" : 45
"Go 后端" : 30
"PostgreSQL" : 15
"Redis 缓存" : 109.9 用户旅程图(User Journey)
体验地图,按步骤打分(0-5,越高越满意)。journey title 起头,section 分阶段,每行 任务名: 分数: 参与者。
journey
title 用户购物之旅
section 浏览
打开首页: 5: 用户
搜索商品: 4: User
查看详情: 4: User
section 下单
加入购物车: 5: User
结算付款: 3: User, 系统
section 售后
收货: 5: User
评价: 4: User9.10 思维导图(Mindmap)
树状发散。mindmap 起头,缩进表达层级(不同深度的节点形状可用 ((圆形))、[方形]、(圆角) 区分)。
mindmap
root((博客系统))
前端
React
Vite
Tailwind
后端
Go
Chi
PostgreSQL
功能
文章
公式
图块思维导图靠缩进定层级,必须用空格缩进(与编辑器整体 4 空格缩进一致),不要混 Tab。
9.11 时间线(Timeline)
按时间排列的事件。timeline title 起头,时间段 : 事件,同一时间段下多事件换行缩进。
timeline
title 图块功能演进
2026 Q1 : 设计 ADR-0004
: 数学公式落地
2026 Q3 : mermaid 图块接入
: 渲染器注册表
未来 : PlantUML
: Graphviz9.12 Git 图(Gitgraph)
分支与提交历史。gitGraph 起头,commit 提交、branch 名称 建分支、checkout 名称 切换、merge 名称 合并。提交可加 id:/tag:/type:(NORMAL/REVERSE/HIGHLIGHT)。
gitGraph
commit id: "init"
commit id: "基座"
branch develop
checkout develop
commit id: "开发"
checkout main
merge develop tag: "v1.0"
commit id: "发布"9.13 象限图(Quadrant Chart)
四象限定位。quadrantChart title 起头,定义 x-axis/y-axis、四个 quadrant-N 标签,数据点 名称: [x, y](0-1 归一化坐标)。
quadrantChart
title 技术选型评估
x-axis 低成本 --> 高成本
y-axis 低收益 --> 高收益
quadrant-1 重点投入
quadrant-2 谨慎评估
quadrant-3 暂不考虑
quadrant-4 快速验证
Mermaid: [0.3, 0.85]
PlantUML: [0.6, 0.7]
D2: [0.5, 0.55]
Graphviz: [0.4, 0.5]9.14 数值图表(XYChart)
柱状 / 折线图(beta,语法稳定中)。xychart-beta 起头,title、x-axis 标签数组、y-axis "名称" 下限 --> 上限,bar [...]/line [...] 数据。
xychart-beta
title "月度文章发布量"
x-axis ["1月", "2月", "3月", "4月", "5月", "6月"]
y-axis "篇数" 0 --> 20
bar [5, 8, 12, 10, 15, 18]
line [5, 8, 12, 10, 15, 18]还有 C4 架构图、需求图(Requirement)、桑基图(Sankey)、看板(Kanban)、数据包(Packet)等更小众类型,语法见 mermaid 官方文档,渲染管线一致。
9.15 渲染与安全
浏览时渲染:content_html 只存语义化标记
<div data-type="diagram-block" data-format="mermaid" data-source="...">,最终 SVG 在读者浏览器渲染,不烘焙进 HTML(体积小、主题可跟随、源码可搜索可复制、升级渲染器不动存量数据)。统一手绘:Mermaid 负责语义与布局,净化后的 SVG 统一经 Rough.js 转换轮廓、填色与连线,不依赖 Mermaid 原生
handDrawn的图型覆盖。编辑器预览与阅读端同源;相同几何使用固定笔触种子,文字和箭头保留原始语义。已验证本节全部 13 种示例图型。手写字体 CDN:英文使用 Excalifont(Excalidraw 0.18.1 发布分片),中文使用小赖体(Xiaolai SC)。图块按需声明
@font-face,等待标签所需分片加载后再测量布局;中文分片来自中文网字计划。首次加载需要可访问字体 CDN,字体未覆盖的字符使用系统回退字体。导出字体与许可:SVG 文件内嵌实际标签所需的 WOFF2 分片、版权与完整 OFL 通知,不依赖站点样式或远端字体;PNG 由同一 SVG 栅格化。仓库保留两份手绘字体许可作为导出通知来源,不保存字体二进制副本。
宽图:保持自然字号,在图内横向滚动,不将整张图缩成小字。
甘特图:以 920px 自然宽度布局,任务字号 14px、日期字号 12px;只隐藏碰撞的日期文字,保留原始刻度、任务日期、时间格式与作者设置的刻度间隔。任务与日期轴之间保留独立间距,顶部日期轴和小时级项目使用同一避碰规则。
双重 XSS 防线:全局
securityLevel: strict+ render 产物经 DOMPurify 二次清理。mermaid 支持 per-diagram%%{init}%%指令覆盖全局 strict(docmost CVE-2026-23630 的存储型 XSS 攻击路径),第二道 DOMPurify 兜底剥除<script>、on*事件属性、foreignObject可执行内容。主题重渲染:mermaid 把颜色烘焙进 SVG,切主题需重新渲染(非 CSS 跟随)。组件持有 source,主题变化时重新 initialize + 重渲染所有可见图块。
9.16 渲染器注册表(扩展机制)
图块通过 format → 渲染器 注册表支持多格式扩展,收敛了原本散落在阅读端的 if/else 分发。新增图表格式只需:
在
shared/ui/diagram/注册表登记一个渲染器组件(含 lazy 加载、主题适配、错误降级)扩展
diagramBlock节点的format属性取值Slash 菜单与围栏 info string 增加对应入口
分发逻辑集中在注册表,不散落在分发代码里,互不影响。
9.17 其它图表格式(路线图)
上面 9.2-9.14 都是 mermaid 一种格式内的图类型。图块的 format 属性还支持接入其它独立的图表语言(每种自带渲染器)。下表穷举业界主流格式,按渲染路径分组——纯前端渲染的接入成本低(注册 lazy 组件即可),需服务端的要评估渲染服务部署。
纯前端渲染(浏览器内,无需后端)
格式 | info string | 渲染依赖 | 适用场景 | 状态 |
|---|---|---|---|---|
Mermaid |
| mermaid.js | 见 9.2-9.14,覆盖最广 | 首期实现 |
Graphviz (DOT) |
| viz.js (Wasm) | 通用有向 / 无向图、依赖图、状态机,学术与图谱可视化 | 规划中 |
D2 |
| @terrastruct/d2(Wasm 或 JS) | 现代架构图,多布局引擎,语法比 mermaid 更适合复杂拓扑 | 规划中 |
nomnoml |
| nomnoml | UML 类图专用,极简语法,适合快速类关系 | 规划中 |
Excalidraw |
| @excalidraw/excalidraw | 手绘风格草图 / 白板,SVG/JSON 源 | 评估中 |
Markwhen |
| markwhen | 时间线 / Gantt / 项目里程碑,Markdown 风语法 | 评估中 |
需服务端渲染(前端发源码,后端返回 SVG/PNG)
这些格式依赖 Java / 二进制运行时或大型布局引擎,浏览器内渲染成本过高,走后端渲染服务。部署可选自建渲染服务(如 PlantUML Server、Kroki)或对接 Kroki.io 公共实例。
格式 | info string | 运行时 | 适用场景 | 状态 |
|---|---|---|---|---|
PlantUML |
| Java | 全 UML 覆盖(类 / 组件 / 部署 / 时序 / 活动),企业生态成熟 | 规划中 |
Structurizr DSL |
| Java | C4 模型架构图(上下文 / 容器 / 组件),单一模型多视图 | 评估中 |
Blockdiag |
| Python | 简单框图 / 网络图 / 时序图,日系生态 | 评估中 |
ditaa |
| Java | ASCII 草图转结构图,嵌入式文档常用 | 评估中 |
Pikchr |
| C 二进制 | PIC 风格精确布局,Fossil 文档系统原生 | 评估中 |
DBML |
| JS(@dbml/core) | 数据库 schema(ER 图),DBDiagram 语法 | 评估中 |
Kroki 统一渲染网关:上述服务端格式可通过部署 Kroki 一个服务统一承接(支持 PlantUML / Graphviz / D2 / Blockdiag / ditaa / Pikchr / DBML / Structurizr 等十余种格式),减少自建多种运行时的成本。未来接入服务端格式时,建议优先评估 Kroki 而非逐个自建。
新增格式的优先级与排期见 issue 跟踪。
9.18 容错与降级
语法错误:编辑器内显示 mermaid 报错信息(便于作者定位);阅读端降级为「图表渲染失败」占位 + 折叠的源码(不向读者暴露详细错误)。
无 JS 环境:显示 mermaid 源码文本(源码本身可读,与公式降级一致)。
未知 format:注册表查不到对应渲染器时,降级显示 source 文本。
10. 人物与语义内容卡片
人物提及和内容卡片从 Markdown 源码模式输入。它们沿用行内代码或围栏代码块载体,保存后在文章页转换为可交互组件;普通代码块仍按原样高亮。
10.1 行内人物提及
`persona`:显示当前公开人设的名字。`persona:瑠爱`:用冒号后的文字作为行内称呼,资料卡仍取当前公开人设。鼠标悬停或键盘聚焦时显示头像、角色定位和简介;点击资料卡进入
/persona。当前没有公开人设时降级为普通文字,不发起无意义的资料请求。
10.2 对话与 GitHub 项目引用
```dialogue
{"profile":"active","side":"left","text":"那个……要一起看球吗?"}
```
```dialogue
{"speaker":"访客","side":"right","text":"当然。"}
```
```github
{"repo":"VOD-Studio/violet","description":"个人创作和读者社区。","language":"TypeScript","stars":128,"forks":18}
```dialogue.profile取值active时复用当前公开人设;也可用speaker和avatar写独立角色。side只接受left或right。github使用项目专用引用:仓库名与所有者组成身份区,头像由 GitHub 提供;简介、语言与统计沿阅读顺序展示,不复用通用链接预览。它是作者保存的项目快照,不在阅读时请求 GitHub 元数据;description、language、stars、forks可省略,统计值0正常展示。仓库名和右上角 GitHub 标识可打开项目,href可覆盖默认地址。点击 Star 统计进入 GitHub 仓库页操作,点击 Fork 统计打开 GitHub 的创建 Fork 页面;登录与确认由 GitHub 完成,本站不读取读者的 GitHub token,不将保存的统计快照伪装成实时结果。
对话实际展示案例
以下两轮对话直接显示为左右气泡。左侧复用当前公开人设;右侧使用独立发言人,不提供头像时显示名字首字。
{"profile":"active","side":"left","text":"那个……要一起看球吗?"}{"speaker":"访客","side":"right","text":"当然。"}GitHub 实际展示案例
以下围栏直接渲染为项目卡片,不是外层 Markdown 代码示意。元数据于 2026-10-05 从 GitHub 公开 API 读取;统计是保存时的快照,不代表实时数值。
基本引用:只提供仓库名称。
{"repo":"VOD-Studio/violet"}完整引用:简介、语言、星标、派生数与显式链接;派生数为 0 时仍展示。
{"repo":"VOD-Studio/violet","description":"全栈博客平台 · Go 后端 + React 前端,内置 MCP server 供 AI agent 读写文章","language":"TypeScript","stars":3,"forks":0,"href":"https://github.com/VOD-Studio/violet"}10.3 链接、X 推文与社交链接组
```link-preview
{"url":"https://example.com/story","title":"文章标题","description":"一段简短摘要。","image":"/uploads/cover.webp","site":"Example"}
```
```tweet
{"id":"1728987032779694397"}
```
```tweet
{"url":"https://x.com/GenshinImpact/status/1728987032779694397"}
```
```tweet
{"url":"https://x.com/example/status/1","author":"瑠爱","handle":"@wakasumi_rua","text":"月光刚好落在书页上。","avatar":"/uploads/avatar.webp","date":"2026 年 9 月 7 日","verified":true}
```
```social-links
{"links":[{"label":"GitHub","href":"https://github.com/VOD-Studio","handle":"VOD-Studio","icon":"github"},{"label":"来信","href":"mailto:hello@example.com","handle":"hello@example.com","icon":"email"}]}
```tweet支持两种模式:只写id或 X / Twitter 原文url时,客户端通过同源服务加载 FxTwitter 完整正文,并补充 X 官方认证与组织关联信息;填写author、handle、text等完整字段时,直接展示随文章保存的快照,不请求来源接口。标识必须写成字符串,避免长 ID 丢失精度。动态引用支持原作者、正文链接、照片、视频、单层引用、发布时间与来源统计。点赞和回复在新标签页打开 X 的真实操作入口,不修改本站计数;姓名、账号和组织标识分别导航。来源加载失败时保留原文入口和手动重试;明确不可用、已删除或私密的结果不伪装成可阅读内容。
ID、URL 引用与保存快照的正文默认显示 6 行;超出时提供「展示更多/收起」,嵌套引用独立折叠和展开,图片、视频与统计保持展示。
"maxTextLines": 4可调整正文行数,"maxTextLines": 0展示全文;只接受非负整数。link-preview保持静态快照。上述组件都不加载第三方脚本或 iframe,但配图与视频会请求其资源地址。动态推文的数据源是外部服务,受其可用性与限流影响;需要长期固定内容时使用快照模式。社交链接组支持 1–8 项;
icon可选github、x、email、website、rss或video,省略时按链接推断。链接只接受站内路径、
http(s);社交链接额外接受mailto:。图片只接受站内上传路径或http(s)。JSON 无效或字段不合规时,文章其余内容照常渲染,错误位置显示可读的配置提示。
X 推文实际展示案例
本组只选用 @GenshinImpact、@thsottiaux 与 @NintendoAmerica 三个账号的真实公开推文,嵌套引用也限于这三个账号。ID、作者、认证类型、正文和媒体已于 2026-10-05 通过 FxTwitter 接口核对。动态卡片读取来源当前结果,认证及组织关联标识以实际返回为准,不按账号名称猜测或补造。以下标题只描述已确认的内容类型。
短文本与个人认证:189 字符正文,无附件;引用作者自己的另一条无附件推文。
{"id":"2061106703446450392"}长文本与多段正文:1,808 字符,无附件;正文默认显示 6 行,可展开与收起。引用作者自己的另一条无附件推文独立折叠与展开。
{"id":"2071740419030053227","maxTextLines":6}较长多段正文:520 字符的公告,附 1 张图片。
{"id":"1949667378637214138"}单张图片:正文介绍配合 1 张角色图片。
{"id":"1376851698350751751"}四张图片:4 张壁纸组成的图片组。
{"id":"1728987032779694397"}三张图片:3 张图片组成的图片组。
{"id":"2070358391411642467"}视频:附 1 段约 142 秒的视频。
{"id":"1879879950854926422"}官方认证与正文链接:附 1 张图片及正文链接。
{"id":"1907788934874062911"}保存正文快照:固定保存另一条无附件推文的作者、完整正文、头像和 UTC 发布时间,不请求推文数据接口。 头像仍是外部图片资源;此例不填写认证标记,来源当前的认证与组织信息请看动态案例。
{"url":"https://x.com/thsottiaux/status/2062329981548802523","author":"Tibo","handle":"@thsottiaux","text":"Hi. Over the last 24 hours we had three separate small incidents that affected Codex reliability. Those are three too many and we are taking active steps for them to not reproduce.\n\nI have reset usage limits for Codex across all paid plans. May the tokens flow again.","avatar":"https://pbs.twimg.com/profile_images/2093807917833281537/2yBgpwVV_200x200.jpg","date":"2026-06-04 00:25:58 UTC"}10.4 文章末尾签名
文章设置侧栏打开「作者签名」后,公开文章会在正文末尾以文章作者的用户名落款。内置矢量笔迹在落款进入视口时书写;其他用户名显示为文字签名。系统的「减少动态效果」设置会关闭书写过渡。
11. Markdown 快捷输入(输入规则)
输入即转换,无需菜单:
输入 | 得到 |
|---|---|
| 标题 |
| 引用块 |
| 列表 |
| 任务列表 |
| 代码块 |
| 分割线 |
| 行内样式 |
| 公式节点 |
| 流程图(图块,见 §9) |
单
$公式$在键入时不会即时转换,但粘贴/MD 导入时有效;手动插入走 Slash 菜单最稳。
12. Slash 菜单
任意位置输入 / 唤起,支持关键词/中文模糊搜索,按组显示:
基础:正文、一/二/三级标题
列表:无序、有序、任务列表
块:引用、五种提示块、折叠块、代码块、可运行代码块、分割线、表格(3×3 带表头)
媒体:行内公式、公式块、图片、流程图
「脚注」命令在当前位置插入引用,并将光标移到文末脚注正文;已有脚注会出现在「引用脚注」候选中,可再次引用同一正文。点击编辑器内的脚注引用可定位正文。阅读时每次引用都有独立 ID 和回链;插入、删除引用后编号与回链同步更新。
第一次引用[^note],再次引用同一脚注[^note]。
[^note]: 可编辑的 **富文本正文**。
第二段正文,保留四空格缩进。H4–H6、对齐、颜色、链接、行内样式、撤销重做等不在 Slash 菜单——只在工具栏/气泡菜单。
13. 存储与有损说明(重要)
源码直接保存:源码输入实时同步文档,保存草稿或导出
.md无需先切回富文本;源码模式导出保留当前输入的引用式链接等写法。content_html 是展示权威源:下划线、文字颜色、高亮颜色、对齐这些 Markdown 表达不了的样式只存在这里,文章页始终正确。
content_md 仍有格式边界:文字颜色、下划线等无原生 Markdown 表达的样式可能丢失。普通表格保留管道符转义、行内代码和列对齐;合并单元格、列宽等以 HTML 表格载体保留,不能强行降为普通 Markdown 表格。
脚注、公式、任务勾选状态、高亮、图块和可运行代码源码可在编辑、保存与重新打开之间往返。脚注定义保留源码顺序,显示编号按首次引用顺序更新。
正文上下标、提示块与折叠内容可在编辑器、API 转换和两条阅读链路之间往返。若脚注引用位于必须保留的 HTML 载体内部,Markdown 导出会保留整篇 HTML,避免 HTML 引用与 Markdown 定义使用不同 ID;普通脚注仍导出
[^label]。这不会替换已有文章的content_html。编辑器使用 marked 的围栏解析规则,支持反引号或波浪号围栏;可运行围栏接受
run/runnable与带空格的 JSON 资源参数。普通代码中的$...$、==...==和围栏示例不会被当作正文公式或高亮。已知
content_md(包括版本预览)按 Markdown 解析,允许白名单内的原生 HTML 混排;content_html仍直接走安全 HTML 阅读链路。公式、Mermaid、可运行代码、任务列表、高亮、提示块与折叠内容共用阅读组件,链接锚点与脚注回链留在当前页。任意脚本、事件属性和危险链接不在允许范围内。
13.1 旧文章脚注仍显示源码时
解析器升级不会重写已经保存的 content_html。若正文仍显示 [^note],先检查原始 content_md 是否保留对应的 [^note]: 正文,以及 HTML 是否已经把两者存成普通段落;直接打开旧 HTML 再保存不会自动恢复脚注。
修复按文章逐条进行:
备份原始 Markdown、HTML 和可编辑元数据,确认脚注定义完整且不是代码示例。
用当前转换器从原始 Markdown 生成候选 HTML,在预览中检查引用编号、定义正文及每个回链目标。
对照旧 HTML,确认脚注以外的正文、标题锚点、链接、表格、公式和图块未变。若 HTML 另含颜色、对齐、合并单元格等独有格式,不能直接用整篇 Markdown 转换结果覆盖。
仅更新核验过的文章,保留原始 Markdown 与元数据;通过 MCP 更新时须显式保留标题、slug、摘要、封面、标签、转载来源和签名设置。当前 MCP 不能无损保留非空 SEO 字段或精选标记,这类文章应使用能保留这些字段的编辑入口。
回读保存结果,打开公开页面实测引用与回链,并确认代码示例中的脚注标记仍为文字。
不要全站批量清空 HTML 强制降级,也不要在阅读时重新解析 HTML 段落里的所有 Markdown 标记;两者都会绕过作者已经保存的内容语义。
14. 暂不支持
学术文献引用与书目管理:不解析
[@citekey],未接入 BibTeX、CSL 或自动参考文献列表;普通引用式链接和脚注不等同于这项能力。Wiki 链接、定义列表(
术语/: 定义)与缩略词声明(*[HTML]: …)尚未作为专用语法接入。
