vscode-shiki-bridge 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yoav Balasiano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# vscode-shiki-bridge
+
+🌉 Extracts the user's VS Code theme and language grammars for Shiki
+
+## Why?
+
+VS Code doesn't provide a built-in way to render syntax-highlighted code blocks in webviews that match the user's current theme and installed language extensions. This library solves that by extracting the user's VS Code configuration (themes & language grammars) and passing it to Shiki, so you can render code blocks that look exactly like the editor.
+
+## Installation
+
+```bash
+npm install vscode-shiki-bridge shiki
+```
+
+## Usage
+
+```typescript
+import { createHighlighter } from "shiki";
+import { getUserTheme, getUserLangs } from "vscode-shiki-bridge";
+
+const [theme, themes] = await getUserTheme();
+const langs = await getUserLangs(["graphql"]);
+// Create Shiki highlighter with the extracted themes and langs
+const highlighter = await createHighlighter({ themes, langs });
+
+// Highlight GraphQL code with the user's theme
+const html = highlighter.codeToHtml(
+  `type User {
+    name: String
+    age: Int
+}`,
+  {
+    lang: "graphql",
+    theme,
+  }
+);
+```
+
+## Development and Debug
+
+1. Open the project in VS Code / Cursor
+2. Press `F5` to start debugging (opens a new VS Code window with the example extension)
+3. Run the "Shiki Preview" command from the Command Palette to see your highlighted code blocks
+4. Make changes and reload the window to test
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,219 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const jsonc_parser = __toESM(require("jsonc-parser"));
+
+//#region src/vscode-utils.ts
+function getVscode() {
+	try {
+		return require("vscode");
+	} catch {
+		throw new Error("vscode-shiki-bridge: The 'vscode' API is only available inside the VS Code extension host.");
+	}
+}
+
+//#endregion
+//#region src/user-theme.ts
+/**
+* Read the currently selected user theme's theme JSON.
+* Returns null when not running inside VS Code, no theme is configured,
+* or the theme file cannot be found/read.
+*/
+async function getUserTheme() {
+	try {
+		const vscode = getVscode();
+		const workbenchConfig = vscode.workspace.getConfiguration("workbench");
+		const themeName = workbenchConfig.get("colorTheme");
+		if (!themeName) return THEME_NOT_FOUND_RESULT;
+		const decoder = new TextDecoder("utf-8");
+		for (const extension of vscode.extensions.all) {
+			const contributions = extension.packageJSON?.contributes?.themes ?? [];
+			const matchedTheme = contributions.find((contribution) => contribution.path && (contribution.id === themeName || contribution.label === themeName));
+			if (!matchedTheme) continue;
+			try {
+				const themeUri = vscode.Uri.joinPath(extension.extensionUri, matchedTheme.path);
+				const rawBytes = await vscode.workspace.fs.readFile(themeUri);
+				const jsonText = decoder.decode(rawBytes);
+				const json = (0, jsonc_parser.parse)(jsonText);
+				if (json.name) return [json.name, [json]];
+				return THEME_NOT_FOUND_RESULT;
+			} catch {
+				continue;
+			}
+		}
+		return THEME_NOT_FOUND_RESULT;
+	} catch {
+		return THEME_NOT_FOUND_RESULT;
+	}
+}
+const THEME_NOT_FOUND_RESULT = ["none", []];
+
+//#endregion
+//#region src/user-language-inference.ts
+/**
+* This function is vibe coded, I should revisit it in the future.
+* Infer required builtin Shiki language ids from a list of extension grammars.
+*
+* This inspects `embeddedLangs` provided by the collector and scans the grammar
+* `patterns`, `repository`, and `injections` for `include` targets like
+* `source.ts#...`, mapping known scopes to Shiki builtin language ids
+* (e.g., `source.ts` -> `typescript`).
+*
+* Returns a deduped array of builtin language ids in lowercase, excluding
+* any languages that are already present in the given `langs` by name or alias.
+*/
+function inferBuiltinLanguageIds(langs) {
+	const scopeToBuiltinLang = {
+		"source.ts": "typescript",
+		"source.tsx": "tsx",
+		"source.js": "javascript",
+		"source.jsx": "jsx",
+		"source.json": "json",
+		"text.html.basic": "html",
+		"source.css": "css",
+		"source.scss": "scss",
+		"source.sass": "sass",
+		"source.less": "less",
+		"source.graphql": "graphql",
+		"source.yaml": "yaml",
+		"source.toml": "toml",
+		"source.rust": "rust",
+		"source.python": "python",
+		"source.java": "java",
+		"source.go": "go",
+		"source.cpp": "cpp",
+		"source.c": "c",
+		"source.swift": "swift",
+		"source.kotlin": "kotlin",
+		"source.shell": "bash",
+		"source.bash": "bash",
+		"source.diff": "diff",
+		"text.xml": "xml",
+		"text.markdown": "markdown"
+	};
+	const presentLanguageNames = new Set();
+	for (const entry of langs) {
+		const candidates = [entry.name, ...entry.aliases ?? []].filter(Boolean).map((x) => x.toLowerCase());
+		for (const c of candidates) presentLanguageNames.add(c);
+	}
+	function extractIncludeTargets(grammar) {
+		const targets = new Set();
+		function visit(node) {
+			if (!node || typeof node !== "object") return;
+			const objectNode = node;
+			const include = objectNode.include;
+			if (typeof include === "string") targets.add(include);
+			const patterns = Array.isArray(objectNode.patterns) ? objectNode.patterns : [];
+			for (const p of patterns) visit(p);
+			const repository = objectNode.repository;
+			if (repository && typeof repository === "object") for (const key of Object.keys(repository)) visit(repository[key]);
+		}
+		visit(grammar);
+		const injections = grammar?.injections;
+		if (injections && typeof injections === "object") for (const key of Object.keys(injections)) visit(injections[key]);
+		return targets;
+	}
+	const inferred = new Set();
+	for (const entry of langs) {
+		for (const embedded of entry.embeddedLangs ?? []) if (typeof embedded === "string") inferred.add(embedded.toLowerCase());
+		const includeTargets = extractIncludeTargets(entry);
+		for (const inc of includeTargets) {
+			if (inc.startsWith("#")) continue;
+			const scope = inc.split("#", 1)[0];
+			const mapped = scopeToBuiltinLang[scope];
+			if (mapped) inferred.add(mapped.toLowerCase());
+		}
+	}
+	const result = [];
+	for (const langName of inferred) if (!presentLanguageNames.has(langName)) result.push(langName);
+	return result;
+}
+
+//#endregion
+//#region src/user-languages.ts
+/**
+* Collect TextMate grammars contributed by installed VS Code extensions.
+* @param langIds - If provided, only loads grammars for those specific language IDs.
+*/
+async function getUserLangs(langIds) {
+	try {
+		const vscode = getVscode();
+		const decoder = new TextDecoder("utf-8");
+		const extensionLangs = [];
+		const seenScope = new Set();
+		const normalizedLangIds = langIds?.map((id) => id.toLowerCase());
+		for (const extension of vscode.extensions.all) {
+			const contributes = extension.packageJSON?.contributes ?? {};
+			if (!contributes.grammars || contributes.grammars.length === 0) continue;
+			const languageIdToAliases = new Map();
+			for (const lang of contributes.languages ?? []) if (lang?.id) languageIdToAliases.set(lang.id, lang.aliases ?? []);
+			if (normalizedLangIds) {
+				const hasMatchingGrammar = contributes.grammars.some((grammar) => {
+					if (!grammar?.language) return false;
+					const names = [grammar.language, ...languageIdToAliases.get(grammar.language) ?? []].filter(Boolean).map((name) => name.toLowerCase());
+					return normalizedLangIds.some((desiredName) => names.includes(desiredName));
+				});
+				if (!hasMatchingGrammar) continue;
+			}
+			for (const grammar of contributes.grammars) {
+				if (!grammar?.path || !grammar.scopeName) continue;
+				if (!/\.json$/i.test(grammar.path)) continue;
+				if (!grammar.language) continue;
+				if (seenScope.has(grammar.scopeName)) continue;
+				if (normalizedLangIds) {
+					const names = [grammar.language, ...languageIdToAliases.get(grammar.language) ?? []].filter(Boolean).map((name) => name.toLowerCase());
+					const match = normalizedLangIds.find((desiredName) => names.includes(desiredName));
+					if (!match) continue;
+				}
+				try {
+					const uri = vscode.Uri.joinPath(extension.extensionUri, grammar.path);
+					const raw = await vscode.workspace.fs.readFile(uri);
+					const jsonText = decoder.decode(raw);
+					const grammarJson = (0, jsonc_parser.parse)(jsonText);
+					const embeddedLangs = grammar.embeddedLanguages ? Array.from(new Set(Object.values(grammar.embeddedLanguages).filter(Boolean))) : void 0;
+					seenScope.add(grammar.scopeName);
+					extensionLangs.push({
+						...grammarJson,
+						name: grammar.language,
+						embeddedLangs,
+						aliases: languageIdToAliases.get(grammar.language) ?? void 0
+					});
+				} catch {
+					continue;
+				}
+			}
+		}
+		if (normalizedLangIds) {
+			const builtinLangs = inferBuiltinLanguageIds(extensionLangs);
+			return [...extensionLangs, ...builtinLangs];
+		}
+		return extensionLangs;
+	} catch {
+		return [];
+	}
+}
+
+//#endregion
+exports.getUserLangs = getUserLangs;
+exports.getUserTheme = getUserTheme;
+exports.inferBuiltinLanguageIds = inferBuiltinLanguageIds;

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { LanguageRegistration, ThemeRegistrationAny } from "shiki/types";
+
+//#region src/user-theme.d.ts
+
+/**
+ * Read the currently selected user theme's theme JSON.
+ * Returns null when not running inside VS Code, no theme is configured,
+ * or the theme file cannot be found/read.
+ */
+declare function getUserTheme(): Promise<[string, ThemeRegistrationAny[]]>;
+//#endregion
+//#region src/user-languages.d.ts
+/**
+ * Collect TextMate grammars contributed by installed VS Code extensions.
+ * @param langIds - If provided, only loads grammars for those specific language IDs.
+ */
+declare function getUserLangs(langIds?: string[]): Promise<(string | LanguageRegistration)[]>;
+//#endregion
+//#region src/user-language-inference.d.ts
+/**
+ * This function is vibe coded, I should revisit it in the future.
+ * Infer required builtin Shiki language ids from a list of extension grammars.
+ *
+ * This inspects `embeddedLangs` provided by the collector and scans the grammar
+ * `patterns`, `repository`, and `injections` for `include` targets like
+ * `source.ts#...`, mapping known scopes to Shiki builtin language ids
+ * (e.g., `source.ts` -> `typescript`).
+ *
+ * Returns a deduped array of builtin language ids in lowercase, excluding
+ * any languages that are already present in the given `langs` by name or alias.
+ */
+declare function inferBuiltinLanguageIds(langs: LanguageRegistration[]): string[];
+//#endregion
+export { getUserLangs, getUserTheme, inferBuiltinLanguageIds };

