@ox-content/vite-plugin 2.86.0 → 2.87.0

package/dist/index.cjs

@@ -108,6 +108,56 @@ function createMarkdownEnvironment(options) {
 	};
 }
 //#endregion
+//#region src/shiki-theme.ts
+/**
+* Name callers pass as `highlightTheme` to render syntax colors as CSS custom
+* properties instead of baked-in hex values.
+*/
+const CSS_VARIABLES_THEME = "css-variables";
+/** Prefix for the emitted properties, matching the rest of the design tokens. */
+const VARIABLE_PREFIX = "--octc-shiki-";
+/**
+* Fallbacks baked into each `var()` so a site with no color scheme installed
+* still renders GitHub Dark colors — the previous default — rather than
+* unstyled text. A `@ox-content/theme-color-*` package overrides them by
+* defining the same properties per mode.
+*/
+const VARIABLE_DEFAULTS = {
+	foreground: "#e6edf3",
+	background: "#0d1117",
+	"token-constant": "#79c0ff",
+	"token-string": "#a5d6ff",
+	"token-comment": "#8b949e",
+	"token-keyword": "#ff7b72",
+	"token-parameter": "#ffa657",
+	"token-function": "#d2a8ff",
+	"token-string-expression": "#a5d6ff",
+	"token-punctuation": "#c9d1d9",
+	"token-link": "#a5d6ff"
+};
+let cached;
+/**
+* Shiki theme whose every color is a `--octc-shiki-*` custom property.
+*
+* This is what lets syntax highlighting track the active color scheme in both
+* light and dark from a single build: the HTML is generated once, and the
+* properties resolve per mode. A fixed theme like `github-dark` cannot do that,
+* and lands dark token colors on a light code block.
+*/
+function cssVariablesTheme() {
+	cached ??= (0, shiki.createCssVariablesTheme)({
+		name: CSS_VARIABLES_THEME,
+		variablePrefix: VARIABLE_PREFIX,
+		variableDefaults: VARIABLE_DEFAULTS,
+		fontStyle: true
+	});
+	return cached;
+}
+/** Resolves the `css-variables` alias; any other value passes through. */
+function resolveHighlightTheme(theme) {
+	return theme === "css-variables" ? cssVariablesTheme() : theme;
+}
+//#endregion
 //#region src/highlight.ts
 /**
 * Syntax highlighting with Shiki via rehype.
@@ -160,7 +210,8 @@ async function getHighlighter(theme, customLangs = []) {
 	}
 	return highlighterPromise;
 }
-function normalizeThemeInput(theme) {
+function normalizeThemeInput(input) {
+	const theme = resolveHighlightTheme(input);
 	if (typeof theme === "string") return {
 		themeInput: theme,
 		themeName: theme
@@ -269,7 +320,7 @@ function normalizeClassName(className) {
 /**
 * Apply syntax highlighting to HTML using Shiki.
 */
-async function highlightCode(html, theme = "github-dark", langs = []) {
+async function highlightCode(html, theme = CSS_VARIABLES_THEME, langs = []) {
 	const result = await (0, unified.unified)().use(rehypeParse$3, { fragment: true }).use(rehypeShikiHighlight, {
 		theme,
 		langs
@@ -4877,7 +4928,7 @@ function createFrameworkMarkdownOptions(options) {
 		strikethrough: true,
 		autolinks: options.gfm,
 		highlight: false,
-		highlightTheme: "github-dark",
+		highlightTheme: CSS_VARIABLES_THEME,
 		highlightLangs: [],
 		mermaid: false,
 		ogImage: false,
@@ -6512,7 +6563,7 @@ function resolveOptions(options) {
 		strikethrough: options.strikethrough ?? true,
 		autolinks: options.autolinks ?? options.gfm ?? true,
 		highlight: options.highlight ?? false,
-		highlightTheme: options.highlightTheme ?? "github-dark",
+		highlightTheme: options.highlightTheme ?? "css-variables",
 		highlightLangs: options.highlightLangs ?? [],
 		codeAnnotations: resolveCodeAnnotationsOptions(options.codeAnnotations),
 		wikiLinks: resolveWikiLinkOptions(options.wikiLinks, options.base ?? "/"),