JSFiddle - React, Tailwind, and code Playground

by tivie

HTML

<textarea id="sourceTA" rows="10" cols="82">
Showdown Tutorial
=================

This is a showdown tutorial. 

Showdown supports a number of cool features, namely:

  - headers 
  - lists
  - and other stuff too
  
It is also possible to include code:

    var foo = 'bar';
    
    var baz = {
      markdown: 'is great',
      showdown: 'is awesome'
    }

Don't forget to check the [extensions wiki][1].

[1]: https://github.com/showdownjs/showdown/wiki/extensions
</textarea>
<hr/>
<button id="runBtn" onClick="run()">Convert</button>
<hr/>
<div id="targetDiv"></div>

<script src="https://cdn.rawgit.com/showdownjs/showdown/1.0.1/dist/showdown.min.js"></script>

CSS

#sourceTA {
    display: block;
}
#targetDiv {
  border: 1px dashed #333333;
  width: 600px;
  height: 400px;
}

JavaScript

function run() {
  var text = document.getElementById('sourceTA').value,
      target = document.getElementById('targetDiv'),
      converter = new showdown.Converter(),
      html = converter.makeHtml(text);
    
    target.innerHTML = html;
}