package/dist/index.js

@@ -0,0 +1,201 @@
+import { parse } from "jsonc-parser";
+
+//#region rolldown:runtime
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+
+//#endregion
+//#region src/vscode-utils.ts
+function getVscode() {
+	try {
+		return __require("vscode");
+	} catch {
+		throw new Error("vscode-shiki-bridge: The 'vscode' API is only available inside the VS Code extension host.");
+	}
+}
+
+//#endregion
+//#region src/user-theme.ts
+/**
+* Read the currently selected user theme's theme JSON.
+* Returns null when not running inside VS Code, no theme is configured,
+* or the theme file cannot be found/read.
+*/
+async function getUserTheme() {
+	try {
+		const vscode = getVscode();
+		const workbenchConfig = vscode.workspace.getConfiguration("workbench");
+		const themeName = workbenchConfig.get("colorTheme");
+		if (!themeName) return THEME_NOT_FOUND_RESULT;
+		const decoder = new TextDecoder("utf-8");
+		for (const extension of vscode.extensions.all) {
+			const contributions = extension.packageJSON?.contributes?.themes ?? [];
+			const matchedTheme = contributions.find((contribution) => contribution.path && (contribution.id === themeName || contribution.label === themeName));
+			if (!matchedTheme) continue;
+			try {
+				const themeUri = vscode.Uri.joinPath(extension.extensionUri, matchedTheme.path);
+				const rawBytes = await vscode.workspace.fs.readFile(themeUri);
+				const jsonText = decoder.decode(rawBytes);
+				const json = parse(jsonText);
+				if (json.name) return [json.name, [json]];
+				return THEME_NOT_FOUND_RESULT;
+			} catch {
+				continue;
+			}
+		}
+		return THEME_NOT_FOUND_RESULT;
+	} catch {
+		return THEME_NOT_FOUND_RESULT;
+	}
+}
+const THEME_NOT_FOUND_RESULT = ["none", []];
+
+//#endregion
+//#region src/user-language-inference.ts
+/**
+* This function is vibe coded, I should revisit it in the future.
+* Infer required builtin Shiki language ids from a list of extension grammars.
+*
+* This inspects `embeddedLangs` provided by the collector and scans the grammar
+* `patterns`, `repository`, and `injections` for `include` targets like
+* `source.ts#...`, mapping known scopes to Shiki builtin language ids
+* (e.g., `source.ts` -> `typescript`).
+*
+* Returns a deduped array of builtin language ids in lowercase, excluding
+* any languages that are already present in the given `langs` by name or alias.
+*/
+function inferBuiltinLanguageIds(langs) {
+	const scopeToBuiltinLang = {
+		"source.ts": "typescript",
+		"source.tsx": "tsx",
+		"source.js": "javascript",
+		"source.jsx": "jsx",
+		"source.json": "json",
+		"text.html.basic": "html",
+		"source.css": "css",
+		"source.scss": "scss",
+		"source.sass": "sass",
+		"source.less": "less",
+		"source.graphql": "graphql",
+		"source.yaml": "yaml",
+		"source.toml": "toml",
+		"source.rust": "rust",
+		"source.python": "python",
+		"source.java": "java",
+		"source.go": "go",
+		"source.cpp": "cpp",
+		"source.c": "c",
+		"source.swift": "swift",
+		"source.kotlin": "kotlin",
+		"source.shell": "bash",
+		"source.bash": "bash",
+		"source.diff": "diff",
+		"text.xml": "xml",
+		"text.markdown": "markdown"
+	};
+	const presentLanguageNames = new Set();
+	for (const entry of langs) {
+		const candidates = [entry.name, ...entry.aliases ?? []].filter(Boolean).map((x) => x.toLowerCase());
+		for (const c of candidates) presentLanguageNames.add(c);
+	}
+	function extractIncludeTargets(grammar) {
+		const targets = new Set();
+		function visit(node) {
+			if (!node || typeof node !== "object") return;
+			const objectNode = node;
+			const include = objectNode.include;
+			if (typeof include === "string") targets.add(include);
+			const patterns = Array.isArray(objectNode.patterns) ? objectNode.patterns : [];
+			for (const p of patterns) visit(p);
+			const repository = objectNode.repository;
+			if (repository && typeof repository === "object") for (const key of Object.keys(repository)) visit(repository[key]);
+		}
+		visit(grammar);
+		const injections = grammar?.injections;
+		if (injections && typeof injections === "object") for (const key of Object.keys(injections)) visit(injections[key]);
+		return targets;
+	}
+	const inferred = new Set();
+	for (const entry of langs) {
+		for (const embedded of entry.embeddedLangs ?? []) if (typeof embedded === "string") inferred.add(embedded.toLowerCase());
+		const includeTargets = extractIncludeTargets(entry);
+		for (const inc of includeTargets) {
+			if (inc.startsWith("#")) continue;
+			const scope = inc.split("#", 1)[0];
+			const mapped = scopeToBuiltinLang[scope];
+			if (mapped) inferred.add(mapped.toLowerCase());
+		}
+	}
+	const result = [];
+	for (const langName of inferred) if (!presentLanguageNames.has(langName)) result.push(langName);
+	return result;
+}
+
+//#endregion
+//#region src/user-languages.ts
+/**
+* Collect TextMate grammars contributed by installed VS Code extensions.
+* @param langIds - If provided, only loads grammars for those specific language IDs.
+*/
+async function getUserLangs(langIds) {
+	try {
+		const vscode = getVscode();
+		const decoder = new TextDecoder("utf-8");
+		const extensionLangs = [];
+		const seenScope = new Set();
+		const normalizedLangIds = langIds?.map((id) => id.toLowerCase());
+		for (const extension of vscode.extensions.all) {
+			const contributes = extension.packageJSON?.contributes ?? {};
+			if (!contributes.grammars || contributes.grammars.length === 0) continue;
+			const languageIdToAliases = new Map();
+			for (const lang of contributes.languages ?? []) if (lang?.id) languageIdToAliases.set(lang.id, lang.aliases ?? []);
+			if (normalizedLangIds) {
+				const hasMatchingGrammar = contributes.grammars.some((grammar) => {
+					if (!grammar?.language) return false;
+					const names = [grammar.language, ...languageIdToAliases.get(grammar.language) ?? []].filter(Boolean).map((name) => name.toLowerCase());
+					return normalizedLangIds.some((desiredName) => names.includes(desiredName));
+				});
+				if (!hasMatchingGrammar) continue;
+			}
+			for (const grammar of contributes.grammars) {
+				if (!grammar?.path || !grammar.scopeName) continue;
+				if (!/\.json$/i.test(grammar.path)) continue;
+				if (!grammar.language) continue;
+				if (seenScope.has(grammar.scopeName)) continue;
+				if (normalizedLangIds) {
+					const names = [grammar.language, ...languageIdToAliases.get(grammar.language) ?? []].filter(Boolean).map((name) => name.toLowerCase());
+					const match = normalizedLangIds.find((desiredName) => names.includes(desiredName));
+					if (!match) continue;
+				}
+				try {
+					const uri = vscode.Uri.joinPath(extension.extensionUri, grammar.path);
+					const raw = await vscode.workspace.fs.readFile(uri);
+					const jsonText = decoder.decode(raw);
+					const grammarJson = parse(jsonText);
+					const embeddedLangs = grammar.embeddedLanguages ? Array.from(new Set(Object.values(grammar.embeddedLanguages).filter(Boolean))) : void 0;
+					seenScope.add(grammar.scopeName);
+					extensionLangs.push({
+						...grammarJson,
+						name: grammar.language,
+						embeddedLangs,
+						aliases: languageIdToAliases.get(grammar.language) ?? void 0
+					});
+				} catch {
+					continue;
+				}
+			}
+		}
+		if (normalizedLangIds) {
+			const builtinLangs = inferBuiltinLanguageIds(extensionLangs);
+			return [...extensionLangs, ...builtinLangs];
+		}
+		return extensionLangs;
+	} catch {
+		return [];
+	}
+}
+
+//#endregion
+export { getUserLangs, getUserTheme, inferBuiltinLanguageIds };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vscode-shiki-bridge",
+  "version": "0.0.1",
+  "description": "Embed Shiki code blocks in VS Code, inheriting the user's themes and languages",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/yoavbls/vscode-shiki-bridge#readme",
+  "workspaces": [
+    "example/vscode-shiki-bridge-example-extension"
+  ],
+  "bugs": {
+    "url": "https://github.com/yoavbls/vscode-shiki-bridge/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoavbls/vscode-shiki-bridge.git"
+  },
+  "author": "Yoav Balasiano <yoavbls@gmail.com>",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "ci": "npm run typecheck && npm run lint",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "release": "bumpp && npm publish",
+    "prepare": "tsdown"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.17",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
+    "bumpp": "^10.1.0",
+    "eslint": "^9.32.0",
+    "tsdown": "^0.11.9",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@types/vscode": "^1.102.0",
+    "shiki": "^3.9.2"
+  },
+  "dependencies": {
+    "jsonc-parser": "^3.3.1"
+  }
+}