fix(style): use background-transparent approach for highlight layer

Previous approach: textarea text transparent, show highlight layer text
→ fragile, pixel misalignment makes text invisible

New approach:
- Highlight layer has opaque background (var(--md-textarea-bg))
- Textarea gets background:transparent when highlighting enabled
- Textarea text stays fully visible and readable
- Highlight layer shows colored syntax decoration beneath
- If highlight breaks, textarea remains 100% readable
This commit is contained in:
2026-07-24 17:55:51 +08:00
parent a47b9f95bc
commit 15133c70e7
+5 -11
View File
@@ -138,9 +138,13 @@ const generateCSS = () => {
padding: 16px 18px; margin: 0; border: 0; outline: 0; overflow: hidden; padding: 16px 18px; margin: 0; border: 0; outline: 0; overflow: hidden;
font-family: var(--md-mono); font-size: 13.5px; line-height: 1.7; font-family: var(--md-mono); font-size: 13.5px; line-height: 1.7;
white-space: pre-wrap; word-wrap: break-word; white-space: pre-wrap; word-wrap: break-word;
pointer-events: none; background: transparent; pointer-events: none; background: var(--md-textarea-bg);
color: var(--md-text); z-index: 0; color: var(--md-text); z-index: 0;
} }
/* textarea 在高亮模式下透明背景,露出下方高亮层 */
.me-textarea-highlight {
background: transparent !important;
}
/* 隐藏高亮层(语法高亮关闭时) */ /* 隐藏高亮层(语法高亮关闭时) */
.me-highlight-layer[hidden] { display: none; } .me-highlight-layer[hidden] { display: none; }
.mh-heading { color: var(--md-accent); font-weight: 700; } .mh-heading { color: var(--md-accent); font-weight: 700; }
@@ -210,16 +214,6 @@ const generateCSS = () => {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* v0.1.14: 语法高亮模式 — textarea 透明,高亮层显示在下方 */
.me-textarea-highlight {
color: transparent !important;
caret-color: var(--md-text);
background: transparent !important;
}
.me-textarea-highlight::selection {
background: rgba(59, 130, 246, 0.25);
color: transparent;
}
.me-textarea::placeholder { color: var(--md-muted); opacity: 0.7; } .me-textarea::placeholder { color: var(--md-muted); opacity: 0.7; }
.me-textarea:focus { outline: 0; } .me-textarea:focus { outline: 0; }