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.