@mteditor/renderer-mini 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MtEditor contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,162 @@
-# Temporary Holding Version
+# @mteditor/renderer-mini
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> 小程序 / uni-app / Taro / 鸿蒙 ArkTS 只读渲染器 —— 子路径导出多端。
+
+## 定位（ADR-0004，必须写进对外文档）
+
+> **小程序端不提供完整富文本编辑。** 小程序无稳定 `contenteditable`，业界无可靠原生富文本方案。
+> MtEditor 在小程序端提供 **100% 保真的只读渲染**；如需编辑，引导用户跳转 H5 / App 编辑页，
+> 编辑后回传 `MtDocument`。
+
+## 状态
+
+**M4-a 已落地**（ADR-0030）。`/wechat` 可用；`/alipay` `/bytedance` `/uni-app` `/taro` `/arkts`
+仍为占位入口 —— 前两者的 `rich-text` 白名单需各自开发者工具**实测**，排期 M4-b，
+按 AGENTS.md §4.4 禁止凭猜测提供（传给 `renderMiniDocument` 会被 `RangeError` 拒绝）。
+
+## 本包做什么：只做三件事，不自己序列化 nodes
+
+| 职责 | API |
+|---|---|
+| ① 通道解析（`auto` → 阈值判定） | `resolveChannel` |
+| ② 主题字面量注入（小程序无 CSS 变量） | `resolveThemeTokens` / `MT_MINI_TOKENS_*` |
+| ③ 平台能力表（准入） | `resolveCapabilities` / `MT_MINI_CAPABILITIES` |
+
+`nodes` 一律由 `@mteditor/document` 的 `serializeDocumentToMini` 产出 ——
+与 `renderer-web` 不自己序列化 HTML（ADR-0021）是同一条原则，
+保证「编辑、详情页、小程序、导出」四处看到的是同一份真相。
+
+## API
+
+| 子路径 | 入口 | 说明 |
+|---|---|---|
+| 通用 | `renderMiniDocument(doc, options)` | `platform` 显式传入；返回 `MtMiniRenderResult` |
+| `/wechat` | `render(doc, options)` | `platform` 已绑定 `'wechat'`；另再导出微信白名单常量 |
+
+```ts
+import { render } from '@mteditor/renderer-mini/wechat'
+
+const { mode, nodes, report, stats, autoSwitched } = render(doc, { theme: 'dark' })
+
+// mode 是「实际使用的通道」，不是入参 —— 宿主必须按它分支
+// nodes 直接喂给 <rich-text nodes="{{nodes}}"> 或递归组件
+// report 为空数组表示内容无损；autoSwitched 非 null 表示触发了阈值降级
+```
+
+### 返回值（`MtMiniRenderResult`）
+
+| 字段 | 说明 |
+|---|---|
+| `platform` | 目标平台 |
+| `mode` | **实际使用**的通道；入参 `'auto'` 时这里是解析结果 |
+| `nodes` | 小程序 nodes（**Array 形式**，§9.1） |
+| `report` | 降级报告（`MT_DEG_*`），无降级时为空数组。**始终返回、不可关闭** |
+| `stats` | 序列化统计（节点数 / 最大深度 / 字节数） |
+| `autoSwitched` | 自动通道切换记录（`from` / `to` / `nodeCount` / `maxNodes`）；未触发为 `null` |
+
+> `report` 与 `autoSwitched` 刻意分开：前者是**内容表达损失**，后者是**渲染策略**。
+> 混在一起会让「报告为空」读不出「内容无损」。
+>
+> 本包**不提供关闭降级报告的开关**（与 `renderer-web` 不同）：`rich-text` 通道会把
+> `video` / `audio` / 公式降级成文本，这类损失用户直接看得见，留开关等于给静默留后门（§12.2）。
+
+### 选项（`MtMiniRenderOptions`）
+
+| 选项 | 缺省 | 说明 |
+|---|---|---|
+| `platform` | `'wechat'` | 目标平台；未实测核实的平台会被拒绝（抛 `RangeError`） |
+| `mode` | `'auto'` | `'auto' \| 'richText' \| 'component'` |
+| `maxNodes` | `3000` | `auto` 的降级阈值，单位是**文档节点数**；判定在序列化**之前** |
+| `theme` | `'light'` | 内置主题名，或自定义字面量表（键含 `--` 前缀） |
+| `themeTokens` | — | 主题字面量补充/覆盖，与 `theme` 合并后**后者优先** |
+| `preRendered` | — | 预渲染产物索引（公式 SVG / 代码高亮，ADR-0012 / ADR-0013） |
+
+## 双通道渲染（ADR-0005）
+
+| 通道 | 实现 | 适用 | 样式来源 |
+|---|---|---|---|
+| **B. 递归自定义组件**（默认） | JSON → 递归 `view`/`text` 树 | 复杂内容、需要交互（图片预览、表格横滑） | 组件 wxss + CSS 变量 |
+| **A. `rich-text` 原生组件** | JSON → `nodes` 数组 | 内容简单、性能优先 | 序列化时**内联的字面量** |
+
+`mode: 'auto'` 的判据是**文档节点数**（`computeTreeStats(doc.content).nodeCount` 与 `maxNodes` 比较），
+**判定发生在序列化之前** —— 判定的意义正是避免一次昂贵序列化。
+不采用「输出节点数」：那要先序列化一次才能判定。
+
+`auto` 触发降级时，`autoSwitched` 会带上 `from` / `to` / `nodeCount` / `maxNodes`。
+本包**不持有事件总线**，所以「降级警告」的载体是这个显式字段，而非 `console.warn`
+（后者在宿主项目里会被淹没，而「功能没生效但也没报错」是本项目出现最多的失败模式）。
+
+## 关键约束
+
+1. **零 DOM**（§9.4）：禁止 `window` / `document` / `navigator` / `DOMParser` / `innerHTML`。
+   `tsconfig.json` 的 `lib` 已剔除 `DOM`，由 `pnpm check:boundaries` 强制。
+   测试配置（`vitest.config.ts` / `tsconfig.test.json`）**刻意不用 jsdom**，
+   否则会掩盖「不小心用了浏览器全局」。
+2. **各端映射表独立**（§4.4）：微信 / 支付宝 / 抖音的 `rich-text` 白名单**不完全一致**，
+   禁止共用一份映射表。未实测的平台**拒绝执行**，不猜。
+3. **CSS 变量不可用**（§9.3）：`rich-text` 内的 `style` 不参与宿主变量继承，
+   序列化时必须把主题变量**解析为字面量**。本包内置 light / dark 两套，键名与
+   `theme-default/src/tokens.css` 逐键对应，由 `pnpm check:theme-tokens` 卡口守着。
+4. **无客户端运行时**：代码高亮与公式必须在 `document` 层预渲染（内联 `style` 的 `span` / 内联 SVG）。
+5. **降级必须可见**（§12.2）：`video` / `audio` / `mention` 等在 `rich-text` 下不可表达的
+   节点必须写入降级报告，禁止静默丢弃。
+6. 体积预算：`dist/wechat/index.js` gzip ≤ 30 KB（ADR-0020：esbuild minify + zlib level 9）。
+
+## 组件资产（通道 B 的实现，随包分发）
+
+`components/` 是**递归自定义组件通道的实现**，作为**唯一权威副本（canonical）**随包发布：
+
+| 文件 | 作用 |
+|---|---|
+| `mt-renderer/` | 入口组件：按 `render()` 返回的 `mode` 在 `<rich-text>` 与递归组件之间分支 |
+| `mt-node/` | 递归节点组件：按 `node.name` 分派到 `<view>` / `<text>` / `<image>` / `<video>` / `<audio>` |
+| `mt-theme.wxss` | 主题变量表（宿主 `@import` 一次），亮色默认 + `mt-theme-dark` 覆盖 |
+
+接入三步、两条通道的样式差异、三处有意的额外包裹（表格 `scroll-view scroll-x` / 公式 data URI /
+附件独立分支）、组件选项（`virtualHost` + `addGlobalClass`，最低基础库 2.21.0）
+见 [`components/README.md`](./components/README.md)。
+
+> **产物形态的例外**（ADR-0030 决策 6）：`components/` 不经 tsup 编译、**不进 bundle**、
+> 因此**不计入 30 KB 体积预算**；它是 `files` 的一部分，由 `check-artifacts.mjs` 断言四件套齐备。
+> 依据：ADR-0005 通道 B 的名字就是「递归自定义组件」—— 组件是通道实现的一部分，不是示例的私事；
+> 放示例里则 canonical 副本与后续更新没有任何同步机制。
+
+## 产物
+
+| 文件 | 用途 |
+|---|---|
+| `dist/index.js` / `dist/index.cjs` | 通用入口（ESM / CJS），`@mteditor/document` 保持 external |
+| `dist/wechat/index.js` / `.cjs` | `/wechat` 子路径 |
+| `dist/{alipay,bytedance,uni-app,taro,arkts}/index.*` | 占位入口（M4-b / M4-c / M5 排期） |
+| `dist/*/index.d.ts` | 类型定义 |
+| `components/**` | 通道 B 的小程序组件（canonical，见上） |
+
+## 命令
+
+```bash
+pnpm --filter @mteditor/renderer-mini build
+pnpm --filter @mteditor/renderer-mini typecheck   # src + 测试配置各一次
+pnpm --filter @mteditor/renderer-mini test        # 默认开启覆盖率（ADR-0019 阈值）
+```
+
+## 测试
+
+| 层面 | 手段 | 覆盖 |
+|---|---|---|
+| 单元 / 契约 | Vitest（`environment: 'node'`） | 能力表 / 通道解析 / 主题 / 渲染编排 / `/wechat` / 公开面；**35 篇基线 × 两条通道**逐字节比对 |
+| 端到端 | `miniprogram-automator` | 渲染器全部节点在**真实小程序运行时**下的渲染 |
+
+**必须真机或微信开发者工具运行**，禁止只跑 jsdom —— jsdom 无法反映真实白名单行为。
+冒烟脚本 `scripts/miniprogram-smoke.mjs`；缺工具时自动跳过，`--require` 强制。
+> ⚠️ 自动化需用 `MINIPROGRAM_APPID` 注入**测试号 AppID**：游客模式 `touristappid`
+> 只在 GUI 手动导入时可用，CLI 会校验 AppID 并报 `APPID_ERROR`（详见
+> `examples/miniprogram/README.md`）。
+
+## 分层
+
+`renderer-mini` → `document`（AGENTS.md §5）。**本包不得依赖 `core`**，
+也不得持有任何 DOM 全局。
+
+## 许可
+
+MIT

