JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/4.1.1/markdown-it.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/2.4.1/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/highlight.js/8.4.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.4.0/styles/solarized_light.min.css">
<textarea class="editor">***sample texte*** 
fgfdgfd 
    
```` js 
var x = function(){ } 
````</textarea>
<div class="preview"></div>
<div class="result-src-content"></div>

CSS

.editor, .preview {
    border:solid 1px black;
    padding:5px;
    min-height:100px;
    box-sizing: border-box;
}
.editor {
    width:100%
}

JavaScript

(function ($) {
    "use strict";

    var mdHtml;
   
    mdHtml = window.markdownit('commonmark', {
    highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (__) {}

    return ''; // use external default escaping
  }});
    

    function updateResult() {
        var source = $(".editor").val();
        
        $('.preview').html(mdHtml.render(source));
    }

   
    
    $(function () {
        $('.editor').on('keyup paste cut mouseup', _.debounce(updateResult, 300, {
            maxWait: 500
        }));
        updateResult();
    });
})(jQuery);