在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

adam-p/markdown-here

菜单

核心架构

相关源文件

本文档描述了 Markdown Here 的核心架构，重点介绍实现 Markdown 到渲染 HTML 转换以及反向转换的中心组件、过程和交互。有关浏览器特定实现的信息，请参阅扩展结构。

概述

Markdown Here 的核心架构为在基于 Web 的编辑器（主要是电子邮件撰写器）中将 Markdown 语法转换为格式化 HTML 奠定了基础。该架构旨在跨多个浏览器和电子邮件客户端工作，重点是保持在渲染的 HTML 和原始 Markdown 文本之间切换的能力。

来源

关键组件

核心架构由三个主要组件组成，它们协同工作以提供 Markdown 渲染功能

组件文件主要职责
切换处理器markdown-here.js控制 Markdown 和 HTML 之间的切换，管理包装器
渲染引擎markdown-render.js使用外部库将 Markdown 语法转换为 HTML
实用工具utils.js提供用于 DOM 操作、HTML 清理等的常用函数

切换处理器 (markdown-here.js)

切换处理器是 Markdown Here 的核心。它

  • 确定是渲染 Markdown 还是还原已渲染的 HTML
  • 在 DOM 中找到合适的元素进行操作
  • 管理用于存储原始 Markdown 的包装器机制
  • 将渲染的内容应用回编辑器

来源

渲染引擎 (markdown-render.js)

渲染引擎负责 Markdown 到 HTML 的实际转换。它

  • 使用外部库 (marked.js, highlight.js) 解析 Markdown
  • 应用用户偏好设置以进行渲染
  • 处理语法高亮和数学格式等特殊功能

来源

实用工具 (utils.js)

实用工具组件提供整个扩展中使用的辅助函数

  • DOM 操作和遍历
  • HTML 清理以防止脚本注入
  • 跨浏览器兼容性函数
  • 国际化支持

来源

渲染管道

渲染过程通过以下几个步骤将 Markdown 文本转换为格式化 HTML

来源

查找和检查元素

在渲染开始之前，系统必须确定

  1. 当前哪个元素具有焦点（用户的光标）
  2. 该元素是否是有效的渲染目标
  3. 元素或其内容是否已渲染
  4. 应渲染哪个范围的内容（选定部分或整个元素）

来源

包装器机制

架构的一个关键方面是包装器机制，它可以在渲染的 HTML 和原始 Markdown 之间进行切换

包装器机制的工作原理如下

  1. 渲染时，原始 Markdown 被编码并存储在一个隐藏的 div 中
  2. 隐藏的 div 包含在渲染 HTML 的包装器中
  3. 取消渲染时，系统提取并解码原始 Markdown
  4. 然后整个包装器被原始 Markdown 替换

这种方法确保了

  • 原始 Markdown 完全按原样保留
  • 用户可以在渲染和未渲染状态之间来回切换
  • 该机制适用于不同的电子邮件客户端和富文本编辑器

来源

样式应用

将 Markdown 渲染为 HTML 后，必须应用样式以确保正确显示

  1. 该扩展具有用于渲染内容的默认 CSS 样式
  2. 用户可以通过选项页面自定义这些样式
  3. 样式被明确应用于元素，以确保它们在电子邮件客户端中正常工作
  4. 系统遍历每个渲染的元素并应用内联样式

来源

与浏览器扩展集成

核心架构旨在独立于浏览器特定代码，使其能够在不同浏览器中工作。浏览器特定代码与核心之间的通信通过定义的接口进行

关键接口包括

  1. 当用户触发渲染时，由浏览器特定代码调用的 markdownHere() 函数
  2. 提供给 markdownHere() 的渲染回调，它处理实际的 Markdown 到 HTML 转换
  3. 内容脚本和后台脚本之间用于渲染服务的通信通道

来源

辅助函数和实用工具

核心架构包含许多辅助函数，以支持主要的渲染过程

DOM 操作和遍历

来源

HTML 清理

为了防止安全问题，架构包括 HTML 清理功能

来源

查找特殊元素

该架构包括用于查找电子邮件签名等元素的特殊函数

来源

结论

Markdown Here 的核心架构被设计为模块化、跨浏览器兼容，并能稳健应对电子邮件客户端和 Web 编辑器的限制。包装器机制尤为重要，因为它解决了在渲染的 HTML 和原始 Markdown 之间切换的问题，同时在不同环境中保留了用户的内容。

核心渲染逻辑与浏览器特定集成之间的分离确保了核心功能在不同平台上的工作一致性，同时允许根据每个浏览器的扩展模型进行必要的调整。