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');
});



           function format() {
                var totalLines = editor.lineCount();
                editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
                editor.focus();
                editor.setCursor({ line: totalLines, ch: 0 });
            }


            var isKClick = false;
            //判斷鍵盤起來的事件
            editor.on("keyup", function (cm, event) {
                var key = undefined;
                var possible = [event.key, event.keyIdentifier, event.keyCode, event.which];

                while (key === undefined && possible.length > 0) {
                    key = possible.pop();
                }


                if (!cm.state.completionActive && (
                    event.keyCode == 32 || event.keyCode == 9)) {
                    CodeMirror.commands.autocomplete(cm, null, { completeSingle: false });
                }

                //如果是Ctrl 鍵就回傳
                if (key && (event.ctrlKey || event.metaKey) && !(event.altKey)) {
                    event.preventDefault();
                    return false;
                }
                //用來判斷是不適先按下了 K
                isKClick = false;

            });


            //判斷鍵盤按下後，如果是K就將isKClick設成true 之後按下 D 就進行整理程式碼
          ...