highlight

lpm install @lpm.dev/neo.highlight

import { Highlight } from "@lpm.dev/neo.highlight/react";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

function App() {
  return (
    <Highlight language={javascript} theme={githubDark}>
      {`const greeting = "Hello, world!";
console.log(greeting);`}
    </Highlight>
  );
}

import { highlight } from "@lpm.dev/neo.highlight/vanilla";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

const html = highlight(`const greeting = "Hello, world!";`, javascript, {
  theme: githubDark,
  lineNumbers: true,
});

document.getElementById("code").innerHTML = html;

import { Highlight } from "@lpm.dev/neo.highlight/react";
import { typescript } from "@lpm.dev/neo.highlight/grammars/typescript";
import { dracula } from "@lpm.dev/neo.highlight/themes/dracula";

<Highlight
  language={typescript}
  theme={dracula}
  showLineNumbers
  highlightLines={[2, 3]}
  className="my-code-block"
>
  {`interface User {
  name: string;
  email: string;
}`}
</Highlight>;

import { AutoHighlight } from "@lpm.dev/neo.highlight/react";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { python } from "@lpm.dev/neo.highlight/grammars/python";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

<AutoHighlight languages={[javascript, python]} theme={githubDark}>
  <article dangerouslySetInnerHTML={{ __html: sanitizedMarkdownHtml }} />
</AutoHighlight>;

import {
  HighlightProvider,
  Highlight,
  AutoHighlight,
} from "@lpm.dev/neo.highlight/react";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { python } from "@lpm.dev/neo.highlight/grammars/python";
import { tokyoNight } from "@lpm.dev/neo.highlight/themes/tokyo-night";

function App() {
  return (
    <HighlightProvider
      theme={tokyoNight}
      languages={[javascript, python]}
      lineNumbers
    >
      {/* All children inherit theme, languages, and lineNumbers */}
      <Highlight language={javascript}>{`const x = 42;`}</Highlight>

      <AutoHighlight>
        <div dangerouslySetInnerHTML={{ __html: sanitizedBlogContent }} />
      </AutoHighlight>
    </HighlightProvider>
  );
}

import { useHighlight } from "@lpm.dev/neo.highlight/react";
import { rust } from "@lpm.dev/neo.highlight/grammars/rust";
import { nord } from "@lpm.dev/neo.highlight/themes/nord";

function CodeBlock({ code }: { code: string }) {
  const { tokens, html } = useHighlight(code, rust, {
    theme: nord,
    lineNumbers: true,
    highlightLines: [1],
    wrapCode: true,
  });

  // Use `html` directly
  return <div dangerouslySetInnerHTML={{ __html: html }} />;

  // Or iterate over `tokens` for custom rendering
}

import { useHighlightContext } from "@lpm.dev/neo.highlight/react";

function DebugInfo() {
  const { theme, languages, classPrefix, lineNumbers } = useHighlightContext();
  // ...
}

import { highlight } from "@lpm.dev/neo.highlight/vanilla";
import { python } from "@lpm.dev/neo.highlight/grammars/python";
import { oneDark } from "@lpm.dev/neo.highlight/themes/one-dark";

const html = highlight(
  `def greet(name):
    return f"Hello, {name}!"`,
  python,
  {
    theme: oneDark,
    lineNumbers: true,
    highlightLines: [2],
    wrapCode: true,
  },
);

import { autoHighlight } from "@lpm.dev/neo.highlight/vanilla";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { typescript } from "@lpm.dev/neo.highlight/grammars/typescript";
import { css } from "@lpm.dev/neo.highlight/grammars/css";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

// Highlight all existing code blocks and watch for new ones
const cleanup = autoHighlight({
  languages: [javascript, typescript, css],
  theme: githubDark,
  observe: true, // Use MutationObserver for SPAs
  selector: "pre code", // CSS selector to match
  lineNumbers: false,
});

// Later, to stop observing:
cleanup();

