colorfulcode 0.0.1 → 0.1.0

package/README.md

@@ -1,3 +1,24 @@
 # colorfulcode
 
-Placeholder release. Use 0.1.0 or later, see https://github.com/Darker-Ink/colorfulcode
+Fast syntax highlighting for 200 languages, written in Rust and running as WebAssembly. Synchronous, no setup, works in React, Node, Deno, Bun and every bundler.
+
+```bash
+npm install colorfulcode
+```
+
+```tsx
+import { Code } from "colorfulcode/react";
+
+<Code code={source} language="tsx" theme="tokyo-night" lineNumbers />;
+```
+
+```js
+import { highlight, tokenize } from "colorfulcode";
+
+highlight("const answer = 42;", "js", { theme: "dracula" }); // HTML with inline styles
+tokenize("const answer = 42;", "js"); // [{ start, end, kind, text }, ...]
+```
+
+`colorfulcode/common` (and `colorfulcode/common/react`) is the same API with the 55 most used languages in a smaller module.
+
+Full documentation, themes, custom themes and benchmarks: https://github.com/Darker-Ink/colorfulcode

package/dist/common-react.d.ts

@@ -0,0 +1,2 @@
+export * from "./react.js";
+export { default } from "./react.js";

package/dist/common-react.js

@@ -0,0 +1,76 @@
+import { createElement, useMemo } from "react";
+import { detectLanguage, getLanguage, getTheme, highlight, tokenizeLines } from "./common.js";
+
+export * from "./common.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/common.d.ts

@@ -0,0 +1 @@
+export * from "./index.js";

package/dist/common.js

@@ -0,0 +1,262 @@
+import wasmBase64 from "./wasm-common.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/css/catppuccin-latte.css

