vue-markdown icon indicating copy to clipboard operation
vue-markdown copied to clipboard

How to customize replaced elements

Open pleerock opened this issue 6 years ago • 0 comments

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?

pleerock avatar Sep 03 '17 13:09 pleerock