vue-markdown
vue-markdown copied to clipboard
How to customize replaced elements
In react-markdown I can custom any element replacement, for example:
export const renderers = Object.assign({}, ReactMarkdown.renderers, {
Heading: function Heading(props: any) {
if (!props.children[0])
return (ReactMarkdown.renderers as any).Heading(props);
const id = props.children[0]
.replace(new RegExp(" ", "g"), "-")
.replace(new RegExp("\\?", "g"), "")
.toLowerCase();
switch (props.level) {
case 1:
return <h1 id={id}>{props.children[0]}</h1>;
case 2:
return <h2 id={id}>{props.children[0]}</h2>;
case 3:
return <h3 id={id}>{props.children[0]}</h3>;
case 4:
return <h4 id={id}>{props.children[0]}</h4>;
case 5:
return <h5 id={id}>{props.children[0]}</h5>;
case 6:
return <h6 id={id}>{props.children[0]}</h6>;
}
}
});
This particular example for an instance allows me to put ids into headers, just like what github does on its own md files renderer. How do I do same using vue-markdown?