import { scan } from "@lpm.dev/neo.highlight/vanilla";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";

const count = scan({
  languages: [javascript],
  selector: "pre code",
  container: document.getElementById("article"),
  force: true, // Refresh blocks that are already highlighted
  onError: (error, element) => console.error(element, error),
});

console.log(`Highlighted ${count} code blocks`);

import { observe } from "@lpm.dev/neo.highlight/vanilla";
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

const disconnect = observe({
  languages: [javascript],
  theme: githubDark,
  container: document.body,
});

// Stop observing when done:
disconnect();

import "@lpm.dev/neo.highlight/worker";

const worker = new Worker(new URL("./highlight-worker.ts", import.meta.url), {
  type: "module",
});

worker.postMessage({
  id: 1,
  code: "const x = 42;",
  language: "javascript",
  maxInputLength: 100_000,
});

worker.addEventListener("message", (event) => {
  if (event.data.ok) {
    console.log(event.data.tokens);
  } else {
    console.error(event.data.error);
  }
});

import { resolveGrammar } from "@lpm.dev/neo.highlight";
import { javascript, python, typescript } from "@lpm.dev/neo.highlight/grammars";

const grammars = [javascript, python, typescript];

resolveGrammar("js", grammars);         // → javascript grammar
resolveGrammar("python", grammars);     // → python grammar
resolveGrammar("typescript", grammars); // → typescript grammar
resolveGrammar("unknown", grammars);    // → undefined

import { validateThemeContrast } from "@lpm.dev/neo.highlight";
import { nord } from "@lpm.dev/neo.highlight/themes/nord";

const report = validateThemeContrast(nord);
// report.passed — true if all results pass
// report.theme — theme name
// report.results — array of
// { token, color, background, ratio, required, pass }

import { contrastRatio } from "@lpm.dev/neo.highlight";

contrastRatio("#ffffff", "#000000"); // → 21
contrastRatio("#767676", "#ffffff"); // → ~4.54

import { meetsWCAG_AA } from "@lpm.dev/neo.highlight";

meetsWCAG_AA("#767676", "#ffffff");        // → true  (4.54:1 >= 4.5)
meetsWCAG_AA("#808080", "#ffffff");        // → false (3.95:1 < 4.5)
meetsWCAG_AA("#808080", "#ffffff", true);  // → true  (3.95:1 >= 3.0 for large text)

import { hexToRGB } from "@lpm.dev/neo.highlight";

hexToRGB("#ff9e64"); // → [255, 158, 100]
hexToRGB("#fff");    // → [255, 255, 255]

import { relativeLuminance } from "@lpm.dev/neo.highlight";

relativeLuminance(255, 255, 255); // → 1
relativeLuminance(0, 0, 0);       // → 0

import { getDualThemeStylesheet } from "@lpm.dev/neo.highlight";
import { solarizedLight } from "@lpm.dev/neo.highlight/themes/solarized-light";
import { solarizedDark } from "@lpm.dev/neo.highlight/themes/solarized-dark";

// Media query (default)
const css = getDualThemeStylesheet(solarizedLight, solarizedDark);

// Class-based
const css2 = getDualThemeStylesheet(solarizedLight, solarizedDark, {
  darkSelector: "[data-theme='dark']",
});

// Import a single language
import { javascript } from "@lpm.dev/neo.highlight/grammars/javascript";

// Or import several
import {
  javascript,
  typescript,
  python,
} from "@lpm.dev/neo.highlight/grammars";

// Import a single theme
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

// Or import several
import { githubDark, dracula, nord } from "@lpm.dev/neo.highlight/themes";

import { validateThemeContrast } from "@lpm.dev/neo.highlight";
import { dracula } from "@lpm.dev/neo.highlight/themes/dracula";

const report = validateThemeContrast(dracula);

console.log(report.passed); // true — all colors meet the ratio
console.log(report.theme); // "dracula"

