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