@fuzdev/fuz_code 0.37.0

package/LICENSE

@@ -0,0 +1,25 @@
+The MIT License (MIT)
+
+Copyright (c) Ryan Atkinson <mail@ryanatkn.com> <https://ryanatkn.com/>
+
+prism-svelte - Copyright (c) 2020 pngwn (https://github.com/pngwn)
+
+Prism - Copyright (c) 2012 Lea Verou (https://lea.verou.me/)
+
+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,185 @@
+# @ryanatkn/fuz_code
+
+[<img src="static/logo.svg" alt="a friendly pink spider facing you" align="right" width="192" height="192">](https://code.fuz.dev/)
+
+> syntax styling utilities and components for TypeScript, Svelte, and Markdown 🎨
+
+**[code.fuz.dev](https://code.fuz.dev/)**
+
+fuz_code is a rework of [Prism](https://github.com/PrismJS/prism)
+([prismjs.com](https://prismjs.com/)).
+The main changes:
+
+- has a minimal and explicit API to generate stylized HTML, and knows nothing about the DOM
+- uses stateless ES modules, instead of globals with side effects and pseudo-module behaviors
+- has various incompatible changes, so using Prism grammars requires some tweaks
+- smaller (by 7kB minified and 3kB gzipped, ~1/3 less)
+- written in TypeScript
+- is a fork, see the [MIT license](https://github.com/ryanatkn/fuz_code/blob/main/LICENSE)
+
+Like Prism, there are zero dependencies (unless you count Prism's `@types/prismjs`),
+but there are two optional dependencies:
+
+- fuz_code provides optional builtin [Svelte](https://svelte.dev/) support
+  with a [Svelte grammar](src/lib/grammar_svelte.ts)
+  based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)
+  and a [Svelte component](src/lib/Code.svelte) for convenient usage.
+- The [default theme](src/lib/theme.css) integrates
+  with my CSS library [Moss](https://github.com/ryanatkn/moss) for colors that adapt to the user's runtime `color-scheme` preference.
+  Non-Moss users should import [theme_variables.css](src/lib/theme_variables.css)
+  or otherwise define those variables.
+
+Compared to [Shiki](https://github.com/shikijs/shiki),
+this library is much lighter
+(with its faster `shiki/engine/javascript`, 503kB minified to 16kB, 63kb gzipped to 5.6kB),
+and [vastly faster](./benchmark/compare/results.md)
+for runtime usage because it uses JS regexps instead of
+the [Onigurama regexp engine](https://shiki.matsu.io/guide/regex-engines)
+used by TextMate grammars.
+Shiki also has 38 dependencies instead of 0.
+However this is not a fair comparison because
+Prism grammars are much simpler and less powerful than TextMate's,
+and Shiki is designed mainly for buildtime usage.
+
+## Usage
+
+```bash
+npm i -D @ryanatkn/fuz_code
+```
+
+```svelte
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+</script>
+
+<!-- defaults to Svelte -->
+<Code content={svelte_code} />
+<!-- select a lang -->
+<Code content={ts_code} lang="ts" />
+```
+
+```ts
+import {syntax_styler_global} from '@ryanatkn/fuz_code/syntax_styler_global.js';
+
+// Generate HTML with syntax highlighting
+const html = syntax_styler_global.stylize(code, 'ts');
+
+// Get raw tokens for custom processing
+import {tokenize_syntax} from '@ryanatkn/fuz_code/tokenize_syntax.js';
+const tokens = tokenize_syntax(code, syntax_styler_global.get_lang('ts'));
+```
+
+Themes are just CSS files, so they work with any JS framework.
+
+With SvelteKit:
+
+```ts
+// +layout.svelte
+import '@ryanatkn/fuz_code/theme.css';
+```
+
+The primary themes (currently just [one](src/lib/theme.css)) have a dependency
+on my CSS library [Moss](https://github.com/ryanatkn/moss)
+for [color-scheme](https://moss.ryanatkn.com/docs/themes) awareness.
+See the [Moss docs](https://moss.ryanatkn.com/) for its usage.
+
+If you're not using Moss, import `theme_variables.css` alongside `theme.css`:
+
+```ts
+// Without Moss:
+import '@ryanatkn/fuz_code/theme.css';
+import '@ryanatkn/fuz_code/theme_variables.css';
+```
+
+### Modules
+
+- [@ryanatkn/fuz_code/syntax_styler_global.js](src/lib/syntax_styler_global.ts) - pre-configured instance with all grammars
+- [@ryanatkn/fuz_code/syntax_styler.js](src/lib/syntax_styler.ts) - base class for custom grammars
+- [@ryanatkn/fuz_code/theme.css](src/lib/theme.css) -
+  default theme that depends on [Moss](https://github.com/ryanatkn/moss)
+- [@ryanatkn/fuz_code/theme_variables.css](src/lib/theme_variables.css) -
+  CSS variables for non-Moss users
+- [@ryanatkn/fuz_code/Code.svelte](src/lib/Code.svelte) -
+  Svelte component for syntax highlighting with HTML generation
+
+I encourage you to poke around [`src/lib`](src/lib) if you're interested in using fuz_code.
+
+### Grammars
+
+Enabled by default in `syntax_styler_global`:
+
+- [`markup`](src/lib/grammar_markup.ts) (html, xml, etc)
+- [`svelte`](src/lib/grammar_svelte.ts)
+- [`markdown`](src/lib/grammar_markdown.ts)
+- [`ts`](src/lib/grammar_ts.ts)
+- [`css`](src/lib/grammar_css.ts)
+- [`js`](src/lib/grammar_js.ts)
+- [`json`](src/lib/grammar_json.ts)
+- [`clike`](src/lib/grammar_clike.ts)
+
+### More
+
+Docs are a work in progress:
+
+- this readme has basic usage instructions
+- [CLAUDE.md](./CLAUDE.md) has more high-level docs including benchmarks
+- [code.fuz.dev](https://code.fuz.dev/) has usage examples with the Svelte component
+- [samples](https://code.fuz.dev/samples) on the website
+  (also see the [sample files](src/lib/samples/))
+- [tests](src/lib/syntax_styler.test.ts)
+
+Please open issues if you need any help.
+
+## Experimental highlight support
+
+For browsers that support the
+[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API),
+fuz_code provides an experimental component that can use native browser highlighting
+as an alternative to HTML generation.
+
+This feature is experimental, browser support is limited,
+and there can be subtle differences because some CSS like bold/italics are not supported.
+(nor are font sizes and other layout-affecting styles, in case your theme uses those)
+The standard `Code.svelte` component
+using HTML generation is recommended for most use cases.
+
+```svelte
+<script lang="ts">
+	import CodeHighlight from '@ryanatkn/fuz_code/CodeHighlight.svelte';
+</script>
+
+<!-- auto-detect and use CSS Highlight API when available -->
+<CodeHighlight content={code} mode="auto" />
+<!-- force HTML mode -->
+<CodeHighlight content={code} mode="html" />
+<!-- force ranges mode (requires browser support) -->
+<CodeHighlight content={code} mode="ranges" />
+```
+
+When using the experimental highlight component, import the corresponding theme:
+
+```ts
+// instead of theme.css, import theme_highlight.css in +layout.svelte:
+import '@ryanatkn/fuz_code/theme_highlight.css';
+```
+
+Experimental modules:
+
+- [@ryanatkn/fuz_code/CodeHighlight.svelte](src/lib/CodeHighlight.svelte) -
+  component supporting both HTML generation and CSS Custom Highlight API
+- [@ryanatkn/fuz_code/highlight_manager.js](src/lib/highlight_manager.ts) -
+  manages browser [`Highlight`](https://developer.mozilla.org/en-US/docs/Web/API/Highlight)
+  and [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) APIs
+- [@ryanatkn/fuz_code/theme_highlight.css](src/lib/theme_highlight.css) -
+  theme with `::highlight()` pseudo-elements for CSS Custom Highlight API
+
+## License [🐦](https://wikipedia.org/wiki/Free_and_open-source_software)
+
+based on [Prism](https://github.com/PrismJS/prism)
+by [Lea Verou](https://lea.verou.me/)
+
+the [Svelte grammar](src/lib/grammar_svelte.ts)
+is based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)
+by [@pngwn](https://github.com/pngwn)
+
+[MIT](LICENSE)

package/dist/Code.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import {DEV} from 'esm-env';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {syntax_styler_global} from './syntax_styler_global.js';
+	import type {SyntaxStyler, SyntaxGrammar} from './syntax_styler.js';
+
+	const {
+		content,
+		lang = 'svelte',
+		grammar,
+		inline = false,
+		wrap = false,
+		syntax_styler = syntax_styler_global,
+		children,
+		...rest
+	}: SvelteHTMLElements['code'] & {
+		/** The source code to syntax highlight. */
+		content: string;
+		/**
+		 * Language identifier (e.g., 'ts', 'css', 'html', 'json', 'svelte', 'md').
+		 *
+		 * **Purpose:**
+		 * - When `grammar` is not provided, used to look up the grammar via `syntax_styler.get_lang(lang)`
+		 * - Used for metadata: sets the `data-lang` attribute and determines `language_supported`
+		 *
+		 * **Special values:**
+		 * - `null` - Explicitly disables syntax highlighting (content rendered as plain text)
+		 * - `undefined` - Falls back to default ('svelte')
+		 *
+		 * **Relationship with `grammar`:**
+		 * - If both `lang` and `grammar` are provided, `grammar` takes precedence for tokenization
+		 * - However, `lang` is still used for the `data-lang` attribute and language detection
+		 *
+		 * @default 'svelte'
+		 */
+		lang?: string | null;
+		/**
+		 * Optional custom grammar object for syntax tokenization.
+		 *
+		 * **When to use:**
+		 * - To provide a custom language definition not registered in `syntax_styler.langs`
+		 * - To use a modified/extended version of an existing grammar
+		 * - For one-off grammar variations without registering globally
+		 *
+		 * **Behavior:**
+		 * - When provided, this grammar is used for tokenization instead of looking up via `lang`
+		 * - Enables highlighting even if `lang` is not in the registry (useful for custom languages)
+		 * - The `lang` parameter is still used for metadata (data-lang attribute)
+		 * - When undefined, the grammar is automatically looked up via `syntax_styler.get_lang(lang)`
+		 *
+		 * @default undefined (uses grammar from `syntax_styler.langs[lang]`)
+		 */
+		grammar?: SyntaxGrammar | undefined;
+		/**
+		 * Whether to render as inline code or block code.
+		 * Controls display via CSS classes.
+		 *
+		 * @default false
+		 */
+		inline?: boolean;
+		/**
+		 * Whether to wrap long lines in block code.
+		 * Sets `white-space: pre-wrap` instead of `white-space: pre`.
+		 *
+		 * **Behavior:**
+		 * - Wraps at whitespace (spaces, newlines)
+		 * - Long tokens without spaces (URLs, hashes) will still scroll horizontally
+		 * - Default `false` provides traditional code block behavior
+		 *
+		 * Only affects block code (ignored for inline mode).
+		 *
+		 * @default false
+		 */
+		wrap?: boolean;
+		/**
+		 * Custom SyntaxStyler instance to use for highlighting.
+		 * Allows using a different styler with custom grammars or configuration.
+		 *
+		 * @default syntax_styler_global
+		 */
+		syntax_styler?: SyntaxStyler;
+		/**
+		 * Optional snippet to customize how the highlighted markup is rendered.
+		 * Receives the generated HTML string as a parameter.
+		 */
+		children?: Snippet<[markup: string]>;
+	} = $props();
+
+	const language_supported = $derived(lang !== null && !!syntax_styler.langs[lang]);
+
+	const highlighting_disabled = $derived(lang === null || (!language_supported && !grammar));
+
+	// DEV-only validation warnings
+	if (DEV) {
+		$effect(() => {
+			if (lang && !language_supported && !grammar) {
+				const langs = Object.keys(syntax_styler.langs).join(', ');
+				// eslint-disable-next-line no-console
+				console.error(
+					`[Code] Language "${lang}" is not supported and no custom grammar provided. ` +
+						`Highlighting disabled. Supported: ${langs}`,
+				);
+			}
+		});
+	}
+
+	// Generate HTML markup for syntax highlighting
+	const html_content = $derived.by(() => {
+		if (!content || highlighting_disabled) {
+			return '';
+		}
+
+		return syntax_styler.stylize(content, lang!, grammar); // ! is safe bc of the `highlighting_disabled` calculation
+	});
+
+	// TODO do syntax styling at compile-time in the normal case, and don't import these at runtime
+	// TODO @html making me nervous
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+
+<code {...rest} class:inline class:wrap data-lang={lang}
+	>{#if highlighting_disabled}{content}{:else if children}{@render children(
+			html_content,
+		)}{:else}{@html html_content}{/if}</code
+>
+
+<style>
+	/* inline code inherits Moss defaults: pre-wrap, inline-block, baseline alignment */
+
+	code:not(.inline) {
+		/* block code: traditional no-wrap, horizontal scroll */
+		white-space: pre;
+		padding: var(--space_xs3) var(--space_xs);
+		display: block;
+		overflow: auto;
+		max-width: 100%;
+	}
+
+	code.wrap:not(.inline) {
+		/* unset what we set above, otherwise rely on Moss base styles */
+		white-space: pre-wrap;
+	}
+</style>

package/dist/Code.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { SyntaxStyler, SyntaxGrammar } from './syntax_styler.js';
+type $$ComponentProps = SvelteHTMLElements['code'] & {
+    /** The source code to syntax highlight. */
+    content: string;
+    /**
+     * Language identifier (e.g., 'ts', 'css', 'html', 'json', 'svelte', 'md').
+     *
+     * **Purpose:**
+     * - When `grammar` is not provided, used to look up the grammar via `syntax_styler.get_lang(lang)`
+     * - Used for metadata: sets the `data-lang` attribute and determines `language_supported`
+     *
+     * **Special values:**
+     * - `null` - Explicitly disables syntax highlighting (content rendered as plain text)
+     * - `undefined` - Falls back to default ('svelte')
+     *
+     * **Relationship with `grammar`:**
+     * - If both `lang` and `grammar` are provided, `grammar` takes precedence for tokenization
+     * - However, `lang` is still used for the `data-lang` attribute and language detection
+     *
+     * @default 'svelte'
+     */
+    lang?: string | null;
+    /**
+     * Optional custom grammar object for syntax tokenization.
+     *
+     * **When to use:**
+     * - To provide a custom language definition not registered in `syntax_styler.langs`
+     * - To use a modified/extended version of an existing grammar
+     * - For one-off grammar variations without registering globally
+     *
+     * **Behavior:**
+     * - When provided, this grammar is used for tokenization instead of looking up via `lang`
+     * - Enables highlighting even if `lang` is not in the registry (useful for custom languages)
+     * - The `lang` parameter is still used for metadata (data-lang attribute)
+     * - When undefined, the grammar is automatically looked up via `syntax_styler.get_lang(lang)`
+     *
+     * @default undefined (uses grammar from `syntax_styler.langs[lang]`)
+     */
+    grammar?: SyntaxGrammar | undefined;
+    /**
+     * Whether to render as inline code or block code.
+     * Controls display via CSS classes.
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Whether to wrap long lines in block code.
+     * Sets `white-space: pre-wrap` instead of `white-space: pre`.
+     *
+     * **Behavior:**
+     * - Wraps at whitespace (spaces, newlines)
+     * - Long tokens without spaces (URLs, hashes) will still scroll horizontally
+     * - Default `false` provides traditional code block behavior
+     *
+     * Only affects block code (ignored for inline mode).
+     *
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Custom SyntaxStyler instance to use for highlighting.
+     * Allows using a different styler with custom grammars or configuration.
+     *
+     * @default syntax_styler_global
+     */
+    syntax_styler?: SyntaxStyler;
+    /**
+     * Optional snippet to customize how the highlighted markup is rendered.
+     * Receives the generated HTML string as a parameter.
+     */
+    children?: Snippet<[markup: string]>;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;
+//# sourceMappingURL=Code.svelte.d.ts.map

package/dist/Code.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Code.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAEnE,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACrC,CAAC;AA6DH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/CodeHighlight.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	/**
+	 * Uses the CSS Custom Highlight API when available --
+	 * https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
+	 *
+	 * Requires importing theme_highlight.css instead of theme.css.
+	 */
+
+	import {onDestroy, type Snippet} from 'svelte';
+	import {DEV} from 'esm-env';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {syntax_styler_global} from './syntax_styler_global.js';
+	import type {SyntaxStyler, SyntaxGrammar} from './syntax_styler.js';
+	import {tokenize_syntax} from './tokenize_syntax.js';
+	import {
+		HighlightManager,
+		supports_css_highlight_api,
+		type HighlightMode,
+	} from './highlight_manager.js';
+
+	const {
+		content,
+		lang = 'svelte',
+		mode = 'auto',
+		grammar,
+		inline = false,
+		wrap = false,
+		syntax_styler = syntax_styler_global,
+		children,
+		...rest
+	}: SvelteHTMLElements['code'] & {
+		/** The source code to syntax highlight. */
+		content: string;
+		/**
+		 * Language identifier (e.g., 'ts', 'css', 'html', 'json', 'svelte', 'md').
+		 *
+		 * **Purpose:**
+		 * - When `grammar` is not provided, used to look up the grammar via `syntax_styler.get_lang(lang)`
+		 * - Used for metadata: sets the `data-lang` attribute and determines `language_supported`
+		 *
+		 * **Special values:**
+		 * - `null` - Explicitly disables syntax highlighting (content rendered as plain text)
+		 * - `undefined` - Falls back to default ('svelte')
+		 *
+		 * **Relationship with `grammar`:**
+		 * - If both `lang` and `grammar` are provided, `grammar` takes precedence for tokenization
+		 * - However, `lang` is still used for the `data-lang` attribute and language detection
+		 *
+		 * @default 'svelte'
+		 */
+		lang?: string | null;
+		/**
+		 * Highlighting mode for this component.
+		 *
+		 * **Options:**
+		 * - `'auto'` - Uses CSS Custom Highlight API if supported, falls back to HTML mode
+		 * - `'ranges'` - Forces CSS Custom Highlight API (requires browser support)
+		 * - `'html'` - Forces HTML generation with CSS classes
+		 *
+		 * **Note:** CSS Custom Highlight API has limitations and limited browser support.
+		 * Requires importing `theme_highlight.css` instead of `theme.css`.
+		 *
+		 * @default 'auto'
+		 */
+		mode?: HighlightMode;
+		/**
+		 * Optional custom grammar object for syntax tokenization.
+		 *
+		 * **When to use:**
+		 * - To provide a custom language definition not registered in `syntax_styler.langs`
+		 * - To use a modified/extended version of an existing grammar
+		 * - For one-off grammar variations without registering globally
+		 *
+		 * **Behavior:**
+		 * - When provided, this grammar is used for tokenization instead of looking up via `lang`
+		 * - Enables highlighting even if `lang` is not in the registry (useful for custom languages)
+		 * - The `lang` parameter is still used for metadata (data-lang attribute)
+		 * - When undefined, the grammar is automatically looked up via `syntax_styler.get_lang(lang)`
+		 *
+		 * @default undefined (uses grammar from `syntax_styler.langs[lang]`)
+		 */
+		grammar?: SyntaxGrammar | undefined;
+		/**
+		 * Whether to render as inline code or block code.
+		 * Controls display via CSS classes.
+		 *
+		 * @default false
+		 */
+		inline?: boolean;
+		/**
+		 * Whether to wrap long lines in block code.
+		 * Sets `white-space: pre-wrap` instead of `white-space: pre`.
+		 *
+		 * **Behavior:**
+		 * - Wraps at whitespace (spaces, newlines)
+		 * - Long tokens without spaces (URLs, hashes) will still scroll horizontally
+		 * - Default `false` provides traditional code block behavior
+		 *
+		 * Only affects block code (ignored for inline mode).
+		 *
+		 * @default false
+		 */
+		wrap?: boolean;
+		/**
+		 * Custom SyntaxStyler instance to use for highlighting.
+		 * Allows using a different styler with custom grammars or configuration.
+		 *
+		 * @default syntax_styler_global
+		 */
+		syntax_styler?: SyntaxStyler;
+		/**
+		 * Optional snippet to customize how the highlighted markup is rendered.
+		 * - In HTML mode: receives the generated HTML string
+		 * - In range mode: receives the plain text content
+		 */
+		children?: Snippet<[markup: string]>;
+	} = $props();
+
+	let code_element: HTMLElement | undefined = $state();
+
+	const supports_ranges = supports_css_highlight_api();
+
+	const highlight_manager = supports_ranges ? new HighlightManager() : null;
+
+	const use_ranges = $derived(supports_ranges && (mode === 'ranges' || mode === 'auto'));
+
+	const language_supported = $derived(lang !== null && !!syntax_styler.langs[lang]);
+
+	const highlighting_disabled = $derived(lang === null || (!language_supported && !grammar));
+
+	// DEV-only validation warnings
+	if (DEV) {
+		$effect(() => {
+			if (lang && !language_supported && !grammar) {
+				const langs = Object.keys(syntax_styler.langs).join(', ');
+				// eslint-disable-next-line no-console
+				console.error(
+					`[CodeHighlight] Language "${lang}" is not supported and no custom grammar provided. ` +
+						`Highlighting disabled. Supported: ${langs}`,
+				);
+			}
+		});
+	}
+
+	// Generate HTML markup for syntax highlighting in non-range mode
+	const html_content = $derived.by(() => {
+		if (use_ranges || !content || highlighting_disabled) {
+			return '';
+		}
+
+		return syntax_styler.stylize(content, lang!, grammar); // ! is safe bc of the `highlighting_disabled` calculation
+	});
+
+	// Apply highlights for range mode
+	if (highlight_manager) {
+		$effect(() => {
+			if (!code_element || !content || !use_ranges || highlighting_disabled) {
+				highlight_manager.clear_element_ranges();
+				return;
+			}
+
+			// Get tokens from syntax styler
+			const tokens = tokenize_syntax(content, grammar || syntax_styler.get_lang(lang!)); // ! is safe bc of the `highlighting_disabled` calculation
+
+			// Apply highlights
+			highlight_manager.highlight_from_syntax_tokens(code_element, tokens);
+		});
+	}
+
+	onDestroy(() => {
+		highlight_manager?.destroy();
+	});
+
+	// TODO do syntax styling at compile-time in the normal case, and don't import these at runtime
+	// TODO @html making me nervous
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+
+<code {...rest} class:inline class:wrap data-lang={lang} bind:this={code_element}
+	>{#if use_ranges && children}{@render children(
+			content,
+		)}{:else if use_ranges || highlighting_disabled}{content}{:else if children}{@render children(
+			html_content,
+		)}{:else}{@html html_content}{/if}</code
+>
+
+<style>
+	/* inline code inherits Moss defaults: pre-wrap, inline-block, baseline alignment */
+
+	code:not(.inline) {
+		/* block code: traditional no-wrap, horizontal scroll */
+		white-space: pre;
+		padding: var(--space_xs3) var(--space_xs);
+		display: block;
+		overflow: auto;
+		max-width: 100%;
+	}
+
+	code.wrap:not(.inline) {
+		/* unset what we set above, otherwise rely on Moss base styles */
+		white-space: pre-wrap;
+	}
+</style>