markdown/实现 Typora 风格的自动显隐与代码块样式.md at d774524881ae3808f53246c6bfb8e3ee420ac767

目标效果

自动显隐 Markdown 标记：光标不在当前行/当前元素时，自动隐藏 #、*、**、> 、``` 等语法标记，只显示渲染后的文本；光标移入时恢复显示以便编辑。
代码块所见即所得：代码块（Fenced Code Block）显示为灰色背景的卡片块，优化字体和间距，不再只是裸露的文本。
柔和样式优化：调整行高、字号、颜色、段落间距，使其视觉上更接近渲染后的文档（Typora 风格）。

目前的 liveMarkdownDecorations.js 基于正则匹配行，无法精准处理嵌套语法（如加粗内的斜体）和光标交互。将改用 ViewPlugin 结合 syntaxTree（语法树）：

语法树解析：利用 @codemirror/language 提供的 syntaxTree 遍历文档节点，精准识别 HeaderMark（标题#）、EmphasisMark（*）、CodeMark（）、FencedCode`（代码块）等节点。
光标感知：在 ViewPlugin 的 update 钩子中监听 docChanged 和 selectionSet。
动态装饰：
- 隐藏逻辑：如果节点的范围 不包含 当前光标选区，则对该节点的语法标记部分应用 Decoration.replace({})（完全隐藏）或 Decoration.mark({ class: 'cm-md-hidden' })。
- 代码块逻辑：识别 FencedCode 节点，对整个范围应用 Decoration.line({ class: 'cm-md-fenced-code' }) 添加背景色；对首尾的 CodeMark（```）在非聚焦时进行隐藏或弱化处理。

隐藏类 (.cm-md-hidden)：设置为 display: none 或 font-size: 0。
代码块样式 (.cm-md-fenced-code)：
- 背景色：var(--app-background) 或微调的灰色。
- 圆角与内边距：让代码块看起来像一个独立的容器。
- 字体：使用等宽字体 (monospace)。
柔和排版：
- 增加 line-height (如 1.8)。
- 增加段落间距 (margin-bottom 效果)。
- 调整标题 (Header) 的 font-weight 和 border-bottom，使其更像预览模式。

废弃旧逻辑：清空或重写 src/codemirror/liveMarkdownDecorations.js。
实现 ViewPlugin：
- 引入 syntaxTree。
- 编写遍历逻辑，识别 Markdown 节点。
- 实现光标包含判断逻辑。
- 生成 Decoration.replace (隐藏) 和 Decoration.line (样式)。
完善 CSS：在 LivePreviewEditor.vue 中补充对应的 CSS 规则（.cm-md-hidden, .cm-md-header, .cm-md-fenced-code 等）。
验证：测试标题、加粗、代码块在光标移入/移出时的显隐效果。