JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<!-- CodeMirror-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/vbscript/vbscript.js"></script>

<!-- import theme-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/dracula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/duotone-light.min.css" rel="stylesheet" />

<!-- hint -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/javascript-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/xml-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/html-hint.js">


</script>


<!-- formatting -->
<script src="https://codemirror.net/2/lib/util/formatting.js"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>




<!-- CONTENT -->
<!--最後拿來顯示code 的 -->
<code id="showCode"></code>

<button type="button" id="btnTheme1">theme draucla</button>
<button type="button" id="btnTheme2">theme duotone-light</button>

<textarea id="txtCode" style="width: 100%"></textarea>

CSS

.CodeMirror {
    border: 1px solid #eee;
    height: auto;
  }

  .CodeMirror-scroll {
    overflow-y: hidden;
    overflow-x: auto;
  }

JavaScript

//Init Code Mirror
var mixedMode = {
  name: "htmlmixed",

  scriptTypes: [{
      matches: /\/x-handlebars-template|\/x-mustache/i,
      mode: null
    },
    {
      matches: /(text|application)\/(x-)?vb(a|script)/i,
      mode: "vbscript"
    }
  ]
};


var editor = CodeMirror.fromTextArea(document.getElementById("txtCode"), {
  //語言偵測用混和模式
  mode: mixedMode,
  //開啟行號
  lineNumbers: true,
  //選取游標
  selectionPointer: true,
  //過長自動換行
  lineWrapping: true,
  viewportMargin: Infinity,
  autohint: true,
  extraKeys: {
    "Alt-Right": "autocomplete"
  },
});

//Chnage Theme Event 
$('#btnTheme1').click(function() {
  editor.setOption("theme", 'dracula');
});

$('#btnTheme2').click(function() {
  editor.setOption("theme", 'duotone-light');
});