From d5adbef8705b53e352527e054134406c8ce4f30a Mon Sep 17 00:00:00 2001 From: joeytoday Date: Tue, 7 Apr 2026 11:36:25 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=9D=97=E6=A0=B7=E5=BC=8F=E5=A4=8D=E5=88=B6=E5=88=B0=E5=85=AC?= =?UTF-8?q?=E4=BC=97=E5=8F=B7=E5=90=8E=E4=B8=A2=E5=A4=B1=20(#27)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复代码高亮丢失：从预览 DOM 读取 computed style 补全 Obsidian 内置高亮颜色 - 修复仿 macOS 窗口圆点不显示：使用 section 标签 + inline style 替代 CSS 伪选择器 - 统一使用 section 标签：列表标记、Callout 标题/内容等元素改为 section，提升公众号兼容性 - 移除主题 CSS 中的圆点样式规则（已内联化，不再需要） - tsconfig 排除 skills 目录避免构建报错 --- .gitignore | 4 +++ CHANGELOG.md | 15 +++++++++ src/converter.ts | 51 ++++++++++++++++-------------- src/copyManager.ts | 40 +++++++++++++++++++++-- src/themes/builtin/academic.css | 16 ---------- src/themes/builtin/dark.css | 16 ---------- src/themes/builtin/default.css | 16 ---------- src/themes/builtin/elegant.css | 16 ---------- src/themes/builtin/green-fresh.css | 16 ---------- src/themes/builtin/minimal.css | 16 ---------- src/themes/builtin/orange-warm.css | 16 ---------- src/themes/builtin/scarlet.css | 16 ---------- tsconfig.json | 3 ++ 13 files changed, 87 insertions(+), 154 deletions(-) diff --git a/.gitignore b/.gitignore index 3107cef..256071b 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,7 @@ Thumbs.db # TypeScript cache *.tsbuildinfo + +# other +dist/ +skills/ \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 153011b..10292f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # Changelog +## [2.3.5] - 2026-04-07 + +### 🐛 Bug 修复 + +#### 代码块样式复制到公众号后丢失 (#27) +- **修复代码高亮丢失**：复制/发布到公众号时，代码块的语法高亮颜色现在能正确保留 +- **修复仿 macOS 窗口圆点不显示**：使用 `
` 标签 + inline style 替代 CSS 伪选择器，确保公众号编辑器不会过滤圆点元素 + +### 🔧 优化 + +- **统一使用 `
` 标签**：将列表标记、Callout 标题/内容等元素从 ``/`
` 改为 `
`，提升公众号兼容性 +- **代码块圆点样式内联化**：圆点颜色直接通过 inline style 设置，不再依赖 CSS `:nth-child` 伪选择器，确保预览与复制/发布样式一致 + +--- + ## [2.3.4] - 2026-03-20 ### 🐛 Bug 修复 diff --git a/src/converter.ts b/src/converter.ts index cc3a6d7..7d5d279 100644 --- a/src/converter.ts +++ b/src/converter.ts @@ -40,13 +40,14 @@ export class MPConverter { const codeEl = pre.querySelector('code'); if (codeEl) { - // 添加 macOS 风格的窗口按钮 - const header = document.createElement('div'); - header.className = 'mp-code-header'; + // 添加 macOS 风格的窗口按钮（使用 section + inline style 确保公众号复制/发布时样式保留） + const header = document.createElement('section'); + header.style.cssText = 'margin-bottom: 1em; display: flex; gap: 6px;'; - for (let i = 0; i < 3; i++) { - const dot = document.createElement('span'); - dot.className = 'mp-code-dot'; + const dotColors = ['#ff5f56', '#ffbd2e', '#27c93f']; + for (const color of dotColors) { + const dot = document.createElement('section'); + dot.style.cssText = `display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: ${color};`; header.appendChild(dot); } @@ -157,15 +158,16 @@ export class MPConverter { // 添加编号或符号 const marker = isOrdered ? `${itemNumber}. ` : '• '; - const markerSpan = document.createElement('span'); - markerSpan.textContent = marker; - markerSpan.style.cssText = 'margin-right: 0.25em;'; - p.appendChild(markerSpan); + const markerSection = document.createElement('section'); + markerSection.textContent = marker; + markerSection.style.cssText = 'display: inline; margin-right: 0.25em;'; + p.appendChild(markerSection); // 添加内容 - const contentSpan = document.createElement('span'); - contentSpan.innerHTML = liElement.innerHTML; - p.appendChild(contentSpan); + const contentSection = document.createElement('section'); + contentSection.style.cssText = 'display: inline;'; + contentSection.innerHTML = liElement.innerHTML; + p.appendChild(contentSection); section.appendChild(p); @@ -240,26 +242,27 @@ export class MPConverter { newCallout.style.cssText = `background: ${colors.bg}; border-left: 4px solid ${colors.border}; border-radius: 6px; padding: 12px 16px; margin: 1em 0; box-sizing: border-box;`; // 标题行 - const titleRow = document.createElement('div'); + const titleRow = document.createElement('section'); titleRow.className = 'mp-callout-title'; titleRow.style.cssText = `display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: bold; color: ${colors.title}; font-size: 1em; line-height: 1.5;`; - const iconSpan = document.createElement('span'); - iconSpan.className = 'mp-callout-icon'; - iconSpan.textContent = colors.icon; - iconSpan.style.cssText = 'font-size: 1.1em;'; + const iconSection = document.createElement('section'); + iconSection.className = 'mp-callout-icon'; + iconSection.textContent = colors.icon; + iconSection.style.cssText = 'display: inline; font-size: 1.1em;'; - const titleSpan = document.createElement('span'); - titleSpan.className = 'mp-callout-title-text'; - titleSpan.textContent = titleText; + const titleSection = document.createElement('section'); + titleSection.className = 'mp-callout-title-text'; + titleSection.textContent = titleText; + titleSection.style.cssText = 'display: inline;'; - titleRow.appendChild(iconSpan); - titleRow.appendChild(titleSpan); + titleRow.appendChild(iconSection); + titleRow.appendChild(titleSection); newCallout.appendChild(titleRow); // 内容区域 if (contentHTML.trim()) { - const contentDiv = document.createElement('div'); + const contentDiv = document.createElement('section'); contentDiv.className = 'mp-callout-content'; contentDiv.style.cssText = 'color: #4a4a4a; font-size: 0.95em; line-height: 1.7;'; contentDiv.innerHTML = contentHTML; diff --git a/src/copyManager.ts b/src/copyManager.ts index 8c99e4d..71d6a44 100644 --- a/src/copyManager.ts +++ b/src/copyManager.ts @@ -69,6 +69,38 @@ export class CopyManager { }); } + /** + * 从原始预览 DOM 读取 computed style，补全 juice 无法内联的样式。 + * Obsidian 内置的代码高亮样式不在主题