package/components/README.md

@@ -0,0 +1,89 @@
+# renderer-mini 的小程序组件（canonical 副本）
+
+> 这一目录是**递归自定义组件通道（ADR-0005 通道 B）的实现**，随包分发。
+> 它的存在理由：通道 B 的名字就叫「递归自定义组件」—— 组件是这条通道的一部分，
+> 不是某个示例的私事（ADR-0030 决策 6）。
+
+## 目录
+
+| 文件 | 作用 |
+|---|---|
+| `mt-renderer/` | 入口组件：按 `render()` 返回的 `mode` 在 `<rich-text>` 与递归组件之间分支 |
+| `mt-node/` | 递归节点组件：按 `node.name` 分派到 `<view>` / `<text>` / `<image>` / `<video>` / `<audio>` |
+| `mt-theme.wxss` | 主题变量表（宿主 `@import` 一次），亮色默认 + `mt-theme-dark` 覆盖 |
+
+## 接入（三步）
+
+**1. 复制或引用组件**
+
+小程序无法从 `node_modules` 直接读组件，把这两个目录复制进项目（如 `components/mt/`）即可。
+组件的 `usingComponents` 用的是相对路径，复制后无需改动。
+
+**2. 页面声明组件**
+
+```json
+{
+  "usingComponents": {
+    "mt-renderer": "/components/mt/mt-renderer/index"
+  }
+}
+```
+
+**3. 渲染**
+
+```js
+import { render } from '@mteditor/renderer-mini/wechat'
+
+Page({
+  data: { mode: 'component', nodes: [] },
+
+  onLoad() {
+    const { mode, nodes, report, autoSwitched } = render(doc, { theme: 'dark' })
+    this.setData({ mode, nodes })
+    if (report.length > 0) console.warn('内容有降级', report)
+    if (autoSwitched) console.warn('已自动切换通道', autoSwitched)
+  },
+
+  /** 图片点击 → 预览；附件点击 → 下载 */
+  onItemTap(event) {
+    const { kind, value } = event.detail
+    if (kind === 'image') wx.previewImage({ urls: [value] })
+    if (kind === 'attachment') wx.downloadFile({ url: value })
+  },
+})
+```
+
+```xml
+<mt-renderer mode="{{mode}}" nodes="{{nodes}}" bind:mttap="onItemTap" />
+```
+
+`mode` **必须是 `render()` 返回的值**，不要传你传进去的 `'auto'` ——
+`'auto'` 的解析结果只有渲染器知道。
+
+## 两条通道的样式来源不同（重要）
+
+| 通道 | 样式来源 | 主题切换 |
+|---|---|---|
+| `component`（默认） | 组件 wxss + CSS 变量 | 覆盖 `page { --mt-*: … }`，或加 `mt-theme-dark` class |
+| `richText` | 序列化时**内联的字面量** | `render(doc, { theme, themeTokens })` |
+
+原因见 `docs/document-model.md` §9.3：`rich-text` 内的 `style` 不参与宿主 CSS 变量继承，
+所以那条通道的主题必须在序列化阶段就解析成字面量。
+
+## 三处有意的额外包裹
+
+跨端一致性要求「无多余包裹」（§12.2），所以下面三处是**明确记录在案**的例外，
+都是小程序能力约束所致：
+
+1. **表格**：外包一层 `<scroll-view scroll-x>` —— 宽表格必须能横滑（§9.2）；
+2. **公式**：`<view class="mt-math">` 里的 SVG 文本由组件转成 `data:image/svg+xml,` URI 后交给 `<image>`；
+3. **附件**：独立分支以便绑定点击。
+
+## 组件选项
+
+两个组件都开了：
+
+- `virtualHost: true` —— 组件自身不产生包裹节点（基础库 ≥ 2.19.2，本包基线 2.21.0）；
+- `addGlobalClass: true` —— 允许宿主的全局样式作用进组件，宿主才有办法微调外观。
+
+最低基础库：**2.21.0**（AGENTS.md §4.4）。

