选项页面

相关源文件

• CHANGES.md
• src/chrome/background.html
• src/common/options-store.js
• src/common/options.html
• src/common/options.js
• src/firefox/chrome/content/background-services.js

选项页面是配置 Markdown Here 行为和外观的主要用户界面。它允许用户自定义样式、语法高亮、快捷键以及高级功能，如数学公式渲染。本页面记录了选项页面系统的结构、功能和组件，该系统是 Markdown Here 用户界面和选项组件不可或缺的一部分。

有关配置数据如何存储的信息，请参阅配置存储。

1. 概述

选项页面提供了一个用户友好的界面，无需直接编辑配置文件即可自定义 Markdown Here 的行为。它包含几个关键部分，允许用户

• 查看基本使用说明
• 自定义渲染 Markdown 的 CSS 样式
• 设置语法高亮主题
• 配置键盘快捷键
• 启用/禁用和配置 TeX 数学渲染
• 设置“忘记渲染”检查等高级选项

选项系统会自动保存更改，并提供样式如何影响渲染 Markdown 的即时预览。

来源：src/common/options.html1-690 src/common/options.js1-500 src/common/options-store.js1-572

2. 用户界面结构

选项页面分为几个功能性部分，以便对相关设置进行逻辑分组。用户界面采用响应式设计，以适应不同的屏幕尺寸。

2.1 主要部分

用户界面分为以下几个关键部分：

1. 基本用法 - 使用 Markdown Here 的说明
2. 资源和链接 - 指向文档和支持的有用链接
3. 主要样式 CSS - 用于自定义渲染 Markdown 外观的 CSS 编辑器
4. 语法高亮 CSS - 代码块的主题选择和 CSS 编辑器
5. 预览 - 使用当前设置的 Markdown 渲染实时预览
6. TeX 数学公式支持 - 配置数学渲染选项
7. 快捷键配置 - 自定义键盘快捷键
8. 高级和其他 - 其他选项，如忘记渲染检查

来源：src/common/options.html329-658

2.2 主要用户界面元素

选项页面包含多个交互式元素：

• 用于 CSS 编辑的文本区域
• 用于语法高亮主题的下拉选择器
• 用于启用/禁用功能的复选框
• 用于配置值的文本输入字段
• 用于执行重置到默认值等操作的按钮
• 用于即时反馈的实时预览 iframe

用户界面还具有一个“已保存更改”的通知，当设置自动保存时会短暂出现。

来源：src/common/options.html17-138 src/common/options.html119-131

3. 选项存储系统

选项页面利用了一个抽象的存储系统，该系统可以适应浏览器环境。这种抽象允许相同的界面在不同浏览器之间工作，同时适应它们特定的存储机制。

3.1 存储架构

系统根据浏览器环境确定使用哪种存储实现：

• Chrome/Chromium 浏览器使用 ChromeOptionsStore（使用 Chrome Storage API）
• Firefox/Thunderbird 使用 MozillaOptionsStore（使用 Mozilla 偏好设置）
• Safari 使用 SafariOptionsStore

来源：src/common/options-store.js18-26 src/common/options-store.js476-499

3.2 默认值

系统为所有选项定义了默认值，这些值在用户首次安装扩展或重置选项时使用。

DEFAULTS = {
  'math-enabled': false,
  'math-value': '<img src="https://latex.codecogs.com/png.image?\\dpi{120}\\inline&space;{urlmathcode}" alt="{mathcode}">',
  'hotkey': { shiftKey: false, ctrlKey: true, altKey: true, key: 'M' },
  'forgot-to-render-check-enabled': false,
  'header-anchors-enabled': false,
  'gfm-line-breaks-enabled': true
}

CSS 样式默认值从外部文件加载。

来源：src/common/options-store.js18-26 src/common/options-store.js123-133

4. 数据流和配置管理

4.1 选项加载和保存

选项页面通过一个定义明确的流程加载和保存配置数据。

在 options.js 文件中的 checkChange() 函数会检测选项的更改，该函数每 100 毫秒运行一次。检测到更改后，会延迟 400 毫秒自动保存，以避免在输入过程中过多保存。

来源：src/common/options.js21-147 src/common/options.js227-288

4.2 预览功能

选项页面包含一个实时预览功能，用于显示 Markdown 将如何根据当前设置进行渲染。

预览实现为一个包含示例 Markdown 文本的 iframe。渲染过程使用户在电子邮件中激活 Markdown Here 功能时使用的核心 Markdown 渲染引擎相同。

来源：src/common/options.js151-164 src/common/options.js303-355

5. 自定义选项

5.1 CSS 样式

选项页面提供两个 CSS 编辑器：

1. 主要样式 CSS - 控制渲染 Markdown 的整体外观
2. 语法高亮 CSS - 控制代码块的外观

两个编辑器都允许直接编辑 CSS，并提供重置按钮以恢复默认值。语法高亮编辑器还包括一个主题选择下拉菜单，可以加载预定义的主题。

来源：src/common/options.html422-449 src/common/options.js356-390

5.2 数学渲染

TeX 数学公式支持部分允许用户

1. 启用/禁用数学渲染
2. 自定义用于渲染数学表达式的 HTML 模板
3. 重置为默认模板

默认模板使用 CodeCogs 渲染 TeX 表达式，但用户可以自定义以使用其他服务。

来源：src/common/options.html489-544 src/common/options.js444-448

5.3 快捷键配置

快捷键配置部分允许用户设置用于切换 Markdown 渲染的键盘快捷键。用户可以选择

1. 修饰键（Shift、Ctrl、Alt）
2. 主键（默认为“M”）

系统会验证主键，确保它是字母数字的，并在不是时提供警告。它还会更新 UI 中所有快捷键的显示。

来源：src/common/options.html549-583 src/common/options.js450-499

5.4 高级选项

高级和其他部分包括几个可选功能：

1. 忘记渲染检查 - 警告用户是否尝试发送包含未渲染 Markdown 的电子邮件
2. 自动标题锚点 - 为标题添加锚点以进行内部链接
3. GFM 行中断 - 启用 GitHub Flavored Markdown 的行中断行为

来源：src/common/options.html598-640

6. 跨浏览器兼容性

选项页面设计用于在不同浏览器上运行，并对平台特定行为进行了特殊处理。

对于基于 Mozilla 的浏览器（Firefox/Thunderbird），打开选项页面和测试页面，以及在快捷键更改后重新加载都需要特殊处理。

来源：src/common/options.js203-221 src/firefox/chrome/content/background-services.js18-341

7. 国际化支持

选项页面包含全面的国际化支持，所有 UI 文本都从特定语言的消息包加载。

本地化系统

1. 处理所有带有 data-i18n 属性的元素
2. 从消息包中检索本地化字符串
3. 使用本地化文本更新元素内容

来源：src/common/options.js166-200 src/common/options.html15

8. 总结

选项页面是一个全面的用户界面，用于自定义 Markdown Here 的行为和外观。它提供了一种用户友好的方式来配置设置，而无需理解底层的技术细节。系统的架构确保了

1. 跨浏览器兼容性，通过抽象的存储机制
2. 即时反馈，通过实时预览功能
3. 自动保存更改以防止数据丢失
4. 国际化，以适应全球用户群
5. 可扩展性，通过模块化设计

这种设计使用户能够轻松定制他们的 Markdown Here 体验，同时在不同的浏览器环境中保持一致的界面。

来源：src/common/options.html1-690 src/common/options.js1-500 src/common/options-store.js1-572