# Linked Headings
> Add clickable anchor links to markdown headings with @humanspeak/svelte-markdown using default output, a custom heading renderer, or Svelte 5 snippets.
**Source:** [https://markdown.svelte.page/examples/linked-headings](https://markdown.svelte.page/examples/linked-headings)
**Markdown mirror:** [https://markdown.svelte.page/examples/linked-headings.md](https://markdown.svelte.page/examples/linked-headings.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `DEFAULT` | override: `none`
### Notes
- 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.
### Source
#### DefaultHeadings.svelte
Source file: [src/lib/examples/linked-headings/demos/DefaultHeadings.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/linked-headings/demos/DefaultHeadings.svelte)
```svelte
```
## FIG-002: 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.
**Metadata:** tag: `RENDERER` | override: `component`
### Notes
- 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.
### Source
#### RendererHeadings.svelte
Source file: [src/lib/examples/linked-headings/demos/RendererHeadings.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/linked-headings/demos/RendererHeadings.svelte)
```svelte
```
#### LinkedHeading.svelte
Source file: [src/lib/examples/linked-headings/demos/LinkedHeading.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/linked-headings/demos/LinkedHeading.svelte)
```svelte
{@render children?.()}
{#if id}
🔗
{/if}
```
## FIG-003: 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.
**Metadata:** tag: `SNIPPET` | override: `inline snippet`
### Notes
- `{#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.
### Source
#### SnippetHeadings.svelte
Source file: [src/lib/examples/linked-headings/demos/SnippetHeadings.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/linked-headings/demos/SnippetHeadings.svelte)
```svelte
{#snippet heading({ depth, text, slug, options, children })}
{@const id = options.headerIds ? options.headerPrefix + slug(text) : undefined}
{@render children?.()}
{#if id}
#
{/if}
{/snippet}
```