miaolz123 / vue-markdown

A Powerful and Highspeed Markdown Parser for Vue
https://miaolz123.github.io/vue-markdown/
MIT License
1.89k stars 257 forks source link

How to customize replaced elements #42

Open pleerock opened 6 years ago

pleerock commented 6 years ago

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?