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.