feat: 新增两个新的代码块样式配色+新增主区宽屏窄屏切换按钮

CLAUDE.md

@@ -0,0 +1,72 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+这是一个Chrome浏览器扩展，为flomo笔记应用的Markdown代码块提供语法高亮功能。该插件基于Manifest V3规范，主要作用是解析和美化flomo中的代码内容，支持多种编程语言的语法高亮。
+
+## Project Architecture
+
+### Core Components
+
+**Manifest V3 Extension Structure**:
+- `manifest.json`: 扩展配置文件，定义权限和功能
+- `service-worker.js`: 后台脚本，处理主题切换和内容脚本注册
+- `scripts/content.js`: 内容脚本，在flomo页面中执行代码高亮逻辑
+
+**Key Functionality**:
+- **代码解析**: 识别```包围的代码块并提取语言类型
+- **语法高亮**: 使用highlight.js库对代码进行语法着色
+- **主题系统**: 支持明亮和暗黑两种代码高亮主题
+- **复制功能**: 为每个代码块添加复制按钮
+
+### Target Websites
+该扩展专门为以下网站设计：
+- `https://v.flomoapp.com/*`
+- `https://flomoapp.com/*`
+- `https://h5.udrig.com/*`
+
+### Code Processing Logic
+
+**代码块识别流程**:
+1. 扫描页面中的`.richText`元素
+2. 查找以```开头的段落作为代码块标记
+3. 提取语言类型（如`javascript`, `python`等）
+4. 收集代码内容直到遇到结束的```
+5. 创建`<pre><code>`元素并应用语法高亮
+
+**特殊处理**:
+- URL链接转换：代码块中的`<a>`标签会被转换为纯文本URL
+- HTML解码：确保代码内容正确显示
+
+## Development Commands
+
+### Loading Extension for Development
+1. 打开Chrome浏览器，访问`chrome://extensions/`
+2. 开启"开发者模式"
+3. 点击"加载已解压的扩展程序"
+4. 选择项目根目录
+
+### Testing
+- 访问flomo网站测试代码高亮功能
+- 使用开发者工具检查console日志输出
+- 测试主题切换功能是否正常工作
+
+## Key Files and Their Purposes
+
+- `include/highlight.min.js`: highlight.js库，负责语法高亮
+- `include/highlight.min.css`: 基础样式文件
+- `include/theme/`: 高亮主题CSS文件目录
+- `popup/`: 扩展弹窗界面，用于主题选择
+- `images/`: 图标资源文件
+
+## Architecture Notes
+
+**权限配置**: 扩展需要`storage`、`scripting`、`tabs`、`activeTab`、`webRequest`权限来实现完整功能。
+
+**动态CSS注入**: 主题切换通过动态注册和注销内容脚本实现，确保新样式能够立即生效。
+
+**消息传递**: 使用Chrome extension messaging API在service worker和content script之间通信，实现自动高亮功能。
+
+**代码清理**: 原始的```标记会被移除，替换为格式化的代码块元素。

README.md

@@ -5,3 +5,7 @@ feat: 仅新增复制按钮
 feat: 新增自动高亮
 
 fix: 网址形式的内容在高亮块显示不为 herf 问题
+
+feat: 新增两个新的代码块样式配色
+
+feat: 新增主区宽屏窄屏切换按钮

include/theme/modern-dark.css

@@ -0,0 +1,187 @@
+/*!
+  Theme: Modern Dark Professional
+  Description: 现代专业暗色主题，适合代码展示
+  Author: Claude Code Enhancement
+  License: MIT
+  Updated: 2024
+*/
+
+/* 基础代码块样式 */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1.25em 1.5em;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  border-radius: 8px;
+  border: 1px solid #2d3748;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+  position: relative;
+}
+
+code.hljs {
+  padding: 0.25em 0.5em;
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+/* 代码块容器增强 */
+pre {
+  margin: 1em 0;
+  position: relative;
+  background: transparent;
+}
+
+/* 主色彩方案 */
+.hljs {
+  color: #e2e8f0;
+  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+}
+
+.hljs-subst {
+  color: #e2e8f0;
+}
+
+/* 注释 - 柔和灰色 */
+.hljs-comment {
+  color: #718096;
+  font-style: italic;
+}
+
+/* 关键字 - 蓝紫色系 */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  color: #81c8ff;
+  font-weight: 600;
+}
+
+/* 属性 - 青色 */
+.hljs-attr {
+  color: #7dd3fc;
+}
+
+.hljs-attribute {
+  color: #c084fc;
+}
+
+/* 数字和命名空间 - 橙色 */
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  color: #fbb865;
+}
+
+.hljs-selector-class {
+  color: #81c8ff;
+}
+
+/* 字符串和变量 - 绿色系 */
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  color: #7dd3fc;
+}
+
+/* 元数据 */
+.hljs-meta,
+.hljs-selector-pseudo {
+  color: #c084fc;
+}
+
+/* 内置函数 - 黄色 */
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  color: #fbb865;
+  font-weight: 500;
+}
+
+/* 标点符号 */
+.hljs-bullet,
+.hljs-code {
+  color: #94a3b8;
+}
+
+.hljs-meta .hljs-string {
+  color: #7dd3fc;
+}
+
+/* Git diff 样式 */
+.hljs-deletion {
+  color: #fca5a5;
+  background: rgba(252, 165, 165, 0.1);
+}
+
+.hljs-addition {
+  color: #86efac;
+  background: rgba(134, 239, 172, 0.1);
+}
+
+/* 强调样式 */
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+  color: #f1f5f9;
+}
+
+/* 运算符和标签 */
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  color: #94a3b8;
+}
+
+/* 选择器增强 */
+.hljs-selector-class {
+  color: #fbbf24;
+}
+
+.hljs-selector-id {
+  color: #fb7185;
+}
+
+/* 语言特定增强 */
+.hljs-function {
+  color: #7dd3fc;
+}
+
+.hljs-class {
+  color: #fbbf24;
+}
+
+/* 滚动条美化 */
+pre code.hljs::-webkit-scrollbar {
+  height: 8px;
+}
+
+pre code.hljs::-webkit-scrollbar-track {
+  background: #2d3748;
+  border-radius: 4px;
+}
+
+pre code.hljs::-webkit-scrollbar-thumb {
+  background: #4a5568;
+  border-radius: 4px;
+}
+
+pre code.hljs::-webkit-scrollbar-thumb:hover {
+  background: #718096;
+}