Custom markdown fenced code block directives for Rocket
npm install rocket-preset-markdown-directivesCustom markdown fenced code block directives for Rocket
Add the preset to your rocket.config.js, and configure it with a collections object. collections is a record of collection names to tab types. For example, if you want code tabs which switch between install commands for npm, yarn, and pnpm, add the following:
``js
import { mdDirectives } from 'rocket-preset-markdown-directives';
export default {
presets: [
mdDirectives({
directives: {
// global CSS
global: (_, { node }) => ({ tagName: 'style', textContent: node.value }),
// wrap in
copy: () => ({ tagName: 'code-copy' }),
// wrap in `
mine: ([id]) => ({ tagName: 'my-el', attributes: { 'data-id': id } }),
}
}),
]
}
Directives have the form
~~~markdown
`{lang} {directive} {...args}
~~~
0. lang is the language used to syntax-highlight the code blockdirective
1. is the command specified in the directives config object....args
2. is an array of strings, which are the space-separated arguments to the directive
The functions which are the values of the config object take two arguments
1. The array of args{ node, parent, page, rocketConfig }
2. An object containing , which are either AST nodes (node and parent or config values
An example page using the above config:
~~~markdown
`css global`
/**
* This code does not appear on the page,
* Rather it is applied to the document
*/
h1 {
font-style: italic;
}
Try this snippet in your own project:
`js copy`
customElements.define('x-l', class XElement extends HTMLElement { });
`html mine something-something
You define how works and load in onto this page,data-id="something-something"
and what it does with the attribute.
~~~
Tip
This preset works well with
eleventy-plugin-add-web-component-definitions. Use it with rocket like so:``jsexport default {
presets: [
mdDirectives({ directives: {/.../} }),
],
setupEleventyPlugins: [
addPlugin({
name: 'auto-import-custom-elements',
plugin: addWebComponentDefinitions,
location: 'bottom',
options: {
quiet: true,
singleScript: true,
},
}),
adjustPluginOptions('auto-import-custom-elements', options => ({
...options,
specifiers: {
...options.specifiers,
'my-el': '/path/to/my-el.js',
},
})),
],
}