@@ -0,0 +1,25 @@
+.cc{background:#eff1f5;color:#4c4f69}
+.cc .cc-comment{color:#7c7f93;font-style:italic}
+.cc .cc-keyword{color:#8839ef}
+.cc .cc-string{color:#40a02b}
+.cc .cc-escape{color:#ea76cb}
+.cc .cc-number{color:#fe640b}
+.cc .cc-constant{color:#fe640b}
+.cc .cc-function{color:#1e66f5}
+.cc .cc-type{color:#df8e1d}
+.cc .cc-variable{color:#d20f39}
+.cc .cc-property{color:#7287fd}
+.cc .cc-builtin{color:#04a5e5}
+.cc .cc-operator{color:#04a5e5}
+.cc .cc-punctuation{color:#7c7f93}
+.cc .cc-tag{color:#1e66f5}
+.cc .cc-attribute{color:#df8e1d}
+.cc .cc-meta{color:#fe640b}
+.cc .cc-regex{color:#ea76cb}
+.cc .cc-heading{color:#d20f39;font-weight:bold}
+.cc .cc-emphasis{color:#4c4f69;font-style:italic}
+.cc .cc-strong{color:#4c4f69;font-weight:bold}
+.cc .cc-link{color:#1e66f5;text-decoration:underline}
+.cc .cc-inserted{color:#40a02b}
+.cc .cc-deleted{color:#d20f39}
+.cc .cc-parameter{color:#e64553;font-style:italic}

package/dist/css/catppuccin-mocha.css

@@ -0,0 +1,25 @@
+.cc{background:#1e1e2e;color:#cdd6f4}
+.cc .cc-comment{color:#9399b2;font-style:italic}
+.cc .cc-keyword{color:#cba6f7}
+.cc .cc-string{color:#a6e3a1}
+.cc .cc-escape{color:#f5c2e7}
+.cc .cc-number{color:#fab387}
+.cc .cc-constant{color:#fab387}
+.cc .cc-function{color:#89b4fa}
+.cc .cc-type{color:#f9e2af}
+.cc .cc-variable{color:#f38ba8}
+.cc .cc-property{color:#b4befe}
+.cc .cc-builtin{color:#89dceb}
+.cc .cc-operator{color:#89dceb}
+.cc .cc-punctuation{color:#9399b2}
+.cc .cc-tag{color:#89b4fa}
+.cc .cc-attribute{color:#f9e2af}
+.cc .cc-meta{color:#fab387}
+.cc .cc-regex{color:#f5c2e7}
+.cc .cc-heading{color:#f38ba8;font-weight:bold}
+.cc .cc-emphasis{color:#cdd6f4;font-style:italic}
+.cc .cc-strong{color:#cdd6f4;font-weight:bold}
+.cc .cc-link{color:#89b4fa;text-decoration:underline}
+.cc .cc-inserted{color:#a6e3a1}
+.cc .cc-deleted{color:#f38ba8}
+.cc .cc-parameter{color:#eba0ac;font-style:italic}

package/dist/css/colorful-light.css

@@ -0,0 +1,25 @@
+.cc{background:#fbfbfd;color:#24273a}
+.cc .cc-comment{color:#8a8fa8;font-style:italic}
+.cc .cc-keyword{color:#d6246e}
+.cc .cc-string{color:#2e8b3a}
+.cc .cc-escape{color:#b8860b}
+.cc .cc-number{color:#c2570c}
+.cc .cc-constant{color:#c2570c}
+.cc .cc-function{color:#1f6feb}
+.cc .cc-type{color:#a15c00}
+.cc .cc-variable{color:#9c27b0}
+.cc .cc-property{color:#6639ba}
+.cc .cc-builtin{color:#0e7c86}
+.cc .cc-operator{color:#d6246e}
+.cc .cc-punctuation{color:#5c6075}
+.cc .cc-tag{color:#d6246e}
+.cc .cc-attribute{color:#6639ba}
+.cc .cc-meta{color:#6639ba}
+.cc .cc-regex{color:#b3401b}
+.cc .cc-heading{color:#1f6feb;font-weight:bold}
+.cc .cc-emphasis{color:#24273a;font-style:italic}
+.cc .cc-strong{color:#24273a;font-weight:bold}
+.cc .cc-link{color:#0e7c86;text-decoration:underline}
+.cc .cc-inserted{color:#2e8b3a}
+.cc .cc-deleted{color:#d1242f}
+.cc .cc-parameter{color:#9c27b0;font-style:italic}

package/dist/css/colorful.css

@@ -0,0 +1,25 @@
+.cc{background:#12131c;color:#e4e6f1}
+.cc .cc-comment{color:#6b7194;font-style:italic}
+.cc .cc-keyword{color:#ff6ac1}
+.cc .cc-string{color:#8ee59c}
+.cc .cc-escape{color:#ffd166}
+.cc .cc-number{color:#ffb86c}
+.cc .cc-constant{color:#ff9e64}
+.cc .cc-function{color:#61d4ff}
+.cc .cc-type{color:#ffd166}
+.cc .cc-variable{color:#f2a7ff}
+.cc .cc-property{color:#9fb4ff}
+.cc .cc-builtin{color:#4fe0c4}
+.cc .cc-operator{color:#ff8fa3}
+.cc .cc-punctuation{color:#a3a8c3}
+.cc .cc-tag{color:#ff6ac1}
+.cc .cc-attribute{color:#c792ea}
+.cc .cc-meta{color:#c792ea}
+.cc .cc-regex{color:#f78c6c}
+.cc .cc-heading{color:#61d4ff;font-weight:bold}
+.cc .cc-emphasis{color:#e4e6f1;font-style:italic}
+.cc .cc-strong{color:#e4e6f1;font-weight:bold}
+.cc .cc-link{color:#4fe0c4;text-decoration:underline}
+.cc .cc-inserted{color:#8ee59c}
+.cc .cc-deleted{color:#ff6b6b}
+.cc .cc-parameter{color:#f2a7ff;font-style:italic}

package/dist/css/dracula.css

@@ -0,0 +1,25 @@
+.cc{background:#282a36;color:#f8f8f2}
+.cc .cc-comment{color:#6272a4}
+.cc .cc-keyword{color:#ff79c6}
+.cc .cc-string{color:#f1fa8c}
+.cc .cc-escape{color:#ff79c6}
+.cc .cc-number{color:#bd93f9}
+.cc .cc-constant{color:#bd93f9}
+.cc .cc-function{color:#50fa7b}
+.cc .cc-type{color:#8be9fd;font-style:italic}
+.cc .cc-variable{color:#ffb86c;font-style:italic}
+.cc .cc-property{color:#f8f8f2}
+.cc .cc-builtin{color:#8be9fd}
+.cc .cc-operator{color:#ff79c6}
+.cc .cc-punctuation{color:#f8f8f2}
+.cc .cc-tag{color:#ff79c6}
+.cc .cc-attribute{color:#50fa7b;font-style:italic}
+.cc .cc-meta{color:#50fa7b;font-style:italic}
+.cc .cc-regex{color:#ff5555}
+.cc .cc-heading{color:#bd93f9;font-weight:bold}
+.cc .cc-emphasis{color:#f8f8f2;font-style:italic}
+.cc .cc-strong{color:#f8f8f2;font-weight:bold}
+.cc .cc-link{color:#8be9fd;text-decoration:underline}
+.cc .cc-inserted{color:#50fa7b}
+.cc .cc-deleted{color:#ff5555}
+.cc .cc-parameter{color:#ffb86c;font-style:italic}

package/dist/css/github-dark.css

@@ -0,0 +1,25 @@
+.cc{background:#0d1117;color:#e6edf3}
+.cc .cc-comment{color:#8b949e}
+.cc .cc-keyword{color:#ff7b72}
+.cc .cc-string{color:#a5d6ff}
+.cc .cc-escape{color:#79c0ff}
+.cc .cc-number{color:#79c0ff}
+.cc .cc-constant{color:#79c0ff}
+.cc .cc-function{color:#d2a8ff}
+.cc .cc-type{color:#ffa657}
+.cc .cc-variable{color:#ffa657}
+.cc .cc-property{color:#79c0ff}
+.cc .cc-builtin{color:#79c0ff}
+.cc .cc-operator{color:#ff7b72}
+.cc .cc-punctuation{color:#e6edf3}
+.cc .cc-tag{color:#7ee787}
+.cc .cc-attribute{color:#79c0ff}
+.cc .cc-meta{color:#d2a8ff}
+.cc .cc-regex{color:#a5d6ff}
+.cc .cc-heading{color:#1f6feb;font-weight:bold}
+.cc .cc-emphasis{color:#e6edf3;font-style:italic}
+.cc .cc-strong{color:#e6edf3;font-weight:bold}
+.cc .cc-link{color:#a5d6ff;text-decoration:underline}
+.cc .cc-inserted{color:#aff5b4}
+.cc .cc-deleted{color:#ffdcd7}
+.cc .cc-parameter{color:#ffa657}

package/dist/css/github-light.css

@@ -0,0 +1,25 @@
+.cc{background:#ffffff;color:#1f2328}
+.cc .cc-comment{color:#6e7781}
+.cc .cc-keyword{color:#cf222e}
+.cc .cc-string{color:#0a3069}
+.cc .cc-escape{color:#0550ae}
+.cc .cc-number{color:#0550ae}
+.cc .cc-constant{color:#0550ae}
+.cc .cc-function{color:#8250df}
+.cc .cc-type{color:#953800}
+.cc .cc-variable{color:#953800}
+.cc .cc-property{color:#0550ae}
+.cc .cc-builtin{color:#0550ae}
+.cc .cc-operator{color:#cf222e}
+.cc .cc-punctuation{color:#1f2328}
+.cc .cc-tag{color:#116329}
+.cc .cc-attribute{color:#0550ae}
+.cc .cc-meta{color:#8250df}
+.cc .cc-regex{color:#0a3069}
+.cc .cc-heading{color:#0550ae;font-weight:bold}
+.cc .cc-emphasis{color:#1f2328;font-style:italic}
+.cc .cc-strong{color:#1f2328;font-weight:bold}
+.cc .cc-link{color:#0a3069;text-decoration:underline}
+.cc .cc-inserted{color:#116329}
+.cc .cc-deleted{color:#82071e}
+.cc .cc-parameter{color:#953800}

package/dist/css/gruvbox-dark.css

@@ -0,0 +1,25 @@
+.cc{background:#282828;color:#ebdbb2}
+.cc .cc-comment{color:#928374;font-style:italic}
+.cc .cc-keyword{color:#fb4934}
+.cc .cc-string{color:#b8bb26}
+.cc .cc-escape{color:#fe8019}
+.cc .cc-number{color:#d3869b}
+.cc .cc-constant{color:#d3869b}
+.cc .cc-function{color:#8ec07c}
+.cc .cc-type{color:#fabd2f}
+.cc .cc-variable{color:#83a598}
+.cc .cc-property{color:#83a598}
+.cc .cc-builtin{color:#fe8019}
+.cc .cc-operator{color:#fe8019}
+.cc .cc-punctuation{color:#a89984}
+.cc .cc-tag{color:#fb4934}
+.cc .cc-attribute{color:#8ec07c}
+.cc .cc-meta{color:#fe8019}
+.cc .cc-regex{color:#b8bb26}
+.cc .cc-heading{color:#fabd2f;font-weight:bold}
+.cc .cc-emphasis{color:#ebdbb2;font-style:italic}
+.cc .cc-strong{color:#ebdbb2;font-weight:bold}
+.cc .cc-link{color:#83a598;text-decoration:underline}
+.cc .cc-inserted{color:#b8bb26}
+.cc .cc-deleted{color:#fb4934}
+.cc .cc-parameter{color:#83a598}

package/dist/css/monokai.css

@@ -0,0 +1,25 @@
+.cc{background:#272822;color:#f8f8f2}
+.cc .cc-comment{color:#75715e}
+.cc .cc-keyword{color:#f92672}
+.cc .cc-string{color:#e6db74}
+.cc .cc-escape{color:#ae81ff}
+.cc .cc-number{color:#ae81ff}
+.cc .cc-constant{color:#ae81ff}
+.cc .cc-function{color:#a6e22e}
+.cc .cc-type{color:#66d9ef;font-style:italic}
+.cc .cc-variable{color:#fd971f}
+.cc .cc-property{color:#f8f8f2}
+.cc .cc-builtin{color:#66d9ef}
+.cc .cc-operator{color:#f92672}
+.cc .cc-punctuation{color:#f8f8f2}
+.cc .cc-tag{color:#f92672}
+.cc .cc-attribute{color:#a6e22e}
+.cc .cc-meta{color:#a6e22e}
+.cc .cc-regex{color:#e6db74}
+.cc .cc-heading{color:#a6e22e;font-weight:bold}
+.cc .cc-emphasis{color:#f8f8f2;font-style:italic}
+.cc .cc-strong{color:#f8f8f2;font-weight:bold}
+.cc .cc-link{color:#66d9ef;text-decoration:underline}
+.cc .cc-inserted{color:#a6e22e}
+.cc .cc-deleted{color:#f92672}
+.cc .cc-parameter{color:#fd971f;font-style:italic}

package/dist/css/nord.css

@@ -0,0 +1,25 @@
+.cc{background:#2e3440;color:#d8dee9}
+.cc .cc-comment{color:#616e88;font-style:italic}
+.cc .cc-keyword{color:#81a1c1}
+.cc .cc-string{color:#a3be8c}
+.cc .cc-escape{color:#ebcb8b}
+.cc .cc-number{color:#b48ead}
+.cc .cc-constant{color:#81a1c1}
+.cc .cc-function{color:#88c0d0}
+.cc .cc-type{color:#8fbcbb}
+.cc .cc-variable{color:#d8dee9}
+.cc .cc-property{color:#d8dee9}
+.cc .cc-builtin{color:#88c0d0}
+.cc .cc-operator{color:#81a1c1}
+.cc .cc-punctuation{color:#eceff4}
+.cc .cc-tag{color:#81a1c1}
+.cc .cc-attribute{color:#8fbcbb}
+.cc .cc-meta{color:#d08770}
+.cc .cc-regex{color:#ebcb8b}
+.cc .cc-heading{color:#88c0d0;font-weight:bold}
+.cc .cc-emphasis{color:#d8dee9;font-style:italic}
+.cc .cc-strong{color:#d8dee9;font-weight:bold}
+.cc .cc-link{color:#88c0d0;text-decoration:underline}
+.cc .cc-inserted{color:#a3be8c}
+.cc .cc-deleted{color:#bf616a}
+.cc .cc-parameter{color:#d8dee9}

package/dist/css/one-dark.css

@@ -0,0 +1,25 @@
+.cc{background:#282c34;color:#abb2bf}
+.cc .cc-comment{color:#5c6370;font-style:italic}
+.cc .cc-keyword{color:#c678dd}
+.cc .cc-string{color:#98c379}
+.cc .cc-escape{color:#56b6c2}
+.cc .cc-number{color:#d19a66}
+.cc .cc-constant{color:#d19a66}
+.cc .cc-function{color:#61afef}
+.cc .cc-type{color:#e5c07b}
+.cc .cc-variable{color:#e06c75}
+.cc .cc-property{color:#e06c75}
+.cc .cc-builtin{color:#56b6c2}
+.cc .cc-operator{color:#56b6c2}
+.cc .cc-punctuation{color:#abb2bf}
+.cc .cc-tag{color:#e06c75}
+.cc .cc-attribute{color:#d19a66}
+.cc .cc-meta{color:#61afef}
+.cc .cc-regex{color:#56b6c2}
+.cc .cc-heading{color:#e06c75;font-weight:bold}
+.cc .cc-emphasis{color:#abb2bf;font-style:italic}
+.cc .cc-strong{color:#abb2bf;font-weight:bold}
+.cc .cc-link{color:#61afef;text-decoration:underline}
+.cc .cc-inserted{color:#98c379}
+.cc .cc-deleted{color:#e06c75}
+.cc .cc-parameter{color:#e06c75}