Created
July 25, 2023 13:56
-
-
Save rpaul-stripe/fb0a51c41baec931cb36e3301d6765b2 to your computer and use it in GitHub Desktop.
Example that demonstrates how to add a caption to a table in Markdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Markdoc from "@markdoc/markdoc"; | |
const config = { | |
tags: { | |
table: { | |
slots: { | |
caption: { render: false }, | |
}, | |
transform(node, config) { | |
if (node.children[0]?.type !== "table") return; | |
const [table] = node.transformChildren(config); | |
if (node.slots.caption) | |
table.children.unshift(new Markdoc.Tag("caption", {}, [ | |
node.slots.caption.transform(config) | |
])); | |
return table; | |
}, | |
}, | |
}, | |
}; | |
const content = ` | |
# Testing | |
This is a test | |
{% table %} | |
{% slot "caption" %} | |
This is a caption | |
{% /slot %} | |
- Column 1 | |
- Column 2 | |
- Column 3 | |
--- | |
- Foo | |
- Bar | |
- Baz | |
{% /table %} | |
`; | |
const ast = Markdoc.parse(content, {slots: true}); | |
const output = Markdoc.transform(ast, config); | |
const html = Markdoc.renderers.html(output); | |
console.log(html); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@benrudolphWSP update to add slots to the next.js plugin is incoming: markdoc/next.js#31 After that lands, you can add
slots: true
to your tokenizer options innext.config.js
to make this work