概述

相关源文件

• README.md
• src/common/CHANGES.md
• src/install.rdf
• src/manifest.json
• store-assets/description.txt

Markdown Here 是一款浏览器扩展，允许用户以 Markdown 语法编写内容，并在发送或发布前将其渲染为格式化的 HTML。此扩展主要用于电子邮件撰写，但也适用于各种 Web 环境，如论坛、博客平台和笔记应用程序。

本文提供了 Markdown Here 的架构、核心组件以及它们在系统中如何交互的技术概述。有关具体的安装说明，请参阅安装和设置。有关详细的功能信息，请参阅功能和特性。

系统架构

Markdown Here 围绕几个协同工作的关键系统构建，以提供核心功能：

主要组件有：

1. 扩展基础设施：针对 Chrome、Firefox、Safari、Opera 和 Thunderbird 的浏览器特定集成代码
2. 核心渲染引擎：处理 Markdown 转换和 HTML 转换
3. 用户界面与选项：提供切换功能和配置设置
4. 国际化：支持多语言
5. 法律与贡献：许可证和贡献框架

来源：src/manifest.json src/install.rdf README.md

核心渲染流程

Markdown Here 的核心功能是用于在 Markdown 和 HTML 之间进行转换的渲染管道。

当用户激活“Markdown 切换”功能时：

1. 系统会判断内容是否已渲染。
2. 对于未渲染的内容，系统会从 HTML 编辑器中提取文本。
3. 然后，MarkdownRender.markdownRender 函数使用 marked.js 解析器处理 Markdown。
4. 代码块会通过 highlight.js 进行语法高亮。
5. 如果启用，TeX 数学表达式也会被渲染。
6. 对于已渲染的内容，会提取原始 Markdown 以供编辑。
7. CommonLogic 模块会执行安全检查，例如“忘记渲染”检测。

来源：src/common/markdown-here.js src/common/markdown-render.js src/common/mdh-html-to-text.js src/common/common-logic.js

浏览器扩展基础设施

Markdown Here 通过不同的扩展架构支持多种浏览器。

架构因浏览器平台而异：

1. Chrome/Opera (WebExtension API):

   • manifest.json：定义扩展属性、权限和内容脚本
   • backgroundscript.js：处理上下文菜单创建和浏览器事件的后台进程
   • contentscript.js：在网页上下文中运行，用于查找和处理可编辑内容

2. Firefox/Thunderbird（旧版 XUL 和 WebExtension）:

   • Firefox 现在使用 WebExtension 架构（类似于 Chrome）。
   • Thunderbird 仍然使用 install.rdf 和 chrome.manifest 用于基于 XUL 的扩展。
   • 覆盖文件与浏览器 UI 集成。

3. 通用核心组件:

   • 共享的 JavaScript 模块处理实际的 Markdown 转换。
   • 这使得所有平台都能拥有相同的核心功能。

来源：src/manifest.json src/install.rdf src/chrome/backgroundscript.js src/chrome/contentscript.js

配置系统

Markdown Here 为用户提供灵活的配置系统：

配置系统提供：

1. 主要样式 CSS：用于控制渲染后 Markdown 外观的可自定义 CSS
2. 语法高亮主题：用于代码块的多种主题
3. TeX 数学配置：数学公式渲染设置
4. 键盘快捷键：可自定义的快捷键（默认为 CTRL+ALT+M）
5. 忘记渲染检查：发送包含未渲染 Markdown 的电子邮件时的可选警告

这些设置通过 OptionsStore 抽象层，使用浏览器适用的机制（Chrome Storage API、Firefox Preferences 或 localStorage 作为备用）进行存储。

来源：src/common/options.js README.md137-145

主要功能

功能	描述
Markdown 渲染	将 Markdown 语法转换为格式丰富的 HTML
语法高亮	自动高亮显示 100 多种语言的代码块
TeX 数学支持	使用 CodeCogs 或其他服务渲染数学公式
可自定义的样式	可配置的渲染输出主题和 CSS
切换功能	允许在原始 Markdown 和渲染后的 HTML 之间切换
多平台支持	兼容主流浏览器和电子邮件客户端
国际化	支持 12 种以上语言，包括英语、日语、德语、法语

来源：README.md11-18 src/common/CHANGES.md11-14

浏览器和平台兼容性

Markdown Here 旨在与各种浏览器和 Web 应用程序协同工作：

浏览器/应用程序	支持级别
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Opera	完全支持 (v16+)
Thunderbird	完全支持
Gmail	完全支持
Yahoo 邮件	良好支持
Outlook.com/Hotmail	良好支持
Google 群组	良好支持
Blogger	良好支持
WordPress	良好支持
印象笔记网页版	良好支持

有关更详细的兼容性信息，请参阅支持的平台。

来源：README.md155-157 src/common/CHANGES.md333-338

开发和构建过程

对于希望使用 Markdown Here 代码库的开发者，该项目使用一个简单的构建系统。

cd utils
node build.js

这将为不同的浏览器平台构建扩展包，生成：

• 适用于 Chrome/Opera/Firefox（WebExtension）的 .zip 文件
• 适用于 Thunderbird（XUL 扩展）的 .xpi 文件
• Safari 需要 Safari 扩展构建器。

有关贡献给 Markdown Here 的更多信息，请参阅开发指南。

来源：README.md179-214

第三方依赖

Markdown Here 利用了几个重要的开源库：

库	目的
marked.js	Markdown 到 HTML 转换
highlight.js	代码块语法高亮
jsHtmlToText	HTML 到文本转换

这些依赖项已集成到代码库中，为 Markdown 渲染过程提供了基本功能。

来源：README.md225-229