colorfulcode 0.0.1 → 0.1.0

package/dist/css/solarized-dark.css

@@ -0,0 +1,25 @@
+.cc{background:#002b36;color:#839496}
+.cc .cc-comment{color:#586e75;font-style:italic}
+.cc .cc-keyword{color:#859900}
+.cc .cc-string{color:#2aa198}
+.cc .cc-escape{color:#dc322f}
+.cc .cc-number{color:#d33682}
+.cc .cc-constant{color:#cb4b16}
+.cc .cc-function{color:#268bd2}
+.cc .cc-type{color:#b58900}
+.cc .cc-variable{color:#268bd2}
+.cc .cc-property{color:#268bd2}
+.cc .cc-builtin{color:#6c71c4}
+.cc .cc-operator{color:#859900}
+.cc .cc-punctuation{color:#839496}
+.cc .cc-tag{color:#268bd2}
+.cc .cc-attribute{color:#93a1a1}
+.cc .cc-meta{color:#cb4b16}
+.cc .cc-regex{color:#dc322f}
+.cc .cc-heading{color:#cb4b16;font-weight:bold}
+.cc .cc-emphasis{color:#839496;font-style:italic}
+.cc .cc-strong{color:#839496;font-weight:bold}
+.cc .cc-link{color:#6c71c4;text-decoration:underline}
+.cc .cc-inserted{color:#859900}
+.cc .cc-deleted{color:#dc322f}
+.cc .cc-parameter{color:#268bd2}

package/dist/css/solarized-light.css

@@ -0,0 +1,25 @@
+.cc{background:#fdf6e3;color:#657b83}
+.cc .cc-comment{color:#93a1a1;font-style:italic}
+.cc .cc-keyword{color:#859900}
+.cc .cc-string{color:#2aa198}
+.cc .cc-escape{color:#dc322f}
+.cc .cc-number{color:#d33682}
+.cc .cc-constant{color:#cb4b16}
+.cc .cc-function{color:#268bd2}
+.cc .cc-type{color:#b58900}
+.cc .cc-variable{color:#268bd2}
+.cc .cc-property{color:#268bd2}
+.cc .cc-builtin{color:#6c71c4}
+.cc .cc-operator{color:#859900}
+.cc .cc-punctuation{color:#657b83}
+.cc .cc-tag{color:#268bd2}
+.cc .cc-attribute{color:#93a1a1}
+.cc .cc-meta{color:#cb4b16}
+.cc .cc-regex{color:#dc322f}
+.cc .cc-heading{color:#cb4b16;font-weight:bold}
+.cc .cc-emphasis{color:#657b83;font-style:italic}
+.cc .cc-strong{color:#657b83;font-weight:bold}
+.cc .cc-link{color:#6c71c4;text-decoration:underline}
+.cc .cc-inserted{color:#859900}
+.cc .cc-deleted{color:#dc322f}
+.cc .cc-parameter{color:#268bd2}

package/dist/css/tokyo-night.css

@@ -0,0 +1,25 @@
+.cc{background:#1a1b26;color:#c0caf5}
+.cc .cc-comment{color:#565f89;font-style:italic}
+.cc .cc-keyword{color:#bb9af7}
+.cc .cc-string{color:#9ece6a}
+.cc .cc-escape{color:#89ddff}
+.cc .cc-number{color:#ff9e64}
+.cc .cc-constant{color:#ff9e64}
+.cc .cc-function{color:#7aa2f7}
+.cc .cc-type{color:#2ac3de}
+.cc .cc-variable{color:#e0af68}
+.cc .cc-property{color:#73daca}
+.cc .cc-builtin{color:#7dcfff}
+.cc .cc-operator{color:#89ddff}
+.cc .cc-punctuation{color:#9abdf5}
+.cc .cc-tag{color:#f7768e}
+.cc .cc-attribute{color:#bb9af7}
+.cc .cc-meta{color:#e0af68}
+.cc .cc-regex{color:#b4f9f8}
+.cc .cc-heading{color:#89ddff;font-weight:bold}
+.cc .cc-emphasis{color:#c0caf5;font-style:italic}
+.cc .cc-strong{color:#c0caf5;font-weight:bold}
+.cc .cc-link{color:#7aa2f7;text-decoration:underline}
+.cc .cc-inserted{color:#9ece6a}
+.cc .cc-deleted{color:#f7768e}
+.cc .cc-parameter{color:#e0af68;font-style:italic}

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+/** The category of a highlighted token. */
+export type Kind =
+  | "text" | "comment" | "keyword" | "string" | "escape" | "number" | "constant" | "function" | "type"
+  | "variable" | "property" | "builtin" | "operator" | "punctuation" | "tag" | "attribute" | "meta"
+  | "regex" | "heading" | "emphasis" | "strong" | "link" | "inserted" | "deleted"
+  | "parameter";
+
+export type ThemeName =
+  | "colorful" | "colorful-light" | "github-dark" | "github-light" | "dracula" | "nord" | "one-dark"
+  | "monokai" | "catppuccin-mocha" | "catppuccin-latte" | "tokyo-night" | "gruvbox-dark"
+  | "solarized-dark" | "solarized-light";
+
+export interface Token {
+  /** Start offset in the string (UTF-16 code units, like `String.prototype.slice`). */
+  start: number;
+  end: number;
+  kind: Kind;
+  text: string;
+}
+
+export interface LineToken {
+  text: string;
+  kind: Kind;
+}
+
+export interface LanguageInfo {
+  id: string;
+  name: string;
+  aliases: string[];
+  extensions: string[];
+  filenames: string[];
+}
+
+export interface Style {
+  color: string;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+}
+
+export interface ThemeInfo {
+  name: string;
+  dark: boolean;
+  background: string;
+  foreground: string;
+  styles: Record<Kind, Style>;
+}
+
+/** A custom theme. Kinds you leave out inherit a sensible style. */
+export interface ThemeDefinition {
+  name: string;
+  background: string;
+  foreground: string;
+  /** Defaults to a guess from the background brightness. */
+  dark?: boolean;
+  /** `"#rrggbb"` or a full style per kind. */
+  styles?: Partial<Record<Kind, string | { color: string; bold?: boolean; italic?: boolean; underline?: boolean }>>;
+}
+
+export interface HighlightOptions {
+  /**
+   * Theme for inline styles: a built in name, a name registered with
+   * `defineTheme`, or a theme object. `false` gives class names. Defaults to "colorful".
+   */
+  theme?: ThemeName | (string & {}) | ThemeDefinition | false;
+  /** Wrap the output in `<pre class="cc"><code>`. Defaults to true. */
+  pre?: boolean;
+  /** Wrap every line in `<span class="cc-line">`. */
+  lines?: boolean;
+  /** Prefix every line with its number. */
+  lineNumbers?: boolean;
+  /** One based line numbers to highlight. */
+  highlightLines?: number[];
+}
+
+/**
+ * A language id, alias, name or extension, or `"auto"` to guess the language
+ * from the code (plain text when unsure). Unknown names mean plain text.
+ */
+export type LanguageName = "auto" | (string & {});
+
+/** Highlights code and returns HTML. Unknown languages render as plain text. */
+export function highlight(code: string, language: LanguageName, options?: HighlightOptions): string;
+/** Tokens covering the whole input. */
+export function tokenize(code: string, language: LanguageName): Token[];
+/** Tokens split into lines, without line breaks. */
+export function tokenizeLines(code: string, language: LanguageName): LineToken[][];
+export function listLanguages(): LanguageInfo[];
+export function listThemes(): ThemeInfo[];
+export function getLanguage(name: string): LanguageInfo | undefined;
+export function getTheme(name: string | ThemeDefinition): ThemeInfo | undefined;
+/** Registers a custom theme and returns its name. */
+export function defineTheme(theme: ThemeDefinition): string;
+/**
+ * Guesses a language id from a file path, then from a shebang or doctype in
+ * the code. Undefined when unsure.
+ */
+export function detectLanguage(input: {
+  path?: string;
+  code?: string;
+  /** Also guess from the code itself, scoring it against every language. */
+  guess?: boolean;
+}): string | undefined;
+/** CSS for the class based output, scoped to `selector` (default ".cc"). */
+export function themeCss(theme?: ThemeName | (string & {}) | ThemeDefinition, selector?: string): string;
+/** Highlights every `code.language-xyz` element inside `root`. */
+export function highlightAll(options?: HighlightOptions, root?: ParentNode): void;
+export function highlightElement(element: Element, options?: HighlightOptions & { language?: LanguageName }): void;

package/dist/index.js

@@ -0,0 +1,262 @@
+import wasmBase64 from "./wasm.js";
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+let wasm;
+let metadata;
+const languageCache = new Map();
+
+function decodeBase64(text) {
+  if (typeof Buffer === "function") return Buffer.from(text, "base64");
+  const binary = atob(text);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+/** Instantiates the module on first use. Synchronous, so it works during SSR too. */
+function instance() {
+  if (!wasm) {
+    const module = new WebAssembly.Module(decodeBase64(wasmBase64));
+    wasm = new WebAssembly.Instance(module, {}).exports;
+  }
+  return wasm;
+}
+
+/** Writes a string into the input buffer and returns its length in bytes. */
+function writeInput(text) {
+  const w = instance();
+  const capacity = text.length * 3;
+  const ptr = w.cc_input(capacity);
+  return encoder.encodeInto(text, new Uint8Array(w.memory.buffer, ptr, capacity)).written;
+}
+
+// Node's Buffer decodes UTF-8 several times faster than its TextDecoder.
+const NodeBuffer = typeof Buffer === "function" && typeof Buffer.from === "function" ? Buffer : undefined;
+
+function readOutput(length) {
+  const w = instance();
+  const ptr = w.cc_output_ptr();
+  if (NodeBuffer) return NodeBuffer.from(w.memory.buffer, ptr, length).toString("utf8");
+  return decoder.decode(new Uint8Array(w.memory.buffer, ptr, length));
+}
+
+function meta() {
+  if (!metadata) {
+    metadata = JSON.parse(readOutput(instance().cc_metadata()));
+    metadata.themeIndex = new Map(metadata.themes.map((t, i) => [t.name, i]));
+  }
+  return metadata;
+}
+
+/** Detection only reads the first few KB, so there is no point copying more. */
+const DETECT_CHARS = 4096;
+
+/** Guesses a language index from the code alone, or -1. */
+function guessLanguage(code) {
+  return instance().cc_language_detect(writeInput(code.slice(0, DETECT_CHARS)));
+}
+
+/** The index of a language name, or of the guess for `code` when the name is "auto". */
+function languageFor(name, code) {
+  return name === "auto" ? guessLanguage(code) : resolveLanguage(name);
+}
+
+function resolveLanguage(name) {
+  if (typeof name !== "string" || name === "") return -1;
+  let index = languageCache.get(name);
+  if (index === undefined) {
+    index = instance().cc_language_find(writeInput(name));
+    languageCache.set(name, index);
+  }
+  return index;
+}
+
+const definedThemes = new WeakMap();
+
+/** The name of a theme given by name or as an object (registered on first use). */
+function themeName(theme) {
+  if (typeof theme !== "object") return theme;
+  let name = definedThemes.get(theme);
+  if (name === undefined) {
+    name = defineTheme(theme);
+    definedThemes.set(theme, name);
+  }
+  return name;
+}
+
+function resolveTheme(theme) {
+  if (theme === false || theme === null) return -1;
+  theme = themeName(theme);
+  const index = meta().themeIndex.get(theme ?? "colorful");
+  if (index === undefined) throw new Error(`colorfulcode: unknown theme "${theme}"`);
+  return index;
+}
+
+const WRAP = 1;
+const LINES = 2;
+const LINE_NUMBERS = 4;
+
+/**
+ * Highlights code and returns HTML.
+ *
+ * With a theme (the default is "colorful") the HTML uses inline styles and
+ * needs no CSS. Pass `theme: false` to get class names instead and style them
+ * with `themeCss()` or `colorfulcode/css/<name>.css`.
+ *
+ * Pass `"auto"` as the language to guess it from the code first.
+ */
+export function highlight(code, language, options = {}) {
+  const w = instance();
+  const { theme, pre = true, lines = false, lineNumbers = false, highlightLines } = options;
+  const themeIndex = resolveTheme(theme);
+  const languageIndex = languageFor(language, code);
+  let lineCount = 0;
+  if (highlightLines && highlightLines.length) {
+    lineCount = highlightLines.length;
+    new Uint32Array(w.memory.buffer, w.cc_lines(lineCount), lineCount).set(highlightLines);
+  }
+  const flags = (pre ? WRAP : 0) | (lines ? LINES : 0) | (lineNumbers ? LINE_NUMBERS : 0);
+  const length = writeInput(code);
+  return readOutput(w.cc_highlight(length, languageIndex, themeIndex, flags, lineCount));
+}
+
+/**
+ * Tokenizes code. Every token has `start` and `end` offsets into the string
+ * (UTF-16, like `String.prototype.slice`), its `kind` and its `text`. The
+ * tokens cover the whole input. The language can be `"auto"`, as in `highlight()`.
+ */
+export function tokenize(code, language) {
+  const w = instance();
+  // Resolve names first: lookups reuse the input and output buffers.
+  const kinds = meta().kinds;
+  const languageIndex = languageFor(language, code);
+  const count = w.cc_tokenize(writeInput(code), languageIndex);
+  const raw = new Uint32Array(w.memory.buffer, w.cc_output_ptr(), count * 3);
+  const tokens = new Array(count);
+  for (let i = 0, j = 0; i < count; i++, j += 3) {
+    const start = raw[j];
+    const end = raw[j + 1];
+    tokens[i] = { start, end, kind: kinds[raw[j + 2]], text: code.slice(start, end) };
+  }
+  return tokens;
+}
+
+/** Like `tokenize`, but split into lines of `{ text, kind }` without line breaks. */
+export function tokenizeLines(code, language) {
+  const lines = [[]];
+  for (const { text, kind } of tokenize(code, language)) {
+    const parts = text.split("\n");
+    for (let i = 0; i < parts.length; i++) {
+      if (i > 0) lines.push([]);
+      const part = parts[i].endsWith("\r") ? parts[i].slice(0, -1) : parts[i];
+      if (part) lines[lines.length - 1].push({ text: part, kind });
+    }
+  }
+  return lines;
+}
+
+/** Every supported language. */
+export function listLanguages() {
+  return meta().languages;
+}
+
+/** Every built in theme with its colors. */
+export function listThemes() {
+  return meta().themes;
+}
+
+/** Finds a language by id, alias, name or extension. */
+export function getLanguage(name) {
+  const index = resolveLanguage(name);
+  return index < 0 ? undefined : meta().languages[index];
+}
+
+/**
+ * Registers a custom theme and returns its name, which then works anywhere a
+ * built in theme name does. Kinds you leave out inherit a sensible style, so
+ * a handful of colors is enough:
+ *
+ *   defineTheme({
+ *     name: "discord",
+ *     background: "#2b2d31",
+ *     foreground: "#dbdee1",
+ *     styles: { keyword: "#ff7ab2", comment: { color: "#80848e", italic: true } },
+ *   });
+ */
+export function defineTheme(theme) {
+  const { name, dark, background, foreground, styles = {} } = theme;
+  if (!name || !background || !foreground) {
+    throw new Error("colorfulcode: a theme needs a name, a background and a foreground");
+  }
+  const lines = [name, (dark ?? isDark(background)) ? "dark" : "light", `${background} ${foreground}`];
+  for (const [kind, value] of Object.entries(styles)) {
+    const style = typeof value === "string" ? { color: value } : value;
+    const flags = (style.bold ? "b" : "") + (style.italic ? "i" : "") + (style.underline ? "u" : "");
+    lines.push(`${kind} ${style.color} ${flags}`);
+  }
+  if (instance().cc_theme_define(writeInput(lines.join("\n"))) < 0) {
+    throw new Error(`colorfulcode: invalid theme "${name}" (colors must be #rrggbb)`);
+  }
+  metadata = undefined; // Reload so listThemes() and getTheme() include it.
+  return name;
+}
+
+function isDark(hex) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  const luma = 0.299 * (n >> 16) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);
+  return luma < 128;
+}
+
+/** Finds a theme by name, or returns the colors of a theme object. */
+export function getTheme(name) {
+  if (name && typeof name === "object") name = themeName(name);
+  const index = meta().themeIndex.get(name);
+  return index === undefined ? undefined : meta().themes[index];
+}
+
+/**
+ * Guesses a language id from a file path, then from a shebang or doctype in
+ * the code. With `guess: true` the code itself is scored against every
+ * language too. Returns undefined when unsure.
+ */
+export function detectLanguage({ path, code, guess = false } = {}) {
+  const w = instance();
+  let index = -1;
+  if (path) index = w.cc_language_from_path(writeInput(path));
+  if (index < 0 && code) {
+    index = guess ? guessLanguage(code) : w.cc_language_from_content(writeInput(code.slice(0, 256)));
+  }
+  return index < 0 ? undefined : meta().languages[index].id;
+}
+
+/** CSS for the class based output (`theme: false`), scoped to `selector`. */
+export function themeCss(theme = "colorful", selector = ".cc") {
+  const themeIndex = resolveTheme(theme);
+  return readOutput(instance().cc_theme_css(themeIndex, writeInput(selector)));
+}
+
+/**
+ * Highlights every `<code class="language-xyz">` inside `root` in place.
+ * Handy for static pages and Markdown output.
+ */
+export function highlightAll(options = {}, root = globalThis.document) {
+  for (const el of root.querySelectorAll('code[class*="language-"], code[class*="lang-"]')) {
+    highlightElement(el, options);
+  }
+}
+
+/** Highlights a single `<code>` element in place using its `language-xyz` class. */
+export function highlightElement(el, options = {}) {
+  const match = /(?:^|\s)lang(?:uage)?-([\w+#.-]+)/.exec(el.className);
+  const language = options.language ?? (match ? match[1] : "text");
+  el.innerHTML = highlight(el.textContent ?? "", language, { ...options, pre: false });
+  const theme = options.theme === false ? undefined : getTheme(options.theme ?? "colorful");
+  const target = el.parentElement && el.parentElement.tagName === "PRE" ? el.parentElement : el;
+  target.classList.add("cc");
+  if (theme) {
+    target.style.background = theme.background;
+    target.style.color = theme.foreground;
+  }
+}

package/dist/react.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import type { HighlightOptions, LanguageName, LineToken } from "./index.js";
+
+export * from "./index.js";
+
+export interface CodeProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The source code. A string child works too. */
+  code?: string;
+  children?: string;
+  /** Language id, alias or extension, or "auto" to guess it. Defaults to plain text. */
+  language?: LanguageName;
+  /** Theme for inline styles, or `false` for class names. Defaults to "colorful". */
+  theme?: HighlightOptions["theme"];
+  lineNumbers?: boolean;
+  /** One based line numbers to highlight. */
+  highlightLines?: number[];
+  /** Render a `<code>` element for inline snippets instead of a `<pre>` block. */
+  inline?: boolean;
+}
+
+export function Code(props: CodeProps): ReactElement;
+export default Code;
+
+/** Memoized `highlight()` without the `<pre>` wrapper. */
+export function useHighlight(
+  code: string,
+  language: LanguageName,
+  options?: Omit<HighlightOptions, "pre">,
+): string;
+
+/** Memoized `tokenizeLines()`, for custom rendering. */
+export function useTokens(code: string, language: LanguageName): LineToken[][];

package/dist/react.js

@@ -0,0 +1,76 @@
+import { createElement, useMemo } from "react";
+import { detectLanguage, getLanguage, getTheme, highlight, tokenizeLines } from "./index.js";
+
+export * from "./index.js";
+
+/** Memoized `highlight()`: returns the HTML for `code`. */
+export function useHighlight(code, language, options = {}) {
+  const { theme, lines, lineNumbers, highlightLines } = options;
+  const marked = highlightLines ? highlightLines.join(",") : "";
+  return useMemo(
+    () => highlight(code, language, { theme, lines, lineNumbers, highlightLines, pre: false }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [code, language, theme, lines, lineNumbers, marked],
+  );
+}
+
+/** Memoized `tokenizeLines()`, for rendering tokens with your own components. */
+export function useTokens(code, language) {
+  return useMemo(() => tokenizeLines(code, language), [code, language]);
+}
+
+/**
+ * Renders highlighted code.
+ *
+ * `<Code code={source} language="tsx" theme="dracula" lineNumbers />`
+ *
+ * The code can also be passed as a string child. With a theme (default
+ * "colorful") everything is styled inline and no CSS is required. Pass
+ * `theme={false}` to get class names for your own stylesheet, and
+ * `language="auto"` to guess the language from the code.
+ */
+export function Code({
+  code,
+  children,
+  language = "text",
+  theme = "colorful",
+  lineNumbers = false,
+  highlightLines,
+  inline = false,
+  className,
+  style,
+  ...rest
+}) {
+  const source = code ?? (typeof children === "string" ? children : "");
+  // Guess once here, so the highlighting and `data-language` agree.
+  const resolved = useMemo(
+    () => (language === "auto" ? (detectLanguage({ code: source, guess: true }) ?? "text") : language),
+    [source, language],
+  );
+  const html = useHighlight(source, resolved, { theme, lineNumbers, highlightLines });
+  const colors = theme === false ? undefined : getTheme(theme);
+  const lang = getLanguage(resolved);
+  const classes = className ? `cc ${className}` : "cc";
+  const themed = colors ? { background: colors.background, color: colors.foreground } : undefined;
+  if (inline) {
+    return createElement("code", {
+      ...rest,
+      className: classes,
+      "data-language": lang?.id,
+      style: themed ? { padding: "0.15em 0.35em", borderRadius: "0.3em", ...themed, ...style } : style,
+      dangerouslySetInnerHTML: { __html: html },
+    });
+  }
+  return createElement(
+    "pre",
+    {
+      ...rest,
+      className: classes,
+      "data-language": lang?.id,
+      style: themed ? { padding: "1em", overflowX: "auto", borderRadius: "0.5em", ...themed, ...style } : style,
+    },
+    createElement("code", { dangerouslySetInnerHTML: { __html: html } }),
+  );
+}
+
+export default Code;

package/dist/styles.css

@@ -0,0 +1,12 @@
+/* Base styles for the class based output (theme: false). Pair with a theme from colorfulcode/themes. */
+.cc { padding: 1em; overflow-x: auto; border-radius: 0.5em; tab-size: 4; }
+.cc .cc-line { display: inline-block; min-width: 100%; }
+.cc .cc-hl { background: rgb(127 127 127 / 15%); }
+.cc .cc-ln {
+  display: inline-block;
+  min-width: 3ch;
+  margin-right: 2ch;
+  text-align: right;
+  opacity: 0.45;
+  user-select: none;
+}

package/dist/themes.d.ts

@@ -0,0 +1,31 @@
+// Optional themes. Each one is a plain theme object you can pass as `theme`.
+import type { ThemeDefinition } from "./index.js";
+
+export declare const rosePine: ThemeDefinition;
+export declare const rosePineMoon: ThemeDefinition;
+export declare const rosePineDawn: ThemeDefinition;
+export declare const ayuDark: ThemeDefinition;
+export declare const ayuMirage: ThemeDefinition;
+export declare const ayuLight: ThemeDefinition;
+export declare const nightOwl: ThemeDefinition;
+export declare const lightOwl: ThemeDefinition;
+export declare const palenight: ThemeDefinition;
+export declare const materialDarker: ThemeDefinition;
+export declare const synthwave84: ThemeDefinition;
+export declare const kanagawa: ThemeDefinition;
+export declare const everforestDark: ThemeDefinition;
+export declare const everforestLight: ThemeDefinition;
+export declare const vitesseDark: ThemeDefinition;
+export declare const vitesseLight: ThemeDefinition;
+export declare const poimandres: ThemeDefinition;
+export declare const githubDarkDimmed: ThemeDefinition;
+export declare const oneLight: ThemeDefinition;
+export declare const gruvboxLight: ThemeDefinition;
+export declare const catppuccinFrappe: ThemeDefinition;
+export declare const catppuccinMacchiato: ThemeDefinition;
+export declare const tokyoNightStorm: ThemeDefinition;
+export declare const tokyoNightLight: ThemeDefinition;
+export declare const monokaiPro: ThemeDefinition;
+export declare const horizon: ThemeDefinition;
+export declare const panda: ThemeDefinition;
+export declare const cobalt2: ThemeDefinition;