@ai-gui/plugin-highlight 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Liang Li
+
+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,26 @@
+# @ai-gui/plugin-highlight
+
+Syntax-highlighting plugin for [AIGUI](../../README.md), powered by [Shiki](https://shiki.style). Overrides fenced code blocks with highlighted output. Async.
+
+## Install
+
+```sh
+pnpm add @ai-gui/plugin-highlight
+```
+
+## Usage
+
+```tsx
+import { highlight } from "@ai-gui/plugin-highlight"
+import { AIRenderer } from "@ai-gui/react"
+
+<AIRenderer plugins={[highlight({ themes: ["github-dark"], langs: ["ts", "python"] })]} />
+```
+
+## Options
+
+- `themes?: string[]` — themes to load; the first is the default when `theme` is omitted.
+- `langs?: string[]` — grammars to load; a code block whose language is not listed falls back to plain text.
+- `theme?: string` — theme used for rendering; defaults to the first entry of `themes`.
+
+See the [root README](../../README.md) for the full plugin list.

package/dist/index.cjs

@@ -0,0 +1,86 @@
+"use strict";
+//#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 shiki = __toESM(require("shiki"));
+
+//#region src/index.ts
+/** Escape a raw string for safe embedding inside `<pre><code>`. */
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* Code-highlighting plugin backed by Shiki. Overrides the built-in `code` node
+* renderer with an async renderer that lazily creates a single, memoized
+* `Highlighter` (Shiki's `createHighlighter` promise is created at most once) and
+* emits `highlighter.codeToHtml(...)` markup.
+*
+* A node whose `attrs.lang` is not among the loaded `langs` renders as plain
+* `"text"` so Shiki never throws for an unloaded grammar. Any other failure is
+* caught and rendered as an escaped `<pre><code>` block — the renderer never throws.
+*/
+function highlight(opts = {}) {
+	const themes = opts.themes ?? ["github-light"];
+	const langs = opts.langs ?? [
+		"ts",
+		"js",
+		"json",
+		"bash",
+		"python",
+		"html",
+		"css"
+	];
+	const theme = opts.theme ?? themes[0];
+	let highlighterPromise = null;
+	const getHighlighter = () => highlighterPromise ??= (0, shiki.createHighlighter)({
+		themes,
+		langs
+	});
+	const render = async (node) => {
+		const code = node.content ?? "";
+		const requested = node.attrs?.lang;
+		const lang = requested && langs.includes(requested) ? requested : "text";
+		try {
+			const highlighter = await getHighlighter();
+			return {
+				kind: "html",
+				html: highlighter.codeToHtml(code, {
+					lang,
+					theme
+				})
+			};
+		} catch {
+			return {
+				kind: "html",
+				html: `<pre><code>${escapeHtml(code)}</code></pre>`
+			};
+		}
+	};
+	return {
+		name: "highlight",
+		nodeRenderers: { code: render }
+	};
+}
+
+//#endregion
+exports.highlight = highlight

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { AIGuiPlugin } from "@ai-gui/core";
+
+//#region src/index.d.ts
+/** Options for the Shiki-backed code highlighter plugin. */
+/** Options for the Shiki-backed code highlighter plugin. */
+interface HighlightOptions {
+  /** Themes to load. First entry is the default when `theme` is omitted. */
+  themes?: string[];
+  /** Grammars to load. A node whose `attrs.lang` is not listed falls back to plain text. */
+  langs?: string[];
+  /** Theme used for rendering. Defaults to the first entry of `themes`. */
+  theme?: string;
+}
+/**
+ * Code-highlighting plugin backed by Shiki. Overrides the built-in `code` node
+ * renderer with an async renderer that lazily creates a single, memoized
+ * `Highlighter` (Shiki's `createHighlighter` promise is created at most once) and
+ * emits `highlighter.codeToHtml(...)` markup.
+ *
+ * A node whose `attrs.lang` is not among the loaded `langs` renders as plain
+ * `"text"` so Shiki never throws for an unloaded grammar. Any other failure is
+ * caught and rendered as an escaped `<pre><code>` block — the renderer never throws.
+ */
+declare function highlight(opts?: HighlightOptions): AIGuiPlugin;
+//#endregion
+export { HighlightOptions, highlight };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { AIGuiPlugin } from "@ai-gui/core";
+
+//#region src/index.d.ts
+/** Options for the Shiki-backed code highlighter plugin. */
+/** Options for the Shiki-backed code highlighter plugin. */
+interface HighlightOptions {
+  /** Themes to load. First entry is the default when `theme` is omitted. */
+  themes?: string[];
+  /** Grammars to load. A node whose `attrs.lang` is not listed falls back to plain text. */
+  langs?: string[];
+  /** Theme used for rendering. Defaults to the first entry of `themes`. */
+  theme?: string;
+}
+/**
+ * Code-highlighting plugin backed by Shiki. Overrides the built-in `code` node
+ * renderer with an async renderer that lazily creates a single, memoized
+ * `Highlighter` (Shiki's `createHighlighter` promise is created at most once) and
+ * emits `highlighter.codeToHtml(...)` markup.
+ *
+ * A node whose `attrs.lang` is not among the loaded `langs` renders as plain
+ * `"text"` so Shiki never throws for an unloaded grammar. Any other failure is
+ * caught and rendered as an escaped `<pre><code>` block — the renderer never throws.
+ */
+declare function highlight(opts?: HighlightOptions): AIGuiPlugin;
+//#endregion
+export { HighlightOptions, highlight };

package/dist/index.js

@@ -0,0 +1,62 @@
+import { createHighlighter } from "shiki";
+
+//#region src/index.ts
+/** Escape a raw string for safe embedding inside `<pre><code>`. */
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* Code-highlighting plugin backed by Shiki. Overrides the built-in `code` node
+* renderer with an async renderer that lazily creates a single, memoized
+* `Highlighter` (Shiki's `createHighlighter` promise is created at most once) and
+* emits `highlighter.codeToHtml(...)` markup.
+*
+* A node whose `attrs.lang` is not among the loaded `langs` renders as plain
+* `"text"` so Shiki never throws for an unloaded grammar. Any other failure is
+* caught and rendered as an escaped `<pre><code>` block — the renderer never throws.
+*/
+function highlight(opts = {}) {
+	const themes = opts.themes ?? ["github-light"];
+	const langs = opts.langs ?? [
+		"ts",
+		"js",
+		"json",
+		"bash",
+		"python",
+		"html",
+		"css"
+	];
+	const theme = opts.theme ?? themes[0];
+	let highlighterPromise = null;
+	const getHighlighter = () => highlighterPromise ??= createHighlighter({
+		themes,
+		langs
+	});
+	const render = async (node) => {
+		const code = node.content ?? "";
+		const requested = node.attrs?.lang;
+		const lang = requested && langs.includes(requested) ? requested : "text";
+		try {
+			const highlighter = await getHighlighter();
+			return {
+				kind: "html",
+				html: highlighter.codeToHtml(code, {
+					lang,
+					theme
+				})
+			};
+		} catch {
+			return {
+				kind: "html",
+				html: `<pre><code>${escapeHtml(code)}</code></pre>`
+			};
+		}
+	};
+	return {
+		name: "highlight",
+		nodeRenderers: { code: render }
+	};
+}
+
+//#endregion
+export { highlight };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ai-gui/plugin-highlight",
+  "version": "0.1.0",
+  "description": "Shiki code-highlighting plugin for AIGUI.",
+  "keywords": [
+    "llm",
+    "ai",
+    "streaming",
+    "markdown",
+    "shiki",
+    "syntax-highlighting",
+    "code",
+    "plugin",
+    "aigui"
+  ],
+  "license": "MIT",
+  "author": "Liang Li <ll_faw@hotmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liliang-cn/aigui.git",
+    "directory": "packages/plugin-highlight"
+  },
+  "homepage": "https://github.com/liliang-cn/aigui#readme",
+  "bugs": "https://github.com/liliang-cn/aigui/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "shiki": "^1.22.0",
+    "@ai-gui/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}