JSFiddle - React, Tailwind, and code Playground

by dgtlmonk

HTML

<div class='markdownText'>
# Hello There
This is [an example](http://www.digitalmonkstudio.com/ "I'm the title") of an inline link.
    
### Define a list below
    
+ Get milk
+ Buy food
    
This is paragraph text with some **bold** or some _italics_ how about _**both**_ ?   
</div>
**Code** block below:
<pre>
    <code>
    var pattern = /a href=/g;  
    var el = document.querySelector('.markdownText');
    var converter = new Showdown.converter();           
    var rawMarkdown = converter.makeHtml(el.innerHTML);            
    var htmlText = rawMarkdown.replace(pattern,"a target='_blank' href=");
    </code>
</pre>

CSS

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css" /> 
<style>
pre {
background-color: #f8f8f8;
border: 1px solid #ddd;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
code {
    color:green;
}
li {
    list-style-type: disc;
    list-style-position: inside;
    padding: 0 12px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

JavaScript

$(document).ready(function(){
    // make sure we do not change 'href' in <pre> tags
    var pattern = /a href=/g;  
    var el = document.querySelector('.markdownText');
    var converter = new Showdown.converter();           
    var rawMarkdown = converter.makeHtml(el.innerHTML);            
    var htmlText = rawMarkdown.replace(pattern,"a target='_blank' href=");
    
    el.innerHTML = htmlText;      
});