Restore the built-in Shiki GitHub Dark code palette

internal/api/themes/black.css

@@ -16,8 +16,8 @@
   --rm-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
   --rm-inline-code-bg: #202127;
   --rm-inline-code-text: #f19a58;
-  --rm-code-bg: #263238;
+  --rm-code-bg: #24292e;
-  --rm-code-text: #abb2bf;
+  --rm-code-text: #e1e4e8;
   --rm-highlight-bg: rgba(232, 196, 119, 0.25);
 }
 

internal/api/themes/white.css

@@ -16,7 +16,7 @@
   --rm-shadow: 0 12px 36px rgba(24, 31, 44, 0.12);
   --rm-inline-code-bg: #f8f8f8;
   --rm-inline-code-text: #e96900;
-  --rm-code-bg: #263238;
+  --rm-code-bg: #24292e;
-  --rm-code-text: #abb2bf;
+  --rm-code-text: #e1e4e8;
   --rm-highlight-bg: #fff0a8;
 }

web/src/highlight/theme.test.ts

@@ -1,16 +1,22 @@
-import { expect, it } from 'vitest'
+import { afterEach, expect, it, vi } from 'vitest'
-import { createHighlighterCore } from 'shiki/core'
+import type { HighlightResponse } from './protocol'
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
-import { bundledLanguages } from 'shiki/langs'
-import { codeTheme } from './theme'
 
-it('实际语法高亮使用参考片段的关键字、字符串和注释颜色', async () => {
+afterEach(() => vi.unstubAllGlobals())
-  const language = await bundledLanguages.javascript()
+
-  const highlighter = await createHighlighterCore({ themes: [codeTheme], langs: language.default, engine: createJavaScriptRegexEngine() })
+it('编辑器与分享页共用的 Worker 返回 GitHub Dark 原始配色', async () => {
-  try {
+  let reply: HighlightResponse | undefined
-    const tokens = highlighter.codeToTokensBase('const value = "hello" // comment', { lang: 'javascript', theme: codeTheme.name }).flat()
+  const worker = new class extends EventTarget {
-    expect(tokens.find((token) => token.content === 'const')?.color).toBe('#C678DD')
+    postMessage(response: HighlightResponse) { reply = response }
-    expect(tokens.find((token) => token.content.includes('hello'))?.color).toBe('#98C379')
+  }()
-    expect(tokens.find((token) => token.content.includes('comment'))?.color).toBe('#8F9094')
+  vi.stubGlobal('self', worker)
-  } finally { highlighter.dispose() }
+  await import('./worker')
+  const code = 'const value = "hello" // comment'
+  worker.dispatchEvent(new MessageEvent('message', { data: { id: 1, lang: 'javascript', code } }))
+  await vi.waitFor(() => expect(reply).toBeDefined())
+  if (!reply || !('tokens' in reply) || !reply.tokens) throw new Error('高亮 Worker 未返回颜色')
+  const colors = new Map<string | number, string | number>()
+  for (let i = 0; i < reply.tokens.length; i += 4) colors.set(reply.tokens[i], reply.tokens[i + 2])
+  expect(colors.get(0)).toBe('#F97583')
+  expect(colors.get(code.indexOf('"hello"'))).toBe('#9ECBFF')
+  expect(colors.get(code.indexOf('//'))).toBe('#6A737D')
 })

web/src/highlight/theme.ts

@@ -1,18 +0,0 @@
-// 适配用户提供的 Obsidian CodeBlock.css：编辑器与分享页共用深色代码配色。
-export const codeTheme = {
-  name: 'rawmark-code',
-  type: 'dark' as const,
-  colors: { 'editor.background': '#263238', 'editor.foreground': '#abb2bf' },
-  tokenColors: [
-    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: '#8f9094', fontStyle: 'italic' } },
-    { scope: ['keyword', 'storage'], settings: { foreground: '#c678dd' } },
-    { scope: ['keyword.operator'], settings: { foreground: '#56b6c2' } },
-    { scope: ['string', 'constant.other.symbol'], settings: { foreground: '#98c379' } },
-    { scope: ['constant.numeric', 'constant.language', 'support.constant'], settings: { foreground: '#d19a66' } },
-    { scope: ['entity.name.function', 'support.function'], settings: { foreground: '#d19a66' } },
-    { scope: ['entity.name.tag', 'variable.other.property', 'support.type.property-name'], settings: { foreground: '#e06c75' } },
-    { scope: ['entity.name.type', 'entity.name.class', 'support.type', 'support.class'], settings: { foreground: '#e5c07b' } },
-    { scope: ['variable', 'punctuation'], settings: { foreground: '#abb2bf' } },
-    { scope: ['variable.other.property'], settings: { foreground: '#e06c75' } },
-  ],
-}

web/src/highlight/worker.ts

@@ -1,13 +1,13 @@
 import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { bundledLanguages } from 'shiki/langs'
-import { codeTheme } from './theme'
+import githubDark from 'shiki/themes/github-dark.mjs'
 import type { HighlightRequest, HighlightResponse, TokenRun } from './protocol'
 
-const THEME = codeTheme.name
+const THEME = 'github-dark'
 
 const highlighterReady: Promise<HighlighterCore> = createHighlighterCore({
-  themes: [codeTheme],
+  themes: [githubDark],
   langs: [],
   engine: createJavaScriptRegexEngine({ forgiving: true }),
 })

web/src/themes/base.css

@@ -1,6 +1,6 @@
 /*
  * 基础主题。--rm-* 变量即主题 API，第三方主题只需覆盖这些变量。
- * 代码与编辑样式适配用户提供的 Obsidian CSS 片段。
+ * 编辑排版适配用户提供的 Obsidian CSS 片段，代码块颜色使用 Shiki GitHub Dark。
  */
 :root {
   color-scheme: light;
@@ -31,8 +31,8 @@
 
   --rm-inline-code-bg: #f8f8f8;
   --rm-inline-code-text: #e96900;
-  --rm-code-bg: #263238;
+  --rm-code-bg: #24292e;
-  --rm-code-text: #abb2bf;
+  --rm-code-text: #e1e4e8;
   --rm-code-font-size: 14px;
   --rm-highlight-bg: rgba(255, 213, 0, 0.35);
 }
@@ -47,7 +47,7 @@
   --rm-accent-strong: #42b883;
   --rm-inline-code-bg: #2f2f2f;
   --rm-inline-code-text: #f19a58;
-  --rm-code-bg: #263238;
+  --rm-code-bg: #24292e;
   --rm-highlight-bg: rgba(255, 213, 0, 0.28);
 
   --rm-sidebar-bg: #191b1d;
@@ -69,7 +69,7 @@
     --rm-accent-strong: #42b883;
     --rm-inline-code-bg: #2f2f2f;
     --rm-inline-code-text: #f19a58;
-    --rm-code-bg: #263238;
+    --rm-code-bg: #24292e;
     --rm-highlight-bg: rgba(255, 213, 0, 0.28);
 
     --rm-sidebar-bg: #191b1d;