JSFiddle - React, Tailwind, and code Playground

by Amatewasu

JavaScript

function markdownToHtml (md){
    md = md.replace(/\*{2}(.+?)\*{2}/g, '<b>$1</b>'); // **abc** -> <b>abc</b>
    md = md.replace(/\_{2}(.+?)\_{2}/g, '<b>$1</b>'); // __abc__ -> <b>abc</b>
    
    md = md.replace(/\*(.+?)\*/g, '<i>$1</i>'); // *abc* -> <i>abc</i>
    md = md.replace(/\_(.+?)\_/g, '<i>$1</i>'); // _abc_ -> <i>abc</i>

    md = md.replace(/\`(.+?)\`/g, '<pre>$1</pre>'); // `abc` -> <pre>abc</pre>

    var lines = md.split("\n");
    for (var i = 0; i < lines.length; i++){ // blockcode -> <pre>blockcode</pre>
        if (lines[i][0] === " " && lines[i][1] === " " && lines[i][2] === " " && lines[i][3] === " "){
            lines[i] = "<pre>"+ lines[i];
            for (var j = i + 1; j < lines.length; j++){
                if (!(lines[j][0] === " " && lines[j][1] === " " && lines[j][2] === " " && lines[j][3] === " ")){
                    lines[j - 1] += "</pre>";
                    i = j + 1;
                    break;
                }
            }
        } else if (lines[i][0] === ">" && lines[i][1] === " "){
            lines[i] = "<blockquote>"+ lines[i];
            for (var j = i + 1; i < lines.length; j++){
                if (!(lines[j][0] === ">" && lines[j][1] === " "){
                    lines[j - 1] += "</blockquote>";
                
        }
    }
    
    
    
    return md;
}

alert(markdownToHtml("*lol* _foo_ **bar** __baz__"));