Extensions

In this section, we'll look at at the Markdown extensions and components available to you when writing documentation.

Header Anchors

Header tags such as # Heading 1, ## Heading 2, and so on will automatically include anchor tags. When clicked the browser will jump to that heading. Try hovering over any heading on this page and clicking the #.

Links

Links will be mapped to the correct slug and can be set in any of the following ways:

[home](/index.html)
[foo index](/foo/)
[heading](#heading)
[relative file with .md ext](../foo/bar.md)
[relative file with .html ext](../foo/bar.html)
[external](https://kitdocs.vercel.app)

Frontmatter

YAML frontmatter is supported.

---
title: Page Title
description: My awesome page description.
---

Access it via the store: {$frontmatter.description}

...

Table of Contents

The following will output a list containing all the headings on the page.

[[toc]]

GitHub Tables

| Column 1     | Column 2 |      Column 3 |
| ------------ | :------: | ------------: |
| left-aligned | centered | right-aligned |
| left-aligned | centered | right-aligned |
| left-aligned | centered | right-aligned |

Admonitions

Note

:::admonition type="note"
This is a note.
:::

:::admonition type="note" This is a note. :::

Info

:::admonition type="info"
This is informational.
:::

:::admonition type="info" This is informational. :::

Tip

:::admonition type="tip"
This is a tip.
:::

:::admonition type="tip" This is a tip. :::

Warning

:::admonition type="warning"
This is a warning.
:::

:::admonition type="warning" This is a warning. :::

Danger

:::admonition type="danger"
This is dangerous.
:::

:::admonition type="danger" This is dangerous. :::

Experimental

:::admonition type="experimental"
This is experimental.
:::

:::admonition type="experimental" This is experimental. :::

Emojis

You can find a list of all available emojis here.

Emojis are awesome :tada:

Emojis are awesome 🎉

Yes/No

:::yes
You should do this.
:::

:::no
You should NOT do this.
:::

Steps

:::steps

!!!step title="Step 1"|description="This is a description for step 1."

```js
const step = 1
```

!!!

!!!step title="Step 2"|(slot=description)=This is a description for step 2 with markdown `code`.

```js
const step = 2
```

!!!

:::

const step = 1

const step = 2

Vertical Orientaton

:::steps

!!!step title="Step 1"|description="This is a description for step 1."|orientation="vertical"

```js
const step = 1
```

!!!

:::

const step = 1

Code Fence

You can find all supported languages here.

Default

```js
const foo = 1
```

const foo = 1

Title

```js title="file.js"
const foo = 1
```

const foo = 1

Slot

```js slot="usage"
const foo = 1
```

```js slot="example"
const bar = 1
```

Terminal

```bash
npm create svelte docs
cd docs
```

npm create svelte docs
cd docs

Copy

```js copy
const foo = 1
```

const foo = 1

Line Numbers

```js lineNumbers
const foo = 1

function bar() {
	// ...
}
```

const foo = 1

function bar() {
	// ...
}

Line Highlights

You can highlight specified lines of your code blocks by adding line markers to your fenced code blocks.

• Single Line: {1}
• Line Ranges: {2-6}
• Multiple Lines: {2,4-10,12,14,16-20}

```js {1,3-5}
const foo = 1

function bar() {
	// ...
}
```

const foo = 1

function bar() {
	// ...
}

Copy Highlight

```js copyHighlight{3-5}
const foo = 1

function bar() {
	// ...
}
```

const foo = 1

function bar() {
	// ...
}

Copy Steps

This will step through the code line by line, highlight it and copy it. Each time you tap the copy button it'll move to the next line.

```bash copySteps
npm create svelte docs
cd docs
npm i
```

npm create svelte docs
cd docs
npm i

Copy Highlight Steps

This will step through each of the highlighted ranges and copy them one by one. Each time you tap the copy button it'll move to the next highlighted range.

```js copySteps{1,3-5}
const foo = 1

function bar() {
	// ...
}
```

const foo = 1

function bar() {
	// ...
}

Multiple Options

Provide multiple options by separating them with a vertical bar |:

```js title="file.js"|copy|lineNumbers{1,3-5}
const foo = 1

function bar() {
	// ...
}
```

const foo = 1

function bar() {
	// ...
}

Imported Code Fence

You can import code blocks from files with the following syntax:

@[code](../foo.js)

If you want to partially import the file:

@[code{1-10}](../foo.js)

The code language is inferred from the file extension, however, you can specify it like so:

@[code js](../foo.js)

In fact, the second part inside the [] will be treated as the mark of the code fence, so it supports all the syntax mentioned above:

@[code js|title=file.js|copy{2,4-5}](../foo.js)