fix: refine inline code styling and improve region visibility

apps/web/src/lib/wechat-copy.test.mjs

@@ -89,7 +89,7 @@ describe("preparePublishArticle", () => {
       const root = preparePublishArticle("<p><strong>重点</strong> <code>Cmd/Ctrl + E</code></p>", container);
       expect(css(root.querySelector("strong"))).toContain("color:#7351CF");
       expect(css(root.querySelector("code"))).toContain("color:#3d4450");
-      expect(css(root.querySelector("code"))).toContain("background:#f3f5f7");
+      expect(css(root.querySelector("code"))).toContain("background:#e9edf1");
     } finally {
       globalThis.getComputedStyle = previous;
     }
@@ -120,7 +120,7 @@ describe("preparePublishArticle", () => {
     expect(css(root.querySelector("strong"))).toContain("font-weight:800");
     const inlineCode = body.querySelector("code");
     expect(css(inlineCode)).toContain("color:#3d4450");
-    expect(css(inlineCode)).toContain("background:#f3f5f7");
+    expect(css(inlineCode)).toContain("background:#e9edf1");
     expect(css(root.querySelector("h2"))).toContain("font-weight:600");
     expect(css(root.querySelector("h2"))).toContain("color:#27272a");
     const [rule, merge] = root.querySelectorAll("hr");

apps/web/src/lib/wechat-copy.ts

@@ -24,8 +24,7 @@ const PUBLISH_MONO = "'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regula
 const BODY_COLOR = "#27272a";
 const QUOTE_COLOR = "#3d4450";
 const CODE_COLOR = "#3d4450";
-const CODE_BACKGROUND = "#f3f5f7";
-const CODE_BORDER = "#e1e5ea";
+const CODE_BACKGROUND = "#e9edf1";
 const LINK_COLOR = "#404040";
 const CHECKED_TASK_COLOR = "#737373";
 
@@ -81,7 +80,7 @@ const applyLegacyWeChatStyles = (
     b: bold,
     em: "font-style: italic;",
     del: "text-decoration: line-through;",
-    code: `padding: 2px 6px; border: 1px solid ${CODE_BORDER}; border-radius: 4px; background: ${CODE_BACKGROUND}; color: ${inlineCodeColor}; font-family: ${PUBLISH_MONO}; font-size: ${codeSize}; font-weight: 550;`,
+    code: `padding: 1px 4px; border: 0; border-radius: 4px; background: ${CODE_BACKGROUND}; box-shadow: inset 0 0 0 1px rgba(61,68,80,0.08); color: ${inlineCodeColor}; font-family: ${PUBLISH_MONO}; font-size: ${codeSize}; font-weight: 450;`,
     pre: `margin: 0 0 16px; padding: 14px 16px; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 8px; background: #fafafa; color: #0f172a; font-family: ${PUBLISH_MONO}; font-size: ${codeSize}; line-height: 1.6; text-align: left; white-space: pre-wrap;`,
     hr: "margin: 24px 0; border: 0; border-top: 1px solid #1a1d21;",
     table: `width: 100%; margin: 20px 0; border-collapse: collapse; font-size: ${fontSize}; line-height: 1.45;`,

apps/web/src/styles/globals.css

@@ -1722,12 +1722,13 @@ html[data-edgeever-extension-theme] .edgeever-memo-divider {
 }
 
 .ProseMirror code {
-  border: 1px solid #e1e5ea;
+  border: 0;
   border-radius: 4px;
-  background: #f3f5f7;
-  padding: 0.12rem 0.38rem;
+  background: #e9edf1;
+  box-shadow: inset 0 0 0 1px rgb(61 68 80 / 0.08);
+  padding: 0.08em 0.28em;
   font-size: var(--editor-code-font-size, 0.875em);
-  font-weight: 550;
+  font-weight: 450;
   color: #3d4450;
   font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
@@ -1746,8 +1747,10 @@ html[data-edgeever-extension-theme] .edgeever-memo-divider {
 .ProseMirror pre code {
   border: 0;
   background: transparent;
+  box-shadow: none;
   padding: 0;
   color: inherit;
+  font-weight: 550;
 }
 
 .ProseMirror .edgeever-code-block,
@@ -2499,16 +2502,18 @@ html[data-edgeever-extension-theme] .edgeever-memo-divider {
 }
 .markdown-content code {
   font-family: "JetBrains Mono", "Fira Code", monospace;
-  background-color: #f2f9f5;
-  color: #0d5f3a;
-  border: 1px solid #d4ebdc;
-  padding: 0.125rem 0.38rem;
+  background-color: #e9edf1;
+  box-shadow: inset 0 0 0 1px rgb(61 68 80 / 0.08);
+  color: #3d4450;
+  border: 0;
+  padding: 0.08em 0.28em;
   border-radius: 4px;
   font-size: 0.8rem;
-  font-weight: 550;
+  font-weight: 450;
 }
 .markdown-content pre code {
   background-color: transparent;
+  box-shadow: none;
   border: 0;
   color: inherit;
   padding: 0;
@@ -2741,11 +2746,17 @@ html[data-edgeever-extension-theme] .edgeever-memo-divider {
 
 :root.dark .ProseMirror code,
 :root.dark .markdown-content code {
-  border-color: rgb(255 255 255 / 0.12);
-  background: rgb(255 255 255 / 0.06);
+  background: rgb(255 255 255 / 0.09);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
   color: hsl(var(--foreground));
 }
 
+:root.dark .ProseMirror pre code,
+:root.dark .markdown-content pre code {
+  background: transparent;
+  box-shadow: none;
+}
+
 :root.dark .ProseMirror pre,
 :root.dark .markdown-content pre {
   border-color: rgb(var(--slate-200-rgb) / 0.8);
@@ -2909,9 +2920,3 @@ html[data-edgeever-extension-theme] .edgeever-memo-divider {
     animation-duration: 0.01ms !important;
   }
 }
-
-:root.dark .markdown-content code {
-  background-color: rgb(var(--brand-green-rgb) / 0.1);
-  border-color: rgb(var(--brand-green-rgb) / 0.28);
-  color: var(--brand-green-text);
-}