1. Markdown
  2. Extensions

Markdown

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 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.

md 
        [[toc]]

GitHub Tables

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

Admonitions

Note

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

This is a note.

Info

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

This is informational.

Tip

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

This is a tip.

Warning

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

This is a warning.

Danger

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

This is dangerous.

Experimental

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

This is experimental.

Emojis

You can find a list of all available emojis here.

md 
        Emojis are awesome :tada:

Emojis are awesome 🎉

Yes/No

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

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

You should do this.

You should NOT do this.

Steps

md 
        :::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;
```

!!!

:::

  1. Step 1

    This is a description for step 1.

            const step = 1;

  2. Step 2

    This is a description for step 2 with markdown syntax code.

            const step = 2;

Vertical Orientaton

md 
        :::steps

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

```js
const step = 1;
```

!!!

:::

  1. Step 1

    This is a description for 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;
```
file.js 
        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;
```
js 
        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() {
  // ...
}
```
js 
        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
```
terminal 
        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() {
  // ...
}
```
js 
        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() {
  // ...
}
```
file.js 
        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)
Previous <- Components
Next Deploying ->