package/components/mt-node/index.js

@@ -0,0 +1,123 @@
+/**
+ * `mt-node` —— 递归节点组件（ADR-0005 的「通道 B：递归自定义组件」）。
+ *
+ * ## 输入契约
+ *
+ * `node` 就是一个 `MtMiniNode`（由 `renderMiniDocument` / `render` 产出）：
+ *
+ * ```ts
+ * { type: 'node', name: 'view', attrs: { class: 'mt-p' }, children: [...] }
+ * { type: 'text', text: '段落内容' }
+ * ```
+ *
+ * 本组件**不做任何数据解释**（不解析 JSON、不拼字符串），只按 `name` 分派
+ * 到对应的小程序标签 —— 所有结构决策都在 `@mteditor/document` 里做完了。
+ *
+ * ## 两个必须显式打开的能力
+ *
+ * - `virtualHost: true`：组件自身不产生包裹节点。§12.2 要求跨端「节点数与层级结构
+ *   一一对应，无多余包裹」，默认的包裹行为会让 35 篇基线全部多出一层。
+ *   基础库要求 ≥ 2.19.2，本包基线 2.21.0（§4.4）满足。
+ * - `addGlobalClass: true`：允许宿主的全局样式（`app.wxss`）作用到本组件内，
+ *   宿主才有办法微调外观而不必改组件源码。
+ *
+ * ## 事件
+ *
+ * 只冒泡一种事件 `mttap`，`detail` 形如：
+ *
+ * ```ts
+ * { kind: 'image' | 'attachment', value: string }
+ * ```
+ *
+ * 递归链上每一层都原样转发，最终由 `mt-renderer` 抛给页面 ——
+ * 节点树有多深，事件都能一路冒上来。
+ */
+
+Component({
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+  },
+
+  properties: {
+    /** 待渲染的单个节点（`MtMiniNode`） */
+    node: { type: null, value: null },
+    /** 是否允许长按选中文本，缺省允许（只读页里用户常需要复制） */
+    selectable: { type: Boolean, value: true },
+  },
+
+  data: {
+    /** `mt-math` 节点转换出的 data URI；空串表示未转换 */
+    mathSrc: '',
+  },
+
+  observers: {
+    node(value) {
+      this.refreshMath(value)
+    },
+  },
+
+  methods: {
+    /**
+     * 公式节点预处理。
+     *
+     * `document` 把预渲染好的 SVG 以**文本载荷**挂在 `<view class="mt-math">` 下
+     * （它不假设宿主如何渲染 SVG）。小程序不能内联 SVG 标签，但 `<image>` 可以吃
+     * `data:image/svg+xml,` 开头的 data URI —— 转换放在这里，因为它属于「渲染」。
+     *
+     * @param {object} node 当前节点
+     */
+    refreshMath(node) {
+      const isMath = node && node.attrs && node.attrs.class === 'mt-math'
+      if (!isMath) {
+        if (this.data.mathSrc !== '') this.setData({ mathSrc: '' })
+        return
+      }
+      const first = node.children && node.children[0]
+      const svg = first && first.type === 'text' ? first.text : ''
+      const src = svg ? `data:image/svg+xml,${encodeURIComponent(svg)}` : ''
+      if (src !== this.data.mathSrc) this.setData({ mathSrc: src })
+    },
+
+    /**
+     * 向上转发子节点的事件。
+     *
+     * @param {object} event 子组件抛出的 `mttap`
+     */
+    onBubble(event) {
+      this.triggerEvent('mttap', event.detail)
+    },
+
+    /** 图片点击：把 `src` 交给页面去 `previewImage` */
+    onImageTap() {
+      this.emit('image', this.attr('src'))
+    },
+
+    /** 附件点击：把下载地址交给页面 */
+    onAttachmentTap() {
+      this.emit('attachment', this.attr('data-src'))
+    },
+
+    /**
+     * 读取当前节点的某个属性。
+     *
+     * @param {string} key 属性名
+     * @returns {string} 属性值；缺失时为空串
+     */
+    attr(key) {
+      const node = this.data.node
+      return (node && node.attrs && node.attrs[key]) || ''
+    },
+
+    /**
+     * 抛出 `mttap`。
+     *
+     * @param {'image' | 'attachment'} kind 事件种类
+     * @param {string} value 载荷（通常是 URL）
+     */
+    emit(kind, value) {
+      if (!value) return
+      this.triggerEvent('mttap', { kind, value })
+    },
+  },
+})

