# Composer：预览中的点击/选择应显示/选择相应的 Markdown 源代码（尤其是数学公式）

**URL:** <https://meta.discourse.org/t/composer-click-selection-in-preview-should-reveal-select-corresponding-markdown-source-especially-math/393376>\
**Category:** Feature\
**Tags:** composer, math\
**Created:** [2026年一月13日 20:49 UTC](https://meta.discourse.org/t/composer-click-selection-in-preview-should-reveal-select-corresponding-markdown-source-especially-math/393376 "2026-01-13T20:49:55Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2)\
**Post date:** [2026年一月13日 20:49 UTC](https://meta.discourse.org/t/composer-click-selection-in-preview-should-reveal-select-corresponding-markdown-source-especially-math/393376/1 "2026-01-13T20:49:55Z")

</div>

## 问题/动机

在编辑大量数学公式的帖子时，很难在 Markdown 编辑器中找到渲染出的公式的确切来源。

在包含许多行内 `$...$` 表达式或多个 `$$...$$` 显示块的长帖子中，工作流程如下：

在预览中发现错误 → 手动在原始 Markdown 中搜索 → 调整 → 重新检查预览

这对于小的编辑（缺少负号、错误的索引、间距调整等）尤其痛苦，并且随着帖子变长而变得更糟。

## 建议的行为

在编辑器中：

- 点击或选择预览窗格中的渲染元素应：
- 将原始 Markdown 编辑器滚动到相应的源位置，并且
- 将光标置于生成它的源文本内部（或选中它）。

这对以下情况尤其有效：  
• 数学公式（`$...$`、`$$...$$`）  
• 引用  
• 列表  
• 链接  
• 其他已渲染的元素

数学公式是最引人注目的用例，但这种行为具有广泛的实用性。

### 为什么这与滚动同步不同

这与输入时的同步滚动无关。

这是一种预览 → 源跳转，精神上类似于 LaTeX 编辑器中的 SyncTeX：

“我正在看这个渲染出的东西——告诉我它来自哪里。”

### 可能的实现方向（高层次）

在渲染过程中，输出节点可以携带轻量级的源映射元数据（例如 `data-sourcepos="start:end"` 或类似内容）。

在编辑器预览中：

- 点击/选择时，向上遍历 DOM 直到找到最近的带有源位置元数据的节点。
- 使用现有的编辑器 API 在原始编辑器中设置选择范围并将其滚动到视图中。

这种类型的源映射在 CommonMark 工具链中已经以概念形式存在，而数学块尤其是一个自然的候选对象，因为它们已经被明确地分词处理了。

## 为什么这有价值

- 对大量数学公式内容的迭代速度更快
- 减轻编辑长篇技术帖子的认知负荷
- 使预览窗格真正具有交互性，而不仅仅是被动查看
- 很好地扩展到数学以外的其他已渲染元素

如果需要帮助说明这种交互，我很乐意制作一个简短的 GIF 动图。

---

_[View the full topic](https://meta.discourse.org/t/composer-click-selection-in-preview-should-reveal-select-corresponding-markdown-source-especially-math/393376)._