fractalpop

@fractaldesign/pop is the engine. It highlights a string of source code and returns an HTML string. No DOM, no runtime dependencies. Use it directly on any platform, or through one of the adapter packages.

Install

npm install @fractaldesign/pop

Quick start

Call highlight() with your code and a language. The result is a string of nested <span> elements that you drop into a <pre><code> block.

import { highlight } from '@fractaldesign/pop'

const html = highlight('const ready = true', { lang: 'ts' })
// <span class="fp__line"><span class="fp__token--keyword" style="color:var(--fp-keyword)">const</span> …

The output is HTML-encoded, so it is safe to inject with innerHTML, {@html}, or dangerouslySetInnerHTML.

highlight(code, options)

highlight takes the source string and an options object. It returns an HTML string.

cx, mark, and markLine are the only customization hooks, and they control performance. When you pass none of them, render takes a fast path: it concatenates strings with no per-token object allocation. Passing any hook switches to the slower path that builds mutable token and line objects so the hooks can run. If you do not need customization, pass no hooks.

Emphasis with cx

cx appends a class to every token of a given type. This is the Tailwind- friendly way to emphasize tokens without writing selectors.

highlight(code, {
  lang: 'sass',
  cx: { keyword: 'font-bold', comment: 'italic opacity-70' },
})

Line highlighting with markLine

Each line exposes its zero-based index. Add a class when the line is one you want to highlight.

const active = new Set([2, 3]) // 1-based line numbers

highlight(code, {
  lang: 'ts',
  markLine(line) {
    if (active.has(line.index + 1)) line.className += ' fp__line--highlighted'
  },
})

Theming

fractalpop does not ship colors. Every token renders with class="fp__token--<type>" and an inline style="color:var(--fp-<type>)", so a theme is a block of CSS variables you set on any ancestor.

:root {
  --fp-identifier: #354150;
  --fp-keyword: #f47067;
  --fp-string: #00a99a;
  --fp-class: #8d85ff;
  --fp-property: #4e8fdf;
  --fp-entity: #665ac7;
  --fp-jsxliterals: #bf7db6;
  --fp-sign: #8996a3;
  --fp-comment: #a19595;
}

.fp__line--highlighted {
  background: #fff8c5;
}

For dark mode, redefine the same variables under a selector or media query — for example :root[data-theme='dark'] or @media (prefers-color-scheme: dark).

Token types

Token types are a small, fixed list. Keeping it stable keeps themes portable.

Two more types, break (newlines) and space (horizontal whitespace), are preserved for faithful output but carry no color.

Languages

fractalpop ships metadata and configs for 32 languages, but the default entry only registers TypeScript and plaintext — the rest stay tree- shakeable. Register what you need yourself, or import @fractaldesign/pop/full to register all 32 up front. Resolve a name, file extension, or alias to a canonical id with lang().

import { lang, findLanguage, allLanguages } from '@fractaldesign/pop/lang'

lang('tsx')     // 'typescript'
lang('.scss')   // 'scss'  (metadata is known; register the config to highlight)
lang('yml')     // 'yaml'
lang('nope')    // undefined

Fractalpop especially supports-

• sass — indented Sass (no braces, no semicolons).
• svelte — the composite: <script lang="ts"> + markup + <style lang="sass">.
• typescript / javascript — a full JS/JSX/TS runtime (regex literals, template interpolation, JSX, and the TS-generic-vs-JSX distinction).

The rest is the general pack: css, html, markdown, diff, plaintext, c, cpp, csharp, go, java, rust, json, shell, sql, yaml, toml, python, ruby, php, kotlin, swift, lua, graphql, hcl, dockerfile, powershell, zig.

Subpath exports

The package exposes several entries so you only bundle what you need.

generate returns a hast-like AST, which is what a unified/rehype pipeline consumes. render returns the HTML string that highlight wraps.

import { parse, generate } from '@fractaldesign/pop/core'
import { lang, getLanguageConfig } from '@fractaldesign/pop/full'

const parsed = parse(code, getLanguageConfig(lang('sass')!))
const tree = generate(parsed) // element/text nodes, one per line and token

Registry utilities

The default @fractaldesign/pop entry only registers TypeScript and plaintext. Use these utilities to control which languages are available at runtime.

The registry is a single module-level singleton shared by every entry point (@fractaldesign/pop/full re-exports and mutates the same core as @fractaldesign/pop), so a registration made through one import path is visible to all others in the same app.

import {
  registerLanguage,
  setDefaults,
  importDefaults,
  canonicalizeLang,
  getRegisteredLanguages,
} from '@fractaldesign/pop'

registerLanguage({ id: 'python', extension: 'py', aliases: ['python3'] }, pythonConfig)
setDefaults({ python: pythonConfig, rust: rustConfig })
await importDefaults(['python', 'rust'])
canonicalizeLang('tsx') // 'typescript'

Related Packages

• @fractaldesign/pop-svelte — Svelte 5 components and action
• @fractaldesign/pop-mdsvex — Highlighter hook for MDSveX in SvelteKit
• @fractaldesign/pop-remark — Remark plugin for Markdown & MDX

Benchmarks

fractalpop, Sugar High, PrismJS, highlight.js, and Shiki highlighting the same generated TypeScript files:

Measured 2026-09-13 with Node v24.19.0, darwin arm64, Apple M3 Pro.

Median milliseconds per file; lower is better. 5 timed samples after warmup. Sizes are TypeScript-only browser bundles, minified with Bun; gzip uses level 9. Theme CSS is excluded. Loading and initialization are excluded. Each library highlights the same generated TypeScript into HTML using an explicit language. Grammars and HTML output differ; this is not a measure of highlighting quality or browser rendering speed. Results vary by machine and workload.