package/components/mt-node/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mt-node": "./index"
+  }
+}

package/components/mt-node/index.wxml

@@ -0,0 +1,95 @@
+<!--
+  mt-node —— 递归渲染单个节点（ADR-0005 通道 B）
+
+  分派规则与 `docs/document-model.md` §9.2 的「递归组件通道」一列逐行对应：
+  文本 → <text>；图片/视频/音频 → 原生组件；其余 → <view> 并递归 children。
+
+  三处**有意的额外包裹**，都是小程序的能力约束所致，不是设计疏漏：
+  1. 表格：包一层 <scroll-view scroll-x> —— 宽表格必须能横滑（§9.2）；
+  2. 公式：<view class="mt-math"> 里的 SVG 文本在 JS 里转成 data URI 后由 <image> 承载；
+  3. 附件：需要绑定点击，故独立分支而非走通用 <view>。
+-->
+
+<!-- 文本节点 -->
+<text
+  wx:if="{{node.type === 'text'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  user-select="{{selectable}}"
+>{{node.text}}</text>
+
+<!-- 图片：mode=widthFix 是「宽度自适应、高度按比例」的唯一可靠方式（§9.2） -->
+<image
+  wx:elif="{{node.name === 'image'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+  mode="widthFix"
+  bindtap="onImageTap"
+/>
+
+<!-- 视频（rich-text 通道不可表达，必须由原生组件承载） -->
+<video
+  wx:elif="{{node.name === 'video'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+  poster="{{node.attrs.poster}}"
+/>
+
+<!-- 音频 -->
+<audio
+  wx:elif="{{node.name === 'audio'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+/>
+
+<!-- 公式：SVG 已在 JS 中转为 data URI -->
+<image
+  wx:elif="{{node.attrs.class === 'mt-math' && mathSrc}}"
+  class="mt-math"
+  src="{{mathSrc}}"
+  mode="widthFix"
+/>
+
+<!-- 表格：外层 <scroll-view scroll-x> 提供横滑 -->
+<scroll-view wx:elif="{{node.attrs.class === 'mt-table'}}" class="mt-table-scroll" scroll-x>
+  <view class="{{node.attrs.class}}" style="{{node.attrs.style}}">
+    <mt-node
+      wx:for="{{node.children}}"
+      wx:key="index"
+      node="{{item}}"
+      selectable="{{selectable}}"
+      bind:mttap="onBubble"
+    />
+  </view>
+</scroll-view>
+
+<!-- 附件卡片：可点击 -->
+<view
+  wx:elif="{{node.attrs.class === 'mt-attachment'}}"
+  class="mt-attachment"
+  style="{{node.attrs.style}}"
+  data-src="{{node.attrs['data-src']}}"
+  bindtap="onAttachmentTap"
+>
+  <mt-node
+    wx:for="{{node.children}}"
+    wx:key="index"
+    node="{{item}}"
+    selectable="{{selectable}}"
+    bind:mttap="onBubble"
+  />
+</view>
+
+<!-- 通用元素节点：<view> + 递归 -->
+<view wx:else class="{{node.attrs.class}}" style="{{node.attrs.style}}">
+  <mt-node
+    wx:for="{{node.children}}"
+    wx:key="index"
+    node="{{item}}"
+    selectable="{{selectable}}"
+    bind:mttap="onBubble"
+  />
+</view>