for (const result of report.results) {
  console.log(
    `${result.token}: ${result.ratio.toFixed(1)}:1 — ${result.pass ? "PASS" : "FAIL"}`,
  );
}

import { getDualThemeStylesheet } from "@lpm.dev/neo.highlight";
import { githubLight } from "@lpm.dev/neo.highlight/themes/github-light";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

const css = getDualThemeStylesheet(githubLight, githubDark);
// Produces CSS with:
//   Root styles use githubLight values
//   @media (prefers-color-scheme: dark) { ... } overrides with githubDark values

const css = getDualThemeStylesheet(githubLight, githubDark, {
  darkSelector: ".dark",
});
// Produces CSS with:
//   Root styles use githubLight values
//   .dark { ... } overrides with githubDark values

import type { Theme } from "@lpm.dev/neo.highlight";

const myTheme: Theme = {
  name: "my-theme",
  background: "#1a1b26",
  foreground: "#c0caf5",
  selection: "#33467c",
  lineNumber: "#3b4261",
  lineNumberActive: "#c0caf5",
  lineHighlight: "#292e42",
  tokenColors: {
    comment: "#565f89",
    keyword: "#9d7cd8",
    string: "#9ece6a",
    number: "#ff9e64",
    boolean: "#ff9e64",
    function: "#7aa2f7",
    operator: "#89ddff",
    punctuation: "#c0caf5",
    variable: "#c0caf5",
    "class-name": "#f7768e",
    constant: "#ff9e64",
    property: "#73daca",
    tag: "#f7768e",
    "attr-name": "#7aa2f7",
    "attr-value": "#9ece6a",
    selector: "#9ece6a",
    regex: "#b4f9f8",
    builtin: "#7aa2f7",
    important: "#f7768e",
    inserted: "#9ece6a",
    deleted: "#f7768e",
    changed: "#ff9e64",
    namespace: "#9d7cd8",
    parameter: "#e0af68",
    interpolation: "#73daca",
    "template-string": "#9ece6a",
    decorator: "#9d7cd8",
  },
};

.neo-hl {
  --neo-hl-bg: #1e1e2e;
  --neo-hl-fg: #cdd6f4;
  --neo-hl-keyword: #cba6f7;
  --neo-hl-string: #a6e3a1;
}

import { createParser } from "@lpm.dev/neo.markdown";
import { highlightPlugin } from "@lpm.dev/neo.markdown/plugins/highlight";
import { tokenize, renderToHTML, getThemeStylesheet } from "@lpm.dev/neo.highlight";
import { javascript, typescript, python } from "@lpm.dev/neo.highlight/grammars";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

const parser = createParser({
  plugins: [
    highlightPlugin({
      grammars: [javascript, typescript, python],
      tokenize,
      renderToHTML,
      getThemeStylesheet,
      theme: githubDark,
    }),
  ],
});

const html = parser.parse(markdownString);

import { getThemeStylesheet } from "@lpm.dev/neo.highlight";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

const css = getThemeStylesheet(githubDark);
// Inject into <style> tag in your HTML template

import { getThemeStylesheet } from "@lpm.dev/neo.highlight";
import { githubDark } from "@lpm.dev/neo.highlight/themes/github-dark";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <style
          dangerouslySetInnerHTML={{ __html: getThemeStylesheet(githubDark) }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

import type {
  Token,
  TokenNode,
  TokenPattern,
  TokenDefinition,
  Grammar,
  GrammarTokens,
  Theme,
  ThemeTokenColors,
  RenderOptions,
  ScanOptions,
  GrammarRegistry,
} from "@lpm.dev/neo.highlight";

import type {
  HighlightProps,
  AutoHighlightProps,
  HighlightProviderProps,
  UseHighlightOptions,
  UseHighlightResult,
} from "@lpm.dev/neo.highlight/react";

import type {
  HighlightOptions,
  ScanOptions,
} from "@lpm.dev/neo.highlight/vanilla";