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='monaco-viwer' lang='html' id='sample1' style='width:100%;height:299px'>
  
  <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='monaco-viwer' lang='csharp' id='sample2' style='margin-top:50px;width:100%;height:400px'>
  
 using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");    
    }
  }
}
 
</xmp>

JavaScript

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


function RenderMonaco() {

  $(".monaco-viwer").each(function(index) {

    var source = $(this).html();
    var styleSource = $(this).attr('style');
    var lang = $(this).attr('lang');
    var id = $(this).attr('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);

    setTimeout(function() {
      editor.getAction('editor.action.formatDocument').run()
      setTimeout(function() {
        editor.updateOptions({
          readOnly: true
        });
      }, 200);
    }, 1000);
  });



}

RenderMonaco();