From 788250d7bb575931445f3a6833987b05953587df Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 18 Feb 2024 17:56:13 +0100 Subject: [PATCH] fix(monaco): editor colors interop, fix #594 --- package.json | 1 + packages/monaco/package.json | 3 ++- packages/monaco/playground/index.html | 28 +++++++++++++++++++++ packages/monaco/playground/package.json | 13 ++++++++++ packages/monaco/playground/src/main.ts | 30 +++++++++++++++++++++++ packages/monaco/playground/vite.config.ts | 10 ++++++++ packages/monaco/src/index.ts | 2 +- pnpm-lock.yaml | 12 +++++++++ pnpm-workspace.yaml | 1 + 9 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 packages/monaco/playground/index.html create mode 100644 packages/monaco/playground/package.json create mode 100644 packages/monaco/playground/src/main.ts create mode 100644 packages/monaco/playground/vite.config.ts diff --git a/package.json b/package.json index dd4d89ded..0d18c5aa8 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@rollup/plugin-replace": "^5.0.5", "@rollup/plugin-terser": "^0.4.4", "@shikijs/markdown-it": "workspace:*", + "@shikijs/monaco": "workspace:*", "@shikijs/rehype": "workspace:*", "@shikijs/transformers": "workspace:*", "@shikijs/vitepress-twoslash": "workspace:*", diff --git a/packages/monaco/package.json b/packages/monaco/package.json index fa33481fe..656ccf2d1 100644 --- a/packages/monaco/package.json +++ b/packages/monaco/package.json @@ -42,7 +42,8 @@ "build": "unbuild", "dev": "unbuild --stub", "prepublishOnly": "nr build", - "test": "vitest" + "test": "vitest", + "play": "nr -C playground play" }, "dependencies": { "@shikijs/core": "workspace:*" diff --git a/packages/monaco/playground/index.html b/packages/monaco/playground/index.html new file mode 100644 index 000000000..3b508521a --- /dev/null +++ b/packages/monaco/playground/index.html @@ -0,0 +1,28 @@ + + + + + + + Vite + TS + + + +
+ + + diff --git a/packages/monaco/playground/package.json b/packages/monaco/playground/package.json new file mode 100644 index 000000000..45376f7c1 --- /dev/null +++ b/packages/monaco/playground/package.json @@ -0,0 +1,13 @@ +{ + "name": "playground", + "type": "module", + "version": "0.0.0", + "private": true, + "scripts": { + "play": "vite" + }, + "devDependencies": { + "typescript": "^5.2.2", + "vite": "^5.1.0" + } +} diff --git a/packages/monaco/playground/src/main.ts b/packages/monaco/playground/src/main.ts new file mode 100644 index 000000000..532f3dcb7 --- /dev/null +++ b/packages/monaco/playground/src/main.ts @@ -0,0 +1,30 @@ +import { getHighlighter } from 'shiki' +import { shikiToMonaco } from '@shikijs/monaco' +import * as monaco from 'monaco-editor-core' + +// Create the highlighter, it can be reused +const highlighter = await getHighlighter({ + themes: [ + 'min-dark', + ], + langs: [ + 'javascript', + 'typescript', + 'vue', + ], +}) + +// Register the languageIds first. Only registered languages will be highlighted. +monaco.languages.register({ id: 'vue' }) +monaco.languages.register({ id: 'typescript' }) +monaco.languages.register({ id: 'javascript' }) + +// Register the themes from Shiki, and provide syntax highlighting for Monaco. // [!code highlight:2] +shikiToMonaco(highlighter, monaco) + +// Create the editor +monaco.editor.create(document.getElementById('app')!, { + value: 'const a = 1', + language: 'javascript', + theme: 'min-dark', +}) diff --git a/packages/monaco/playground/vite.config.ts b/packages/monaco/playground/vite.config.ts new file mode 100644 index 000000000..ec59a1d21 --- /dev/null +++ b/packages/monaco/playground/vite.config.ts @@ -0,0 +1,10 @@ +import { fileURLToPath } from 'node:url' +import { defineConfig } from 'vite' + +export default defineConfig({ + resolve: { + alias: { + '@shikijs/monaco': fileURLToPath(new URL('../src/index.ts', import.meta.url)), + }, + }, +}) diff --git a/packages/monaco/src/index.ts b/packages/monaco/src/index.ts index fa54e4653..493ffe244 100644 --- a/packages/monaco/src/index.ts +++ b/packages/monaco/src/index.ts @@ -35,7 +35,7 @@ export function textmateThemeToMonacoTheme(theme: ThemeRegistrationResolved): Mo const colors = Object.fromEntries( Object.entries(theme.colors || {}) - .map(([key, value]) => [key, normalizeColor(value)]), + .map(([key, value]) => [key, `#${normalizeColor(value)}`]), ) return { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec0fefd1a..590fe2eb1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: '@shikijs/markdown-it': specifier: workspace:* version: link:packages/markdown-it + '@shikijs/monaco': + specifier: workspace:* + version: link:packages/monaco '@shikijs/rehype': specifier: workspace:* version: link:packages/rehype @@ -287,6 +290,15 @@ importers: specifier: ^0.46.0 version: 0.46.0 + packages/monaco/playground: + devDependencies: + typescript: + specifier: ^5.2.2 + version: 5.3.3 + vite: + specifier: ^5.1.0 + version: 5.1.3(@types/node@20.11.19) + packages/rehype: dependencies: '@shikijs/transformers': diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 0d2c6efd3..97a89f8eb 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - packages/* + - packages/*/playground - playground - examples/* - docs