logo svelte /markdown v1.8.2
FIG-001/ DEFAULT

default headings.

Stock headings — each gets an id derived from its text (so #getting-started works in the URL), but there’s no visible anchor link.

  • Every heading already gets an id derived from its text via github-slugger. The URL #getting-started jumps to that heading.
  • There's just no visible anchor link — readers can't deep-link by clicking. The next two FIGs add that affordance.
↩ all examples
override · none mode · live running source

Linked Headings Demo

Getting Started

Headings rendered by svelte-markdown include id attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

Installation

Install the package with your preferred package manager:

pnpm add @humanspeak/svelte-markdown

Configuration

Configure the component with your markdown source and any options you need.

Basic Usage

Import and use the component in your Svelte file.

Advanced Topics

Custom Slug Functions

You can provide a custom slug function for full control over heading IDs.

Nested Heading Example

This is a deeply nested heading to show all levels work correctly.

category · default
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ RENDERER

custom renderer.

A dedicated LinkedHeading.svelte component replaces the default heading renderer via renderers={{ heading: LinkedHeading }}. Best when the override has its own state, or you want to reuse it across pages.

  • Pass renderers={{ heading: LinkedHeading }} and your component receives the heading depth + text + raw HTML.
  • Best when the override has its own state (clipboard copy, scroll-spy) or needs to be reused across multiple pages.
↩ all examples
override · component mode · live running source

Linked Headings Demo

Getting Started

Headings rendered by svelte-markdown include id attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

Installation

Install the package with your preferred package manager:

pnpm add @humanspeak/svelte-markdown

Configuration

Configure the component with your markdown source and any options you need.

Basic Usage

Import and use the component in your Svelte file.

Advanced Topics

Custom Slug Functions

You can provide a custom slug function for full control over heading IDs.

Nested Heading Example

This is a deeply nested heading to show all levels work correctly.

category · renderer
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ SNIPPET

snippet override.

An inline {#snippet heading()} block adds a hover-reveal # anchor right at the call site. Best for one-off tweaks that don’t earn their own component file.

  • {#snippet heading({ depth, text })} renders right at the call site — no separate file or props passing required.
  • Best for one-off layout tweaks per page. The hover-reveal # anchor here is just a few lines of inline template.
↩ all examples
override · inline snippet mode · live running source

Linked Headings Demo #

Getting Started #

Headings rendered by svelte-markdown include id attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

Installation #

Install the package with your preferred package manager:

pnpm add @humanspeak/svelte-markdown

Configuration #

Configure the component with your markdown source and any options you need.

Basic Usage #

Import and use the component in your Svelte file.

Advanced Topics #

Custom Slug Functions #

You can provide a custom slug function for full control over heading IDs.

Nested Heading Example #

This is a deeply nested heading to show all levels work correctly.

category · snippet
sheet · sheet 03 / 03
⟳ to re-run

Linked Headings