From 6b726ca3225d3bff758929ac9b43f8dafa494ee2 Mon Sep 17 00:00:00 2001 From: Vojta Holik Date: Mon, 11 Mar 2024 16:14:23 +0100 Subject: [PATCH] style(tt): use vs dark as default shiki syntax highlighting theme --- apps/total-typescript/src/pages/[article].tsx | 1 - .../src/pages/concepts/[slug]/index.tsx | 1 - .../markdown/shiki-remote-plugin.ts | 2 +- .../skill-lesson/markdown/vs-dark-theme.json | 533 ++++++++++++++++++ 4 files changed, 534 insertions(+), 3 deletions(-) create mode 100644 packages/skill-lesson/markdown/vs-dark-theme.json diff --git a/apps/total-typescript/src/pages/[article].tsx b/apps/total-typescript/src/pages/[article].tsx index 54aa702ac7..0704e25ba7 100644 --- a/apps/total-typescript/src/pages/[article].tsx +++ b/apps/total-typescript/src/pages/[article].tsx @@ -22,7 +22,6 @@ export const getStaticProps: GetStaticProps = async ({params}) => { (await serializeMDX(article.body, { useShikiTwoslash: true, syntaxHighlighterOptions: { - theme: 'github-dark', authorization: process.env.SHIKI_AUTH_TOKEN, endpoint: process.env.SHIKI_ENDPOINT, }, diff --git a/apps/total-typescript/src/pages/concepts/[slug]/index.tsx b/apps/total-typescript/src/pages/concepts/[slug]/index.tsx index 7747c06650..5a94ed441c 100644 --- a/apps/total-typescript/src/pages/concepts/[slug]/index.tsx +++ b/apps/total-typescript/src/pages/concepts/[slug]/index.tsx @@ -27,7 +27,6 @@ export const getStaticProps: GetStaticProps = async ({params}) => { scope: data, useShikiTwoslash: true, syntaxHighlighterOptions: { - theme: 'dark-plus', authorization: process.env.SHIKI_AUTH_TOKEN, endpoint: process.env.SHIKI_ENDPOINT, }, diff --git a/packages/skill-lesson/markdown/shiki-remote-plugin.ts b/packages/skill-lesson/markdown/shiki-remote-plugin.ts index db39b9f902..af1fb1c13d 100644 --- a/packages/skill-lesson/markdown/shiki-remote-plugin.ts +++ b/packages/skill-lesson/markdown/shiki-remote-plugin.ts @@ -1,6 +1,6 @@ import type {Transformer} from 'unified' import {Highlighter, getHighlighter} from 'shiki' -import defaultTheme from 'shiki/themes/github-dark.json' +import defaultTheme from './vs-dark-theme.json' interface MarkdownNode { type: string diff --git a/packages/skill-lesson/markdown/vs-dark-theme.json b/packages/skill-lesson/markdown/vs-dark-theme.json new file mode 100644 index 0000000000..ec1b37b030 --- /dev/null +++ b/packages/skill-lesson/markdown/vs-dark-theme.json @@ -0,0 +1,533 @@ +{ + "name": "Dark+ (default dark)", + "settings": [ + { + "settings": { + "foreground": "#D4D4D4", + "background": "#1E1E1E" + } + }, + { + "name": "Function declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.constant.handlebars", + "source.powershell variable.other.member", + "entity.name.operator.custom-literal" + ], + "settings": { + "foreground": "#DCDCAA" + } + }, + { + "name": "Types declaration and references", + "scope": [ + "meta.return-type", + "support.class", + "support.type", + "entity.name.type", + "entity.name.namespace", + "entity.other.attribute", + "entity.name.scope-resolution", + "entity.name.class", + "storage.type.numeric.go", + "storage.type.byte.go", + "storage.type.boolean.go", + "storage.type.string.go", + "storage.type.uintptr.go", + "storage.type.error.go", + "storage.type.rune.go", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + "storage.type.annotation.java", + "storage.type.generic.java", + "storage.type.java", + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Types declaration and references, TS grammar specific", + "scope": [ + "meta.type.cast.expr", + "meta.type.new.expr", + "support.constant.math", + "support.constant.dom", + "support.constant.json", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Control flow / Special keywords", + "scope": [ + "keyword.control", + "source.cpp keyword.operator.new", + "keyword.operator.delete", + "keyword.other.using", + "keyword.other.operator", + "entity.name.operator" + ], + "settings": { + "foreground": "#C586C0" + } + }, + { + "name": "Variable and parameter name", + "scope": [ + "variable", + "meta.definition.variable.name", + "support.variable", + "entity.name.variable" + ], + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "Constants and enums", + "scope": ["variable.other.constant", "variable.other.enummember"], + "settings": { + "foreground": "#51B6C4" + } + }, + { + "name": "Object keys, TS grammar specific", + "scope": "meta.object-literal.key", + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "CSS property value", + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#CE9178" + } + }, + { + "name": "Regular expression groups", + "scope": [ + "punctuation.definition.group.regexp", + "punctuation.definition.group.assertion.regexp", + "punctuation.definition.character-class.regexp", + "punctuation.character.set.begin.regexp", + "punctuation.character.set.end.regexp", + "keyword.operator.negation.regexp", + "support.other.parenthesis.regexp" + ], + "settings": { + "foreground": "#CE9178" + } + }, + { + "scope": [ + "constant.character.character-class.regexp", + "constant.other.character-class.set.regexp", + "constant.other.character-class.regexp", + "constant.character.set.regexp" + ], + "settings": { + "foreground": "#d16969" + } + }, + { + "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"], + "settings": { + "foreground": "#DCDCAA" + } + }, + { + "scope": "keyword.operator.quantifier.regexp", + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "constant.character", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "constant.character.escape", + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "entity.name.label", + "settings": { + "foreground": "#C8C8C8" + } + }, + { + "scope": ["meta.embedded", "source.groovy.embedded"], + "settings": { + "foreground": "#D4D4D4" + } + }, + { + "scope": "emphasis", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "strong", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "header", + "settings": { + "foreground": "#000080" + } + }, + { + "scope": "comment", + "settings": { + "foreground": "#6A9955" + } + }, + { + "scope": "constant.language", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": [ + "constant.numeric", + "entity.name.operator.custom-literal.number", + "keyword.operator.plus.exponent", + "keyword.operator.minus.exponent" + ], + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "constant.regexp", + "settings": { + "foreground": "#646695" + } + }, + { + "scope": "entity.name.tag", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "entity.name.tag.css", + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": [ + "entity.other.attribute-name.class.css", + "entity.other.attribute-name.class.mixin.css", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.pseudo-class.css", + "entity.other.attribute-name.pseudo-element.css", + "source.css.less entity.other.attribute-name.id", + "entity.other.attribute-name.attribute.scss", + "entity.other.attribute-name.scss" + ], + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "invalid", + "settings": { + "foreground": "#f44747" + } + }, + { + "scope": "markup.underline", + "settings": { + "fontStyle": "underline" + } + }, + { + "scope": "markup.bold", + "settings": { + "fontStyle": "bold", + "foreground": "#569cd6" + } + }, + { + "scope": "markup.heading", + "settings": { + "fontStyle": "bold", + "foreground": "#569cd6" + } + }, + { + "scope": "markup.italic", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "markup.inserted", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "markup.deleted", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "markup.changed", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "punctuation.definition.quote.begin.markdown", + "settings": { + "foreground": "#6A9955" + } + }, + { + "scope": "punctuation.definition.list.begin.markdown", + "settings": { + "foreground": "#6796e6" + } + }, + { + "scope": "markup.inline.raw", + "settings": { + "foreground": "#ce9178" + } + }, + { + "name": "brackets of XML/HTML tags", + "scope": "punctuation.definition.tag", + "settings": { + "foreground": "#808080" + } + }, + { + "scope": ["meta.preprocessor", "entity.name.function.preprocessor"], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "meta.preprocessor.string", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "meta.preprocessor.numeric", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "meta.structure.dictionary.key.python", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage.type", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": ["storage.modifier", "keyword.operator.noexcept"], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": [ + "string", + "entity.name.operator.custom-literal.string", + "meta.embedded.assembly" + ], + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.tag", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.value", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.regexp", + "settings": { + "foreground": "#d16969" + } + }, + { + "name": "String interpolation", + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end", + "punctuation.section.embedded" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "name": "Reset JavaScript string interpolation expression", + "scope": "meta.template.expression", + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": [ + "support.type.vendored.property-name", + "support.type.property-name", + "variable.css", + "variable.scss", + "variable.other.less", + "source.coffee.embedded" + ], + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": [ + "keyword.operator.new", + "keyword.operator.expression", + "keyword.operator.cast", + "keyword.operator.sizeof", + "keyword.operator.alignof", + "keyword.operator.typeid", + "keyword.operator.alignas", + "keyword.operator.instanceof", + "keyword.operator.logical.python", + "keyword.operator.wordlike" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.other.unit", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": [ + "punctuation.section.embedded.begin.php", + "punctuation.section.embedded.end.php" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "support.function.git-rebase", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "constant.sha.git-rebase", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "name": "coloring of the Java import and package identifiers", + "scope": [ + "storage.modifier.import.java", + "variable.language.wildcard.java", + "storage.modifier.package.java" + ], + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "name": "this.self", + "scope": "variable.language", + "settings": { + "foreground": "#569cd6" + } + } + ] +}