fractalpopfractalpop
fast syntax highlighting for SvelteKit.
One engine behind components, markdown, and plain strings. SSR-safe and identical on both sides, so highlighted code costs nothing to hydrate — and themes are CSS variables, with no runtime to ship.
Read detailed documentation at Github.
Core logic
Fractalpop is not a semantic highlighter. It splits the code into parts, whitespaces, indentation, line-breaks and labels each part. These parts are then colored differently. Thus it can be language-agnostic - a single classifier for all languages. Regular highlighters like Prism and Shiki are included in the benchmarks, but it’s not quite fair to compare to them as they are semantic highlighters. Fractalpop is for rapid, asthetic highlighting. Not true grammar awareness.
The idea is taken from the gpu-lexer utility by Shu Ding.
1// theme tokens2$brand: hsl(212, 90%, 55%)3$pad: 1rem45@mixin card($radius: 0.5rem)6 border-radius: $radius7 padding: $pad89.card10 color: $brand11 +card(0.75rem)12 &:hover13 background: darken($brand, 8%) !importantToken palettes
Light and Dark - match token palettes for your theme.
:root { --fp-class: #5a4fea; --fp-identifier: #38393a; --fp-sign: #9fa0a2; --fp-string: #00a99a; --fp-keyword: #d6493f; --fp-comment: #7a7878; --fp-jsxliterals: #982c8a; --fp-entity: #665ac7; --fp-property: #4e8fdf;}:root[data-theme='dark'] { --fp-class: #7eb5ff; --fp-identifier: #d4d4d4; --fp-sign: #8b949e; --fp-string: #88bbb6; --fp-keyword: #ffada8; --fp-comment: #8b8b8b; --fp-jsxliterals: #d2a8ff; --fp-entity: #b7adff; --fp-property: #79c0ff;}Line Highlighting: Each line is a .fp__line, so you can target them.
.fp__line:nth-child(5),.fp__line--highlighted { background: #fff8c5;}Languages
fractalpop/full registers 32 languages up front, no extra grammars
or setup. The default fractalpop entry stays tiny with TypeScript and
plaintext only; grow it with registerLanguage() or importDefaults(). Use lang() to resolve filenames, extensions
and aliases to a canonical name.
import { highlight, lang } from 'fractalpop/full'highlight('const ready = true') // TypeScript by defaulthighlight('print("hi")', { lang: 'python' }) // canonical namehighlight(styles, { lang: lang('yml') }) // yml -> yamlAll languages 32
Rules of engagement
Function over form
@fractalpop/svelte ships <Highlight>, <Code>, <Editor> and <FileTree> — every code block on this site is
rendered by them. Open the component sheet →
<script> import { Highlight } from '@fractalpop/svelte'</script><Highlight code={source} lang="sass" highlightLines={[2, 3]} />Scalable by Default
Set token colours with scoped CSS variables, use the themes you have and like, with cx for emphasis -
Tailwind-friendly, no selectors needed.
highlight(code, { lang: 'sass', cx: { keyword: 'font-bold', comment: 'italic' },})Same tokens outside components
@fractalpop/mdsvex highlights fences in .svx; @fractalpop/remark does the same for .md and .mdx. Read more on Github.
import { fractalpopHighlighter } from '@fractalpop/mdsvex'// svelte.config.js — highlights fences in .svxmdsvex({ highlight: { highlighter: fractalpopHighlighter } })Benchmarks and WebGPU Experimental
Async, language-agnostic highlighting, with or without gpu-lexer.