JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<!-- import -->


<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.css" />


<script>
  var require = {
    paths: {
      vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs'
    }
  };

  window.MonacoEnvironment = {
    getWorkerUrl: () => proxy
  };


  let proxy = URL.createObjectURL(new Blob([`self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/' };
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/base/worker/workerMain.js');`], {
    type: 'javscript'
  }));

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.nls.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.js"></script>


<!-- Main -->



<xmp class='me-viwer' lang='html' id='sample1' style='width:100%;height:400px'>
  
  <html>
  
  <div style='width:70%;height:100px;padding:5px;background-color:#262626;color:white'>
  
  
  <span style='font-size:20px'>測試一下<br>測試一下<br>測試一下<br></span>
  
  </div>
  
  <script>alert('test');</script>
  
  </html>
 
</xmp>



<xmp class='me-viwer' lang='javascript' id='sample2' style='margin-top:50px;width:100%;height:100px'>
  
 var str=JSON.parse('{\"foo\":\"data\"}');
 
</xmp>

JavaScript

function htmlencode(s) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  return div.innerHTML;
}


function RenderMonaco() {

  $(".me-viwer").each(function(index) {
    var source = $(this).html();
    var styleSource = $(this).attr('style');
   var lang=$(this).attr('lang');
    var id = $(this).attr('id');
    console.log(id);
    $(this).replaceWith("<div id='"+id+"' style='"+styleSource+"'></div>" );
   
   var editor = monaco.editor.create(document.getElementById(id), {
         language: lang,
         theme: 'vs-dark',
         tabCompletion: 'on',
         cursorSmoothCaretAnimation: true,
         formatOnPaste: true,
         mouseWheelZoom: true,
         autoClosingBrackets: "always",
         autoClosingOvertype: "always",
         autoClosingQuotes: "always",
         automaticLayout: "always",
         readOnly: true
			 });
    
    
    editor.setValue(source);
    //console.log($(this).html());
    //console.log(index + ": " + $(this).text());
  });

}

RenderMonaco();