Markdown Extensions
Dok comes with loads of useful extensions to make your markdown dynamic.
#Code Group
The Code Group extension wraps fenced code blocks and gives them extra abilities like titles, collapsing, and tabbed content. Just like what you see in this documentation.
#Tabs
To create tabbed content, nest multiple fenced code blocks inside a :::codegroup.
:::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.
{title="site.css"}
```css
.pop {
color: red;
}
```
#Collapsing
Create expandable code by using the collapse="true" attribute.
{collapse="true"}
```css
header {
margin: 20px;
background:blue;
}
```
#Auto Grouping
This extension automatically finds fenced code blocks and tells them to behave like code groups. This means no extra markup is required if you just want to display the code language and copy code button.
You can turn this off in the config:
'code_group' => [
'auto_group' => false
],
If you want to disable just 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 little extension wraps your table blocks in a couple of HTML elements, giving a little more control over the styles. Dok already adds some useful styles, and enables overflowing for tables.
<div class="markdown-table-wrapper">
<div class="markdown-table-wrapper-inner">
<table>
...
</table>
</div>
</div>
It is enabled by default.
#Heading Permalinks
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.
# Shopping list
[TOC]
## Fruits
- Banana
- Kiwi
- Apple
This is initiated inside of AppServiceProvider.php and its config is managed at config/statamic/markdown.php.