Skip to main content
Home
  • Markdown
  • Extensions

Markdown Extensions

Dok comes with a handful of extensions to make your markdown more dynamic.

#Code Group

The Code Group extension wraps fenced code blocks, adding titles, collapsing, and tabbed content - just like you see in this documentation.

#Tabs

To create tabbed content, nest multiple fenced code blocks inside a :::codegroup.

markdown 
:::codegroup
```css
header {
    margin: 20px;
    background: blue;
}
```

```css
header {
    margin: 20px;
    background: red;
}
```
:::

#Title

You can change the title/tab label by using the title="value" attribute. The default label will be the language you specify.

markdown 
{title="site.css"}
```css
.pop {
    color: red;
}
```

#Collapsing

Create expandable code by using the collapse="true" attribute.

markdown 
{collapse="true"}
```css
header {
    margin: 20px;
    background: blue;
}
```

#Auto Grouping

This extension automatically finds fenced code blocks and turns them into code groups. This means no extra markup is needed for the language label and copy button.

You can turn this off in the config:

config/statamic/markdown.php 
'code_group' => [
    'auto_group' => false
],

To disable it for a single code fence, add the codegroup="false" attribute:

{codegroup="false"}
```css
.pop {
    color: red;
}
```

#Examples

Tabs:

function calculateSum(a, b) {
    let sum = a + b;
    console.log(`The sum of ${a} and ${b} is ${sum}`);
    return sum;
}

Tabs + collapse:

async function getSpaceData() {
    try {
        const res = await fetch('/api/space');
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

#Table Wrap

This neat extension wraps your table blocks in a couple of HTML elements, giving more control over styling. Dok already adds some useful styles and enables overflowing for tables.

html 
<div class="markdown-table-wrapper">
    <div class="markdown-table-wrapper-inner">
        <table>
            ...
        </table>
    </div>
</div>

It is enabled by default.

Dok comes with the Heading Permalink extension pre-installed.

Other extensions and features rely on this extension. Changing its config or disabling the extension can cause unintended consequences.

#Table of Contents

Dok comes with the Table of Contents extension pre-installed.

Write [TOC] to display the table of contents.

code 
# Shopping list

[TOC]

## Fruits
- Banana
- Kiwi
- Apple

This is registered inside AppServiceProvider.php, and its config is managed at config/statamic/markdown.php.