Basic Markdown

Headings, inline formatting, links, lists, and blockquotes use semantic HTML elements.

Source

# Project notes

This paragraph has **strong text**, _emphasis_, and a [link](https://svelte.dev).

- First item
- Second item

> Markdown is rendered as semantic Svelte markup.

Output

Project notes

This paragraph has strong text, emphasis, and a link.

First item
Second item

Markdown is rendered as semantic Svelte markup.

Extended syntax

Task lists, tables, fenced code, and footnotes are supported by the parser.

Source

## Release checklist

- [x] Render task lists
- [x] Render tables
- [ ] Publish the package

| Feature          | Status |
| ---------------- | -----: |
| Server rendering |  Ready |
| Relative links   |  Ready |

```ts
import { MarkdownViewer } from 'markdown-svelte'
```

Footnote references include a return link.[^note]

[^note]: This is the footnote content.

Output

Release checklist

Render task lists
Render tables
Publish the package

Feature	Status
Server rendering	Ready
Relative links	Ready

import { MarkdownViewer } from 'markdown-svelte'

Footnote references include a return link.^note

^note

This is the footnote content.↵

Document options

This output resolves its relative link against baseUrl and prefixes generated IDs with guide.

Source

# Guide

Relative links resolve against `baseUrl`, and generated IDs use the configured prefix.

## Installation

Open the [API reference](./api) for the next step.

Output

Guide

Relative links resolve against baseUrl, and generated IDs use the configured prefix.

Installation

Open the API reference for the next step.

Style overrides

Theme variables and public node classes can be combined on the same component.

Component and CSS

<script lang="ts">
	import { MarkdownViewer } from 'markdown-svelte'
	import source from './styled.md?raw'
</script>

<MarkdownViewer markdown={source} class="custom-document" />

<style>
	:global(.custom-document) {
		--markdown-color-link: #7c3aed;
		--markdown-color-surface: #f5f3ff;
	}

	:global(.custom-document .markdown-svelte-heading--2) {
		border-bottom: 2px solid #7c3aed;
	}
</style>

Output

Custom heading

Use CSS variables for a theme and public classes for individual elements.

inline code and links inherit the custom colors.