markdown-it-codewrap v1.1.1
markdown-it-codewrap
A Markdown-It plugin to wrap custom markup around blocks of code, optionally adding a Copy button.
Options
You can customise how the wrapper renders with the following options:
Property | Type | Default |
---|---|---|
outerCustomElement | string | '' |
outerCustomElementAttrs | Object.<string, string> | {} |
wrapTag | string | 'div' |
wrapClass | string | '' |
hasToolbar | boolean | false |
toolbarTag | string | 'div' |
toolbarClass | string | '' |
toolbarLabel | string\|function | '' |
hasCopyButton | boolean | true |
isButtonInToolbar | boolean | false |
copyButtonLabel | string\|function | 'Copy code' . |
copyButtonAttrs | Object.<string, string\|function> | '' |
inlineCopyHandler | boolean\|string | true |
The toolbarLabel
, copyButtonLabel
, and property values of copyButtonAttrs
can be a function, which all have the same signature, mimicking the original renderer function:
For example, if you want to show the code language in the toolbar, you can set your options object to the following:
const codeWrapOptions = {
toolbarLabel: (tokens, idx, options, env, self) => tokens[idx].info.toUpperCase(),
};
You could also customise your Copy button:
const codeWrapOptions = {
copyButtonLabel: (tokens, idx, options, env, self) => `Copy ${tokens[idx].info.toUpperCase()} code`,
copyButtonAttrs: {
'data-copy': (tokens, idx, options, env, self) => tokens[idx].info,
},
};
If you want to wrap this into a custom element to handle all the JS logic externally while preserving the standard wrapped structure, you can use the outerCustomElement
option to provide a wrapper element like my-wrap
(a wrapper around the wrapper — must go deeper!), and you can supply attributes via the outerCustomElementAttrs
object. For example, if you wrapTag
is already provided as figure
, you could add more code around it with outerCustomElement
.