JSFiddle - React, Tailwind, and code Playground

by tivie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.1.0/showdown.js"></script>

<textarea rows="20" cols="100" id="foo">
# Yay!
this is some **markdown** text

%start%
This shoould _not_ be **parsed**!!!!!
%end%    

this is:
    
 - ok
 - to be
 - parsed
    
%start%
 - but 
 - **this**
 - is not
%end%
</textarea>

<textarea rows="21" cols="100" id="otp"></textarea>

JavaScript

showdown.extension('myExt', function() {
    var matches = [];
    return [
        { 
            type: 'lang',
            regex: /%start%([^]+?)%end%/gi,
            replace: function(s, match) { 
                matches.push(match);
                var n = matches.length - 1;
                return '%PLACEHOLDER' + n + '%';
            }
        },
        {
            type: 'output',
            filter: function (text) {
                for (var i=0; i< matches.length; ++i) {
                    var pat = '<p>%PLACEHOLDER' + i + '% *<\/p>';
                    text = text.replace(new RegExp(pat, 'gi'), matches[i]);
                }
                //reset array
                matches = [];
                return text;
            }
        }
    ]
});

var text = document.getElementById('foo').value,
    otp = document.getElementById('otp'),
    conv = new showdown.Converter({extensions: ['myExt']});

otp.value = conv.makeHtml(text);