package/components/mt-node/index.wxss

@@ -0,0 +1,163 @@
+/**
+ * mt-node 的节点样式。
+ *
+ * ## 与 rich-text 通道的**本质差异**（必须写进对外文档）
+ *
+ * | 通道 | 样式来源 | 主题切换方式 |
+ * |---|---|---|
+ * | 组件通道（本文件） | WXSS + CSS 变量 | 宿主覆盖 `page { --mt-*: … }`，或用 `mt-theme.wxss` |
+ * | `rich-text` 通道 | 序列化时**内联的字面量** | `render(doc, { theme, themeTokens })` |
+ *
+ * 原因是硬约束：`rich-text` 内的 `style` 不参与宿主 CSS 变量继承（§9.3），
+ * 而组件通道里的元素是宿主的真实节点，CSS 变量照常生效。
+ *
+ * ## 每个取值都带 fallback
+ *
+ * 宿主不引 `mt-theme.wxss` 也要能渲染出可用外观 —— 一个「必须再引一个文件才能看」
+ * 的渲染器，第一次用就会被认为是坏的。
+ */
+
+/* ---- 段落与标题 ---- */
+
+.mt-p {
+  margin: 0 0 0.75em;
+  font-size: var(--mt-font-size, 15px);
+  line-height: var(--mt-line-height, 1.7);
+  color: var(--mt-color-text, #1f2329);
+  overflow-wrap: break-word;
+}
+
+.mt-h1,
+.mt-h2,
+.mt-h3,
+.mt-h4,
+.mt-h5,
+.mt-h6 {
+  margin: 1em 0 0.5em;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--mt-color-text, #1f2329);
+}
+
+.mt-h1 {
+  font-size: var(--mt-h1-font-size, 28px);
+}
+
+.mt-h2 {
+  font-size: var(--mt-h2-font-size, 24px);
+}
+
+.mt-h3 {
+  font-size: var(--mt-h3-font-size, 20px);
+}
+
+.mt-h4 {
+  font-size: var(--mt-h4-font-size, 18px);
+}
+
+.mt-h5 {
+  font-size: var(--mt-h5-font-size, 16px);
+}
+
+.mt-h6 {
+  font-size: var(--mt-h6-font-size, 15px);
+}
+
+/* ---- 引用（左侧竖线由序列化时内联的 style 提供） ---- */
+
+.mt-blockquote {
+  margin: 0 0 0.75em;
+  color: var(--mt-color-text-secondary, #646a73);
+}
+
+/* ---- 列表：缩进由 WXSS 提供，序号由 <ol> 自绘 ---- */
+
+.mt-ul,
+.mt-ol {
+  margin: 0 0 0.75em;
+  padding-left: 1.6em;
+}
+
+.mt-li {
+  margin: 0.25em 0;
+}
+
+/* 嵌套列表再加一层缩进 */
+.mt-li .mt-ul,
+.mt-li .mt-ol {
+  margin-bottom: 0;
+}
+
+/* ---- 任务列表（小程序无 input，序列化时已用 ☐ / ☑ 字符模拟） ---- */
+
+.mt-task-list {
+  margin: 0 0 0.75em;
+}
+
+.mt-task-item {
+  margin: 0.25em 0;
+}
+
+/* ---- 代码块（背景色与横向滚动由内联 style 提供） ---- */
+
+.mt-pre {
+  margin: 0 0 0.75em;
+  border-radius: var(--mt-radius-md, 6px);
+  font-size: var(--mt-font-size-sm, 13px);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* ---- 分割线（border-top 由内联 style 提供） ---- */
+
+.mt-hr {
+  height: 0;
+  margin: 1.25em 0;
+}
+
+/* ---- 表格：外层 scroll-view 提供横滑 ---- */
+
+.mt-table-scroll {
+  width: 100%;
+  margin: 0 0 0.75em;
+}
+
+.mt-table {
+  border-collapse: collapse;
+  font-size: var(--mt-font-size-sm, 13px);
+}
+
+.mt-th,
+.mt-td {
+  padding: 6px 8px;
+  border: 1px solid var(--mt-color-border, #dee0e3);
+  vertical-align: top;
+  color: var(--mt-color-text, #1f2329);
+}
+
+.mt-th {
+  background-color: var(--mt-color-bg-muted, #f5f7fa);
+  font-weight: 600;
+}
+
+/* ---- 媒体与其它 ---- */
+
+.mt-img {
+  display: block;
+  max-width: 100%;
+}
+
+.mt-math {
+  display: block;
+  max-width: 100%;
+  margin: 0.5em 0;
+}
+
+.mt-attachment {
+  display: block;
+  margin: 0 0 0.75em;
+  padding: 8px 12px;
+  border: 1px solid var(--mt-color-border, #dee0e3);
+  border-radius: var(--mt-radius-md, 6px);
+  background-color: var(--mt-color-bg-muted, #f5f7fa);
+}