fix(monaco): editor colors interop, fix #594

shikijs · Feb 18, 2024 · 788250d · 788250d
1 parent 9ed0044
commit 788250d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 2 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #app {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        background-color: #f3f4f6;
+      }
+    </style>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/monaco/playground/package.json 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
@@ -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
@@ -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
@@ -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
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,5 +1,6 @@
 packages:
   - packages/*
+  - packages/*/playground
   - playground
   - examples/*
   - docs