COMPONENTS / SSR-SAFE & ZERO HYDRATION

SvelteKit

Present, edit, and browse highlighted code with Editor, Code, and FileTree components. All three produce identical server and client markup, so nothing is re-rendered on hydration.

01 /

Editor Component

A controlled, highlighted editor with line numbers and Tab-to-indent. Type in it — the highlight updates live.

Sveltekit · light

 1function greet(name) {2  // try editing me — Tab indents3  return `Hi ${name}`4}
function greet(name) {
  // try editing me — Tab indents
  return `Hi ${name}`
}

02 /

File Tree Component

An accessible tree (arrow keys, type-ahead) that infers folders from flat paths. Compose it with <Code> to browse files.

src

lib

Card.svelte

button.ts

routes

+page.svelte

app.sass

README.md

package.json

1<script>2  import { Highlight } from '@fractalpop/svelte'3  let { source } = $props()4</script>56<Highlight code={source} lang="sass" />

03 /

Code Component

Read-only presentation with optional line numbers and marked lines. Line 3 is highlighted here.

1// project card2$brand: hsl(212, 90%, 55%)34.card5  color: $brand6  &:hover7    background: darken($brand, 8%)

API details

<Code />

PropType / defaultPurpose

codestring · ''Source to highlight.

langstringLanguage id or alias — 'sass', 'ts', 'python' …

themeThemeA palette, or a { light, dark } pair rendered with light-dark().

titlestring | null · nullFilename shown in the header.

controlsboolean · falseShow the three header dots.

lineNumbersboolean · falseShow one-based line numbers.

lineNumbersWidthstring · '2.5rem'Gutter width.

highlightLines(number | [number, number])[] · []Lines and inclusive ranges to mark.

startingLineNumbernumber · 1First line number.

wrapLongLinesboolean · trueWrap rather than scroll long lines.

paddingstring · '1rem'Content and header spacing.

fontSizestring | numberCode font size; a number is treated as px.

cx / mark / markLineDisplayOptionsPer-token and per-line customization.

class / stylestringForwarded to the root element.

<Editor />

PropType / defaultPurpose

valuestring · bindable, ''Controlled source text (bind:value).

titlestring | null · nullFilename in the header; editable when onchangetitle is set.

langstringLanguage id or alias.

themeThemeToken and component colours.

controlsboolean · trueShow the three header dots.

lineNumbersboolean · trueShow one-based line numbers.

lineNumbersWidthstringGutter width.

indentstring · ' 'Inserted on Tab; Shift+Tab outdents.

onchange(code: string) => voidRuns when the source changes.

onchangetitle(title: string) => voidSupply this to make the title editable.

fontFamily / fontSize / paddingstringEditor font and spacing.

cx / markDisplayOptionsPer-token customization.

class / stylestringForwarded to the root element.

<FileTree />

PropType / defaultPurpose

pathsreadonly string[] · requiredFlat file paths; folders are inferred.

activeFilestring | null · requiredSelected file path.

onactivefilechange(path: string) => void · requiredRuns when a file is selected.

themeThemePass the same theme as the adjacent Code.

ariaLabelstring · 'Files'Accessible name for the tree.

iconSnippet<[TreeItem]>Custom icon per item — the file icons on this page.

class / stylestringForwarded to the root element.

<Highlight />

PropType / defaultPurpose

codestring · ''Source to highlight.

langstringLanguage id or alias (from HighlightOptions).

highlightLinesnumber[] · []One-based lines to mark. Plain numbers only — no ranges.

class / codeClassstringApplied to the <pre> and its <code>.

CSS variables

VariablePurpose

--fp-<token>Colour per token type: identifier, keyword, string, class, property, entity, jsxliterals, sign, comment.

--fp-caret-colorEditor and editable-title caret.

--fp-title-colorHeader filename colour.

--fp-control-colorHeader control-dot colour.

--fp-line-number-colorLine-number colour.

--fp-line-highlight-colorHighlighted-line background.

--fp-font-familyCode, textarea, tree, and title font.

--fp-font-sizeCode and textarea font size.

--fp-paddingContent and header spacing.

--fp-line-number-widthLine-number gutter width.

04 /

Mdsvex and Remark

The same engine outside components: @fractalpop/mdsvex for .svx and .md, @fractalpop/remark for markdown anywhere else — identical tokens everywhere. Read detailed documentation at Github

import { fractalpopHighlighter } from '@fractalpop/mdsvex'mdsvex({ highlight: { highlighter: fractalpopHighlighter } })