reactjsmarkdownreact-markdown

how to convert markdown to html?

I want to convert a string (as markdown) to html. There are other libraries like react-markdown But libraries like this are meant to render the markdown as

<ReactMarkdown  children={input} />

The above is a react element. I dont want to render it . I just want a function which converts the markdown to pure html. Something like

let markdown="#hello";
let html=convertMarkdownToHtml(markdown);

Is there anything that can do that?

Solution

  • So, I've used the react-showdown package for one of my projects.

    There is actually one that's meant for pure JavaScript which can store the HTML in a variable as text. It's showdown.

    From the docs, the simple example provided is this:

    var converter = new showdown.Converter(),
    text      = '# hello, markdown!',
    html      = converter.makeHtml(text);

    The output is equal to

    <h1 id="hellomarkdown">hello, markdown!</h1>

    I've included a runnable example for you, below.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
    <title>Document</title>

    <script>
        var converter = new showdown.Converter(),
            text      = `
# hello, markdown!

- list1
- list2
- list3
            `,
            html      = converter.makeHtml(text);

        console.log(html);
    </script>
</head>
<body>
    
</body>
</html>