feat: 代碼塊改以 Expressive Code 字體設定為優先, 並改善對 Windows NT 系統 CJK 字體的支援 (#437)

* feat: respect express code font settings for code blocks and add microsoft cjk fonts support for windows

* feat: add microsoft cjk fonts support for windows in expressive code

Author: Hoshinowo-Yuki

astro.config.mjs

@@ -93,7 +93,7 @@ export default defineConfig({
 				borderColor: "none",
 				codeFontSize: "0.875rem",
 				codeFontFamily:
-					"'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+					"'JetBrains Mono Variable', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', 'Microsoft JhengHei', '微軟正黑體', 'Microsoft YaHei', '微软雅黑', 'Noto Sans HK', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', ui-monospace, monospace",
 				codeLineHeight: "1.5rem",
 				frames: {
 					editorBackground: "var(--codeblock-bg)",

src/plugins/expressive-code/language-badge.ts

@@ -26,7 +26,19 @@ export function pluginLanguageBadge() {
           top: 0.5rem;
           padding: 0.1rem 0.5rem;
           content: attr(data-language);
-          font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+          font-family: var(
+            --ec-codeFontFml,
+            "JetBrains Mono Variable",
+            "JetBrains Mono",
+            ui-monospace,
+            SFMono-Regular,
+            Menlo,
+            Monaco,
+            Consolas,
+            "Liberation Mono",
+            "Courier New",
+            monospace
+          );
           font-size: 0.75rem;
           font-weight: bold;
           text-transform: uppercase;

src/styles/encrypted-content.css

@@ -39,13 +39,13 @@
   @apply px-4 py-2 text-xs font-medium;
   background: var(--primary);
   color: white;
-  font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
 }
 
 /* pre元素样式 */
 #decrypted-content .frame pre {
   @apply p-4 overflow-x-auto m-0;
-  font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
   font-size: 0.875rem;
   line-height: 1.5rem;
   background: var(--codeblock-bg);
@@ -67,7 +67,7 @@
 
 /* 代码元素样式 */
 #decrypted-content code {
-  font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
 }
 
 /* 内联代码样式 - 与markdown.css保持一致 */
@@ -306,7 +306,7 @@
   top: 0.5rem;
   padding: 0.1rem 0.5rem;
   content: attr(data-language);
-  font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
   font-size: 0.75rem;
   font-weight: bold;
   text-transform: uppercase;

src/styles/expressive-code.css

@@ -19,7 +19,7 @@
   }
 
   .title {
-    font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
   }
 
   /* 复制按钮样式 (Copy Button) */

src/styles/markdown.css

@@ -39,7 +39,7 @@
   code {
     @apply bg-(--inline-code-bg) text-(--inline-code-color) px-1 py-0.5 rounded-md overflow-hidden;
 
-    font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: var(--ec-codeFontFml, "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
 
     &:before,
     &:after {