diff --git a/internal/api/themes/black.css b/internal/api/themes/black.css index bf41263..3a37395 100644 --- a/internal/api/themes/black.css +++ b/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-text: #abb2bf; + --rm-code-bg: #24292e; + --rm-code-text: #e1e4e8; --rm-highlight-bg: rgba(232, 196, 119, 0.25); } diff --git a/internal/api/themes/white.css b/internal/api/themes/white.css index 77dc87c..f06dd1f 100644 --- a/internal/api/themes/white.css +++ b/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-text: #abb2bf; + --rm-code-bg: #24292e; + --rm-code-text: #e1e4e8; --rm-highlight-bg: #fff0a8; } diff --git a/web/src/highlight/theme.test.ts b/web/src/highlight/theme.test.ts index 0c5d6ce..07accdc 100644 --- a/web/src/highlight/theme.test.ts +++ b/web/src/highlight/theme.test.ts @@ -1,16 +1,22 @@ -import { expect, it } from 'vitest' -import { createHighlighterCore } from 'shiki/core' -import { createJavaScriptRegexEngine } from 'shiki/engine/javascript' -import { bundledLanguages } from 'shiki/langs' -import { codeTheme } from './theme' +import { afterEach, expect, it, vi } from 'vitest' +import type { HighlightResponse } from './protocol' -it('实际语法高亮使用参考片段的关键字、字符串和注释颜色', async () => { - const language = await bundledLanguages.javascript() - const highlighter = await createHighlighterCore({ themes: [codeTheme], langs: language.default, engine: createJavaScriptRegexEngine() }) - try { - const tokens = highlighter.codeToTokensBase('const value = "hello" // comment', { lang: 'javascript', theme: codeTheme.name }).flat() - expect(tokens.find((token) => token.content === 'const')?.color).toBe('#C678DD') - expect(tokens.find((token) => token.content.includes('hello'))?.color).toBe('#98C379') - expect(tokens.find((token) => token.content.includes('comment'))?.color).toBe('#8F9094') - } finally { highlighter.dispose() } +afterEach(() => vi.unstubAllGlobals()) + +it('编辑器与分享页共用的 Worker 返回 GitHub Dark 原始配色', async () => { + let reply: HighlightResponse | undefined + const worker = new class extends EventTarget { + postMessage(response: HighlightResponse) { reply = response } + }() + vi.stubGlobal('self', worker) + 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() + 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') }) diff --git a/web/src/highlight/theme.ts b/web/src/highlight/theme.ts deleted file mode 100644 index 4269590..0000000 --- a/web/src/highlight/theme.ts +++ /dev/null @@ -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' } }, - ], -} diff --git a/web/src/highlight/worker.ts b/web/src/highlight/worker.ts index a3e59d4..fbadad2 100644 --- a/web/src/highlight/worker.ts +++ b/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 = createHighlighterCore({ - themes: [codeTheme], + themes: [githubDark], langs: [], engine: createJavaScriptRegexEngine({ forgiving: true }), }) diff --git a/web/src/themes/base.css b/web/src/themes/base.css index 78ff62f..8ca707b 100644 --- a/web/src/themes/base.css +++ b/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-text: #abb2bf; + --rm-code-bg: #24292e; + --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;