From eec25836e7e0ea666acc4a592788fe2214ffdb02 Mon Sep 17 00:00:00 2001 From: aqz236 <2367814400@qq.com> Date: Mon, 7 Jul 2025 10:40:35 +0800 Subject: [PATCH 1/5] feat: add external CSS files support for markdown editor - Added externalCssFiles configuration to load external CSS files from URLs or local paths - Added cssLoadOrder configuration to control CSS loading priority - Implemented intelligent path resolution for relative/absolute paths - Added configuration change listener for hot reload - Enhanced HTML generation to include external CSS links - Added support for HTTP/HTTPS URLs with CORS handling - Maintained backward compatibility with existing customCss feature Features: - Load CSS from HTTP/HTTPS URLs - Load CSS from local file paths (absolute and relative) - Smart path resolution relative to markdown file or workspace - Hot reload when configuration changes - Error handling and logging - Configurable CSS loading order Examples: - Network CSS: https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css - Local CSS: ./styles/theme.css, /absolute/path/style.css - Multiple files support with priority control --- EXTERNAL_CSS_README.md | 98 +++++++++++++++++++++++++++++++++++++ example-styles.css | 74 ++++++++++++++++++++++++++++ package.json | 17 ++++++- src/extension.ts | 89 ++++++++++++++++++++++++++++++++-- test-external-css.md | 107 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 379 insertions(+), 6 deletions(-) create mode 100644 EXTERNAL_CSS_README.md create mode 100644 example-styles.css create mode 100644 test-external-css.md diff --git a/EXTERNAL_CSS_README.md b/EXTERNAL_CSS_README.md new file mode 100644 index 0000000..a698250 --- /dev/null +++ b/EXTERNAL_CSS_README.md @@ -0,0 +1,98 @@ +# 外部CSS支持功能 + +这个功能允许你在markdown编辑器中加载外部CSS文件，支持多种路径类型。 + +## 配置选项 + +### `markdown-editor.externalCssFiles` + +- **类型**: `string[]` +- **默认值**: `[]` +- **描述**: 要加载到markdown编辑器中的外部CSS文件路径或URL数组 + +支持的路径类型： + +1. **HTTP/HTTPS URLs**: `https://example.com/style.css` +2. **绝对路径**: `/Users/username/styles/custom.css` +3. **相对路径**: + - 相对于markdown文件: `./styles/custom.css` + - 相对于工作区根目录: `assets/styles/theme.css` + +### `markdown-editor.cssLoadOrder` + +- **类型**: `string` +- **可选值**: `"external-first"` | `"custom-first"` +- **默认值**: `"external-first"` +- **描述**: CSS加载顺序 + - `external-first`: 先加载外部CSS文件，后加载自定义CSS + - `custom-first`: 先加载自定义CSS，后加载外部CSS文件 + +### `markdown-editor.customCss` + +- **类型**: `string` +- **默认值**: `""` +- **描述**: 内联CSS样式（保持兼容原有功能） + +## 使用示例 + +### 1. 在VS Code设置中配置 + +```json +{ + "markdown-editor.externalCssFiles": [ + "https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css", + "./styles/custom.css", + "/Users/username/Documents/markdown-themes/dark-theme.css" + ], + "markdown-editor.cssLoadOrder": "external-first", + "markdown-editor.customCss": "body { font-family: 'Monaco', monospace; }" +} +``` + +### 2. 使用工作区设置 + +在项目根目录创建 `.vscode/settings.json`: + +```json +{ + "markdown-editor.externalCssFiles": [ + "./assets/markdown-theme.css", + "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" + ] +} +``` + +### 3. 示例CSS文件 + +项目中包含了一个示例CSS文件 `example-styles.css`，你可以这样使用： + +```json +{ + "markdown-editor.externalCssFiles": [ + "./example-styles.css" + ] +} +``` + +## 功能特点 + +- ✅ 支持HTTP/HTTPS网络CSS资源 +- ✅ 支持本地文件路径（绝对和相对） +- ✅ 智能路径解析（相对于markdown文件或工作区） +- ✅ 配置热重载（修改配置后自动应用） +- ✅ 错误处理和日志 +- ✅ 与现有customCss功能兼容 +- ✅ 可配置CSS加载顺序 + +## 注意事项 + +1. **安全性**: 当使用外部URL时，确保来源可信 +2. **性能**: 过多的外部CSS文件可能影响编辑器加载速度 +3. **缓存**: 外部CSS文件会被浏览器缓存，可能需要刷新编辑器查看更新 +4. **路径解析**: 相对路径优先相对于markdown文件，如果文件不存在则相对于工作区根目录 + +## 故障排除 + +1. **CSS不生效**: 检查文件路径是否正确，查看开发者控制台的错误信息 +2. **网络CSS加载失败**: 检查网络连接和URL是否有效 +3. **样式被覆盖**: 尝试使用 `!important` 或调整CSS加载顺序 diff --git a/example-styles.css b/example-styles.css new file mode 100644 index 0000000..f8e8d90 --- /dev/null +++ b/example-styles.css @@ -0,0 +1,74 @@ +/* 示例外部CSS文件 - 自定义markdown编辑器样式 */ + +/* 设置编辑器背景色 */ +body { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; + color: #ffffff !important; +} + +/* 自定义标题样式 */ +h1, h2, h3, h4, h5, h6 { + color: #1fd700 !important; + border-bottom: 2px solid #ffd700 !important; + padding-bottom: 5px !important; +} + +/* 自定义代码块样式 */ +pre { + background: rgba(0, 0, 0, 0.3) !important; + border: 1px solid #ffd700 !important; + border-radius: 8px !important; + padding: 15px !important; +} + +code { + background: rgba(255, 215, 0, 0.2) !important; + color: #ffd700 !important; + padding: 2px 4px !important; + border-radius: 3px !important; +} + +/* 自定义链接样式 */ +a { + color: #00ff7f !important; + text-decoration: none !important; +} + +a:hover { + color: #32cd32 !important; + text-decoration: underline !important; +} + +/* 自定义表格样式 */ +table { + border-collapse: collapse !important; + background: rgba(255, 255, 255, 0.1) !important; +} + +th, td { + border: 1px solid #ffd700 !important; + padding: 8px 12px !important; +} + +th { + background: rgba(255, 215, 0, 0.3) !important; + color: #ffffff !important; + font-weight: bold !important; +} + +/* 自定义引用块样式 */ +blockquote { + border-left: 4px solid #ffd700 !important; + background: rgba(255, 215, 0, 0.1) !important; + padding: 10px 15px !important; + margin: 10px 0 !important; +} + +/* 自定义列表样式 */ +ul li::marker { + color: #ffd700 !important; +} + +ol li::marker { + color: #ffd700 !important; +} diff --git a/package.json b/package.json index 732203e..70f8297 100755 --- a/package.json +++ b/package.json @@ -70,7 +70,22 @@ }, "markdown-editor.customCss": { "type": "string", - "default": "" + "default": "", + "description": "Inline CSS styles to apply to the markdown editor." + }, + "markdown-editor.externalCssFiles": { + "type": "array", + "items": { + "type": "string" + }, + "default": [], + "description": "Array of external CSS file paths or URLs to load into the markdown editor. Supports local file paths, workspace relative paths, and HTTP/HTTPS URLs." + }, + "markdown-editor.cssLoadOrder": { + "type": "string", + "enum": ["external-first", "custom-first"], + "default": "external-first", + "description": "Order to load CSS: 'external-first' loads external CSS files before custom CSS, 'custom-first' loads custom CSS before external files." } } }, diff --git a/src/extension.ts b/src/extension.ts index f1941b4..e8b96ac 100755 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,5 +1,6 @@ import * as vscode from 'vscode' import * as NodePath from 'path' +import * as fs from 'fs' const KeyVditorOptions = 'vditor.options' function debug(...args: any[]) { @@ -160,6 +161,16 @@ class EditorPanel { this._updateEditTitle() }, 300) }, this._disposables) + + // 监听配置变化，当CSS相关配置改变时重新加载webview + vscode.workspace.onDidChangeConfiguration((e) => { + if (e.affectsConfiguration('markdown-editor.externalCssFiles') || + e.affectsConfiguration('markdown-editor.customCss') || + e.affectsConfiguration('markdown-editor.cssLoadOrder')) { + // 重新生成HTML以应用新的CSS配置 + this._panel.webview.html = this._getHtmlForWebview(this._panel.webview) + } + }, this._disposables) // Handle messages from the webview this._panel.webview.onDidReceiveMessage( async (message) => { @@ -356,6 +367,19 @@ class EditorPanel { const JsFiles = ['main.js'].map(toMediaPath).map(toUri) const CssFiles = ['main.css'].map(toMediaPath).map(toUri) + // 生成外部CSS链接 + const externalCssLinks = this._generateExternalCssLinks(webview) + const customCss = EditorPanel.config.get('customCss') || '' + const cssLoadOrder = EditorPanel.config.get('cssLoadOrder') || 'external-first' + + // 根据配置决定CSS加载顺序 + let cssContent = '' + if (cssLoadOrder === 'external-first') { + cssContent = externalCssLinks + (customCss ? `\n` : '') + } else { + cssContent = (customCss ? `\n` : '') + externalCssLinks + } + return ( ` @@ -365,21 +389,76 @@ class EditorPanel { - ${CssFiles.map((f) => ``).join('\n')} + ${cssContent} markdown editor -
- ${JsFiles.map((f) => ``).join('\n')} ` ) } + + /** + * 生成外部CSS链接 + */ + private _generateExternalCssLinks(webview: vscode.Webview): string { + const externalCssFiles = EditorPanel.config.get('externalCssFiles') || [] + + return externalCssFiles.map(cssFile => { + // 处理不同类型的CSS路径 + if (this._isHttpUrl(cssFile)) { + // HTTP/HTTPS URL + return `` + } else if (NodePath.isAbsolute(cssFile)) { + // 绝对路径 + try { + const cssUri = webview.asWebviewUri(vscode.Uri.file(cssFile)) + return `` + } catch (error) { + console.warn(`Failed to load CSS file: ${cssFile}`, error) + return `` + } + } else { + // 相对路径（相对于工作区或markdown文件） + try { + let resolvedPath: string + + // 尝试相对于当前markdown文件解析 + const markdownDir = NodePath.dirname(this._fsPath) + const relativeToMarkdown = NodePath.resolve(markdownDir, cssFile) + + // 检查文件是否存在 + if (fs.existsSync(relativeToMarkdown)) { + resolvedPath = relativeToMarkdown + } else { + // 尝试相对于工作区根目录解析 + const workspaceFolder = vscode.workspace.getWorkspaceFolder(this._uri) + if (workspaceFolder) { + resolvedPath = NodePath.resolve(workspaceFolder.uri.fsPath, cssFile) + } else { + resolvedPath = relativeToMarkdown // 降级到相对于markdown文件 + } + } + + const cssUri = webview.asWebviewUri(vscode.Uri.file(resolvedPath)) + return `` + } catch (error) { + console.warn(`Failed to resolve CSS file: ${cssFile}`, error) + return `` + } + } + }).join('\n') + } + + /** + * 检查是否为HTTP/HTTPS URL + */ + private _isHttpUrl(url: string): boolean { + return /^https?:\/\//i.test(url) + } } diff --git a/test-external-css.md b/test-external-css.md new file mode 100644 index 0000000..50496ae --- /dev/null +++ b/test-external-css.md @@ -0,0 +1,107 @@ +# 测试外部CSS功能 + +这个文件用来测试新增的外部CSS加载功能。 + +## 如何测试 + +1. 打开VS Code设置（`Cmd+,` 或 `Ctrl+,`） +2. 搜索 `markdown-editor` +3. 配置以下设置： + +```json +{ + "markdown-editor.externalCssFiles": [ + "./example-styles.css" + ], + "markdown-editor.cssLoadOrder": "external-first" +} +``` + +4. 保存设置 +5. 用markdown编辑器打开这个文件，应该看到梦幻的渐变背景和金色标题 + +## 功能演示 + +### 标题样式 + +# 一级标题 + +## 二级标题 + +### 三级标题 + +### 代码块样式 + +```javascript +function testExternalCSS() { + console.log('外部CSS已生效！'); + return true; +} +``` + +### 内联代码 + +这是一个 `内联代码` 示例。 + +### 链接样式 + +[这是一个测试链接](https://github.com) + +### 表格样式 + +| 功能 | 状态 | 说明 | +|------|------|------| +| HTTP/HTTPS URL | ✅ | 支持网络CSS资源 | +| 本地文件路径 | ✅ | 支持绝对和相对路径 | +| 配置热重载 | ✅ | 修改配置自动生效 | + +### 引用块样式 +> +> 这是一个引用块，用来测试外部CSS的引用块样式。 +> 应该有金色的左边框和半透明背景。 + +### 列表样式 + +- 第一项 +- 第二项 +- 第三项 + +1. 有序列表项1 +2. 有序列表项2 +3. 有序列表项3 + +## 多种CSS配置示例 + +### 使用网络CSS资源 + +```json +{ + "markdown-editor.externalCssFiles": [ + "https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css" + ] +} +``` + +### 使用多个CSS文件 + +```json +{ + "markdown-editor.externalCssFiles": [ + "./styles/base.css", + "./styles/theme.css", + "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" + ] +} +``` + +### 自定义CSS优先级 + +```json +{ + "markdown-editor.cssLoadOrder": "custom-first", + "markdown-editor.customCss": "h1 { color: red !important; }", + "markdown-editor.externalCssFiles": ["./theme.css"] +} +``` + +保存这个文件后，试试修改VS Code设置中的CSS配置，编辑器应该会自动应用新的样式！ From 79a2d7a24ef2e79ab0729047c76f33a3e62a935b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=E5=85=BD?= <54022108+aqz236@users.noreply.github.com> Date: Thu, 14 Aug 2025 07:45:31 +0800 Subject: [PATCH 2/5] Delete EXTERNAL_CSS_README.md --- EXTERNAL_CSS_README.md | 98 ------------------------------------------ 1 file changed, 98 deletions(-) delete mode 100644 EXTERNAL_CSS_README.md diff --git a/EXTERNAL_CSS_README.md b/EXTERNAL_CSS_README.md deleted file mode 100644 index a698250..0000000 --- a/EXTERNAL_CSS_README.md +++ /dev/null @@ -1,98 +0,0 @@ -# 外部CSS支持功能 - -这个功能允许你在markdown编辑器中加载外部CSS文件，支持多种路径类型。 - -## 配置选项 - -### `markdown-editor.externalCssFiles` - -- **类型**: `string[]` -- **默认值**: `[]` -- **描述**: 要加载到markdown编辑器中的外部CSS文件路径或URL数组 - -支持的路径类型： - -1. **HTTP/HTTPS URLs**: `https://example.com/style.css` -2. **绝对路径**: `/Users/username/styles/custom.css` -3. **相对路径**: - - 相对于markdown文件: `./styles/custom.css` - - 相对于工作区根目录: `assets/styles/theme.css` - -### `markdown-editor.cssLoadOrder` - -- **类型**: `string` -- **可选值**: `"external-first"` | `"custom-first"` -- **默认值**: `"external-first"` -- **描述**: CSS加载顺序 - - `external-first`: 先加载外部CSS文件，后加载自定义CSS - - `custom-first`: 先加载自定义CSS，后加载外部CSS文件 - -### `markdown-editor.customCss` - -- **类型**: `string` -- **默认值**: `""` -- **描述**: 内联CSS样式（保持兼容原有功能） - -## 使用示例 - -### 1. 在VS Code设置中配置 - -```json -{ - "markdown-editor.externalCssFiles": [ - "https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css", - "./styles/custom.css", - "/Users/username/Documents/markdown-themes/dark-theme.css" - ], - "markdown-editor.cssLoadOrder": "external-first", - "markdown-editor.customCss": "body { font-family: 'Monaco', monospace; }" -} -``` - -### 2. 使用工作区设置 - -在项目根目录创建 `.vscode/settings.json`: - -```json -{ - "markdown-editor.externalCssFiles": [ - "./assets/markdown-theme.css", - "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" - ] -} -``` - -### 3. 示例CSS文件 - -项目中包含了一个示例CSS文件 `example-styles.css`，你可以这样使用： - -```json -{ - "markdown-editor.externalCssFiles": [ - "./example-styles.css" - ] -} -``` - -## 功能特点 - -- ✅ 支持HTTP/HTTPS网络CSS资源 -- ✅ 支持本地文件路径（绝对和相对） -- ✅ 智能路径解析（相对于markdown文件或工作区） -- ✅ 配置热重载（修改配置后自动应用） -- ✅ 错误处理和日志 -- ✅ 与现有customCss功能兼容 -- ✅ 可配置CSS加载顺序 - -## 注意事项 - -1. **安全性**: 当使用外部URL时，确保来源可信 -2. **性能**: 过多的外部CSS文件可能影响编辑器加载速度 -3. **缓存**: 外部CSS文件会被浏览器缓存，可能需要刷新编辑器查看更新 -4. **路径解析**: 相对路径优先相对于markdown文件，如果文件不存在则相对于工作区根目录 - -## 故障排除 - -1. **CSS不生效**: 检查文件路径是否正确，查看开发者控制台的错误信息 -2. **网络CSS加载失败**: 检查网络连接和URL是否有效 -3. **样式被覆盖**: 尝试使用 `!important` 或调整CSS加载顺序 From 48104a8a87e67dc2050baeadaa553b037314d932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=E5=85=BD?= <54022108+aqz236@users.noreply.github.com> Date: Thu, 14 Aug 2025 07:45:53 +0800 Subject: [PATCH 3/5] Delete test-external-css.md --- test-external-css.md | 107 ------------------------------------------- 1 file changed, 107 deletions(-) delete mode 100644 test-external-css.md diff --git a/test-external-css.md b/test-external-css.md deleted file mode 100644 index 50496ae..0000000 --- a/test-external-css.md +++ /dev/null @@ -1,107 +0,0 @@ -# 测试外部CSS功能 - -这个文件用来测试新增的外部CSS加载功能。 - -## 如何测试 - -1. 打开VS Code设置（`Cmd+,` 或 `Ctrl+,`） -2. 搜索 `markdown-editor` -3. 配置以下设置： - -```json -{ - "markdown-editor.externalCssFiles": [ - "./example-styles.css" - ], - "markdown-editor.cssLoadOrder": "external-first" -} -``` - -4. 保存设置 -5. 用markdown编辑器打开这个文件，应该看到梦幻的渐变背景和金色标题 - -## 功能演示 - -### 标题样式 - -# 一级标题 - -## 二级标题 - -### 三级标题 - -### 代码块样式 - -```javascript -function testExternalCSS() { - console.log('外部CSS已生效！'); - return true; -} -``` - -### 内联代码 - -这是一个 `内联代码` 示例。 - -### 链接样式 - -[这是一个测试链接](https://github.com) - -### 表格样式 - -| 功能 | 状态 | 说明 | -|------|------|------| -| HTTP/HTTPS URL | ✅ | 支持网络CSS资源 | -| 本地文件路径 | ✅ | 支持绝对和相对路径 | -| 配置热重载 | ✅ | 修改配置自动生效 | - -### 引用块样式 -> -> 这是一个引用块，用来测试外部CSS的引用块样式。 -> 应该有金色的左边框和半透明背景。 - -### 列表样式 - -- 第一项 -- 第二项 -- 第三项 - -1. 有序列表项1 -2. 有序列表项2 -3. 有序列表项3 - -## 多种CSS配置示例 - -### 使用网络CSS资源 - -```json -{ - "markdown-editor.externalCssFiles": [ - "https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css" - ] -} -``` - -### 使用多个CSS文件 - -```json -{ - "markdown-editor.externalCssFiles": [ - "./styles/base.css", - "./styles/theme.css", - "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" - ] -} -``` - -### 自定义CSS优先级 - -```json -{ - "markdown-editor.cssLoadOrder": "custom-first", - "markdown-editor.customCss": "h1 { color: red !important; }", - "markdown-editor.externalCssFiles": ["./theme.css"] -} -``` - -保存这个文件后，试试修改VS Code设置中的CSS配置，编辑器应该会自动应用新的样式！ From f7276cbf508912b9a72a065f0d3601b53de7a29a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=E5=85=BD?= <54022108+aqz236@users.noreply.github.com> Date: Thu, 14 Aug 2025 07:48:12 +0800 Subject: [PATCH 4/5] Update example-styles.css --- example-styles.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/example-styles.css b/example-styles.css index f8e8d90..1ccfe07 100644 --- a/example-styles.css +++ b/example-styles.css @@ -1,19 +1,19 @@ -/* 示例外部CSS文件 - 自定义markdown编辑器样式 */ +/* Example external CSS file - Custom markdown editor styles */ -/* 设置编辑器背景色 */ +/* Set editor background color */ body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #ffffff !important; } -/* 自定义标题样式 */ +/* Title Style */ h1, h2, h3, h4, h5, h6 { color: #1fd700 !important; border-bottom: 2px solid #ffd700 !important; padding-bottom: 5px !important; } -/* 自定义代码块样式 */ +/* Code block styles */ pre { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid #ffd700 !important; @@ -28,7 +28,7 @@ code { border-radius: 3px !important; } -/* 自定义链接样式 */ +/* Link styles */ a { color: #00ff7f !important; text-decoration: none !important; @@ -39,7 +39,7 @@ a:hover { text-decoration: underline !important; } -/* 自定义表格样式 */ +/* Table styles */ table { border-collapse: collapse !important; background: rgba(255, 255, 255, 0.1) !important; @@ -56,7 +56,7 @@ th { font-weight: bold !important; } -/* 自定义引用块样式 */ +/* Quote block style */ blockquote { border-left: 4px solid #ffd700 !important; background: rgba(255, 215, 0, 0.1) !important; @@ -64,7 +64,7 @@ blockquote { margin: 10px 0 !important; } -/* 自定义列表样式 */ +/* list styles */ ul li::marker { color: #ffd700 !important; } From 821bbe1659275ddae23529cedc62ecb29fc76034 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=E5=85=BD?= <54022108+aqz236@users.noreply.github.com> Date: Thu, 14 Aug 2025 07:52:23 +0800 Subject: [PATCH 5/5] Update extension.ts --- src/extension.ts | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index e8b96ac..5e89460 100755 --- a/src/extension.ts +++ b/src/extension.ts @@ -59,9 +59,9 @@ class EditorPanel { return } let doc: undefined | vscode.TextDocument - // from context menu : 从当前打开的 textEditor 中寻找 是否有当前 markdown 的 editor, 有的话则绑定 document + // from context menu : Search for the current markdown editor from the currently opened textEditor, and bind the document if found. if (uri) { - // 从右键打开文件，先打开文档然后开启自动同步，不然没法保存文件和同步到已经打开的document + // To open a file from the right-click menu, first open the document and then enable auto-sync. Otherwise, you won't be able to save the file or sync it to the already opened document. doc = await vscode.workspace.openTextDocument(uri) } else { doc = vscode.window.activeTextEditor?.document @@ -128,8 +128,8 @@ class EditorPanel { private readonly _context: vscode.ExtensionContext, private readonly _panel: vscode.WebviewPanel, private readonly _extensionUri: vscode.Uri, - public _document: vscode.TextDocument, // 当前有 markdown 编辑器 - public _uri = _document.uri // 从资源管理器打开，只有 uri 没有 _document + public _document: vscode.TextDocument, + public _uri = _document.uri ) { // Set the webview's initial html content @@ -150,7 +150,6 @@ class EditorPanel { if (e.document.fileName !== this._document.fileName) { return } - // 当 webview panel 激活时不将由 webview编辑导致的 vsc 编辑器更新同步回 webview // don't change webview panel when webview panel is focus if (this._panel.active) { return @@ -162,12 +161,12 @@ class EditorPanel { }, 300) }, this._disposables) - // 监听配置变化，当CSS相关配置改变时重新加载webview + // Monitor configuration changes and reload the webview when CSS-related configurations are modified. vscode.workspace.onDidChangeConfiguration((e) => { if (e.affectsConfiguration('markdown-editor.externalCssFiles') || e.affectsConfiguration('markdown-editor.customCss') || e.affectsConfiguration('markdown-editor.cssLoadOrder')) { - // 重新生成HTML以应用新的CSS配置 + // Regenerate HTML to apply new CSS configuration this._panel.webview.html = this._getHtmlForWebview(this._panel.webview) } }, this._disposables) @@ -219,7 +218,7 @@ class EditorPanel { showError(message.content) break case 'edit': { - // 只有当 webview 处于编辑状态时才同步到 vsc 编辑器，避免重复刷新 + // Only synchronize to the VSC editor when the webview is in edit mode to avoid repeated refreshing. if (this._panel.active) { await syncToEditor() this._updateEditTitle() @@ -367,12 +366,12 @@ class EditorPanel { const JsFiles = ['main.js'].map(toMediaPath).map(toUri) const CssFiles = ['main.css'].map(toMediaPath).map(toUri) - // 生成外部CSS链接 + // Generate external CSS links const externalCssLinks = this._generateExternalCssLinks(webview) const customCss = EditorPanel.config.get('customCss') || '' const cssLoadOrder = EditorPanel.config.get('cssLoadOrder') || 'external-first' - // 根据配置决定CSS加载顺序 + // Determines CSS loading order based on configuration let cssContent = '' if (cssLoadOrder === 'external-first') { cssContent = externalCssLinks + (customCss ? `\n` : '') @@ -404,18 +403,18 @@ class EditorPanel { } /** - * 生成外部CSS链接 + * Generate external CSS links */ private _generateExternalCssLinks(webview: vscode.Webview): string { const externalCssFiles = EditorPanel.config.get('externalCssFiles') || [] return externalCssFiles.map(cssFile => { - // 处理不同类型的CSS路径 + // Handling different types of CSS paths if (this._isHttpUrl(cssFile)) { // HTTP/HTTPS URL return `` } else if (NodePath.isAbsolute(cssFile)) { - // 绝对路径 + // absolute path try { const cssUri = webview.asWebviewUri(vscode.Uri.file(cssFile)) return `` @@ -424,24 +423,24 @@ class EditorPanel { return `` } } else { - // 相对路径（相对于工作区或markdown文件） + // Relative path (relative to the workspace or markdown file) try { let resolvedPath: string - // 尝试相对于当前markdown文件解析 + // Try parsing relative to the current markdown file const markdownDir = NodePath.dirname(this._fsPath) const relativeToMarkdown = NodePath.resolve(markdownDir, cssFile) - // 检查文件是否存在 + // Check if the file exists if (fs.existsSync(relativeToMarkdown)) { resolvedPath = relativeToMarkdown } else { - // 尝试相对于工作区根目录解析 + // Try to resolve relative to the workspace root directory const workspaceFolder = vscode.workspace.getWorkspaceFolder(this._uri) if (workspaceFolder) { resolvedPath = NodePath.resolve(workspaceFolder.uri.fsPath, cssFile) } else { - resolvedPath = relativeToMarkdown // 降级到相对于markdown文件 + resolvedPath = relativeToMarkdown // Downgrade relative to the markdown file } } @@ -456,7 +455,7 @@ class EditorPanel { } /** - * 检查是否为HTTP/HTTPS URL + * Check if it is an HTTP/HTTPS URL */ private _isHttpUrl(url: string): boolean { return /^https?:\/\//i.test(url)