From e4f8d1b3b075323968bb6dc334226dff33c0a2b0 Mon Sep 17 00:00:00 2001 From: Li Jin Date: Tue, 3 Feb 2026 22:42:37 +0800 Subject: Updated doc. --- doc/docs/.vitepress/public/image/yuescript.svg | 2 +- .../.vitepress/theme/components/YueCompiler.vue | 46 ++++++++++++---------- doc/docs/.vitepress/theme/custom.css | 42 +++++++++++++++----- doc/docs/.vitepress/theme/index.ts | 3 ++ 4 files changed, 62 insertions(+), 31 deletions(-) (limited to 'doc/docs/.vitepress') diff --git a/doc/docs/.vitepress/public/image/yuescript.svg b/doc/docs/.vitepress/public/image/yuescript.svg index 71214fe..f81e533 100644 --- a/doc/docs/.vitepress/public/image/yuescript.svg +++ b/doc/docs/.vitepress/public/image/yuescript.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/doc/docs/.vitepress/theme/components/YueCompiler.vue b/doc/docs/.vitepress/theme/components/YueCompiler.vue index 28a6a9f..dcea692 100755 --- a/doc/docs/.vitepress/theme/components/YueCompiler.vue +++ b/doc/docs/.vitepress/theme/components/YueCompiler.vue @@ -39,24 +39,25 @@ import { history, indentWithTab } from '@codemirror/commands' import { defaultKeymap, historyKeymap } from '@codemirror/commands' import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode' -const vscodeLightTheme = EditorView.theme( +/* shikijs/themes/light-plus: editor.background #FFFFFF, editor.foreground #000000 */ +const lightPlusTheme = EditorView.theme( { '&': { height: '100%', - backgroundColor: '#ffffff', + backgroundColor: '#FFFFFF', color: '#000000', - fontSize: '15px' + fontSize: '0.8em' }, '&.cm-focused': { outline: 'none' }, '.cm-content': { fontFamily: - "Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace", + "ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace", lineHeight: '1.375' }, '.cm-gutters': { - backgroundColor: '#ffffff', + backgroundColor: '#FFFFFF', color: '#6e6e6e', borderRight: 'none' }, @@ -82,24 +83,25 @@ const vscodeLightTheme = EditorView.theme( { dark: false } ) -const vscodeDarkTheme = EditorView.theme( +/* shikijs/themes/dark-plus: editor.background #1E1E1E, editor.foreground #D4D4D4 */ +const darkPlusTheme = EditorView.theme( { '&': { height: '100%', - backgroundColor: '#1e1e1e', - color: '#d4d4d4', - fontSize: '15px' + backgroundColor: '#1E1E1E', + color: '#D4D4D4', + fontSize: '0.8em' }, '&.cm-focused': { outline: 'none' }, '.cm-content': { fontFamily: - "Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace", + "ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace", lineHeight: '1.375' }, '.cm-gutters': { - backgroundColor: '#1e1e1e', + backgroundColor: '#1E1E1E', color: '#858585', borderRight: 'none' }, @@ -125,16 +127,17 @@ const vscodeDarkTheme = EditorView.theme( { dark: true } ) -const vscodeLightHighlightStyle = HighlightStyle.define([ +/* shikijs/themes/light-plus tokenColors */ +const lightPlusHighlightStyle = HighlightStyle.define([ { tag: tags.comment, color: '#008000' }, - { tag: tags.keyword, color: '#0000ff' }, + { tag: tags.keyword, color: '#AF00DB' }, { tag: [tags.operator, tags.punctuation], color: '#000000' }, { tag: [tags.string, tags.special(tags.string)], color: '#a31515' }, + { tag: tags.regexp, color: '#811f3f' }, { tag: [tags.number, tags.bool, tags.null], color: '#098658' }, { tag: tags.function(tags.variableName), color: '#795e26' }, { tag: tags.typeName, color: '#267f99' }, { tag: tags.className, color: '#267f99' }, - { tag: tags.variableName, color: '#001080' }, { tag: tags.propertyName, color: '#001080' }, { tag: tags.tagName, color: '#800000' }, { tag: tags.attributeName, color: '#e50000' }, @@ -142,16 +145,17 @@ const vscodeLightHighlightStyle = HighlightStyle.define([ { tag: tags.invalid, color: '#cd3131' } ]) -const vscodeDarkHighlightStyle = HighlightStyle.define([ +/* shikijs/themes/dark-plus tokenColors */ +const darkPlusHighlightStyle = HighlightStyle.define([ { tag: tags.comment, color: '#6a9955' }, - { tag: tags.keyword, color: '#569cd6' }, + { tag: tags.keyword, color: '#C586C0' }, { tag: [tags.operator, tags.punctuation], color: '#d4d4d4' }, { tag: [tags.string, tags.special(tags.string)], color: '#ce9178' }, + { tag: tags.regexp, color: '#d16969' }, { tag: [tags.number, tags.bool, tags.null], color: '#b5cea8' }, { tag: tags.function(tags.variableName), color: '#dcdcaa' }, { tag: tags.typeName, color: '#4ec9b0' }, { tag: tags.className, color: '#4ec9b0' }, - { tag: tags.variableName, color: '#9cdcfe' }, { tag: tags.propertyName, color: '#9cdcfe' }, { tag: tags.tagName, color: '#569cd6' }, { tag: tags.attributeName, color: '#9cdcfe' }, @@ -328,12 +332,12 @@ export default { this.readOnlyCompartment.of(EditorState.readOnly.of(this.readonly)), this.highlightCompartment.of( syntaxHighlighting( - isDark ? vscodeDarkHighlightStyle : vscodeLightHighlightStyle, + isDark ? darkPlusHighlightStyle : lightPlusHighlightStyle, { fallback: true } ) ), updateListener, - this.themeCompartment.of(isDark ? vscodeDarkTheme : vscodeLightTheme) + this.themeCompartment.of(isDark ? darkPlusTheme : lightPlusTheme) ] }) @@ -350,11 +354,11 @@ export default { this.editorView.dispatch({ effects: [ this.themeCompartment.reconfigure( - isDark ? vscodeDarkTheme : vscodeLightTheme + isDark ? darkPlusTheme : lightPlusTheme ), this.highlightCompartment.reconfigure( syntaxHighlighting( - isDark ? vscodeDarkHighlightStyle : vscodeLightHighlightStyle, + isDark ? darkPlusHighlightStyle : lightPlusHighlightStyle, { fallback: true } ) ) diff --git a/doc/docs/.vitepress/theme/custom.css b/doc/docs/.vitepress/theme/custom.css index 9085b4b..7b4e593 100644 --- a/doc/docs/.vitepress/theme/custom.css +++ b/doc/docs/.vitepress/theme/custom.css @@ -14,7 +14,7 @@ max-width: 450px !important; } -/* Prism theme for YueCompiler output (VS Code Light/Dark) */ +/* Prism theme for YueCompiler output (shikijs/themes light-plus & dark-plus) */ .code-output, .code-output code { background: #ffffff; @@ -27,12 +27,13 @@ color: #d4d4d4; } +/* light-plus */ .code-output .token.comment { color: #008000; } .code-output .token.keyword { - color: #0000ff; + color: #AF00DB; } .code-output .token.operator, @@ -41,12 +42,19 @@ } .code-output .token.string, -.code-output .token.char, -.code-output .token.regex, -.code-output .token.variable { +.code-output .token.char { color: #a31515; } +.code-output .token.regex { + color: #811f3f; +} + +.code-output .token.variable, +.code-output .token.parameter { + color: #001080; +} + .code-output .token.number, .code-output .token.boolean, .code-output .token.constant { @@ -62,12 +70,17 @@ color: #267f99; } +.code-output .token.invalid { + color: #cd3131; +} + +/* dark-plus */ .dark .code-output .token.comment { color: #6a9955; } .dark .code-output .token.keyword { - color: #569cd6; + color: #C586C0; } .dark .code-output .token.operator, @@ -76,12 +89,19 @@ } .dark .code-output .token.string, -.dark .code-output .token.char, -.dark .code-output .token.regex, -.dark .code-output .token.variable { +.dark .code-output .token.char { color: #ce9178; } +.dark .code-output .token.regex { + color: #d16969; +} + +.dark .code-output .token.variable, +.dark .code-output .token.parameter { + color: #9cdcfe; +} + .dark .code-output .token.number, .dark .code-output .token.boolean, .dark .code-output .token.constant { @@ -96,3 +116,7 @@ .dark .code-output .token.builtin { color: #4ec9b0; } + +.dark .code-output .token.invalid { + color: #f44747; +} diff --git a/doc/docs/.vitepress/theme/index.ts b/doc/docs/.vitepress/theme/index.ts index e2a44c6..398df17 100644 --- a/doc/docs/.vitepress/theme/index.ts +++ b/doc/docs/.vitepress/theme/index.ts @@ -2,8 +2,11 @@ import DefaultTheme from 'vitepress/theme' import type { Theme } from 'vitepress' import './custom.css' +// @ts-ignore import CompilerModal from './components/CompilerModal.vue' +// @ts-ignore import YueCompiler from './components/YueCompiler.vue' +// @ts-ignore import YueDisplay from './components/YueDisplay.vue' const theme: Theme = { -- cgit v1.2.3-55-g6feb