From 15133c70e75ac58440983cc1d1be22e7de1cbe42 Mon Sep 17 00:00:00 2001
From: thzxx <1440196015@qq.com>
Date: Fri, 24 Jul 2026 17:55:51 +0800
Subject: [PATCH] fix(style): use background-transparent approach for highlight
 layer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/styles.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/styles.js b/src/styles.js
index d5c0864..f7837ce 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -138,9 +138,13 @@ const generateCSS = () => {
       padding: 16px 18px; margin: 0; border: 0; outline: 0; overflow: hidden;
       font-family: var(--md-mono); font-size: 13.5px; line-height: 1.7;
       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;
     }
+    /* textarea 在高亮模式下透明背景，露出下方高亮层 */
+    .me-textarea-highlight {
+      background: transparent !important;
+    }
     /* 隐藏高亮层（语法高亮关闭时） */
     .me-highlight-layer[hidden] { display: none; }
     .mh-heading { color: var(--md-accent); font-weight: 700; }
@@ -210,16 +214,6 @@ const generateCSS = () => {
       position: relative;
       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:focus { outline: 0; }