JSFiddle - React, Tailwind, and code Playground

CodeMirror testing

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js"></script>
<button id="start">Start</button>
<div id="progress"></div>
<div id="target"></div>

CSS

#progress {
  font-size: 0;
  margin: 10px 0;
  
}

#progress > span {
  display: inline-block;
  background-color: red;
  width: 1%;
  height: 10px;
}

#progress > span.ready {
  background-color: green;
}

#target {
  font-size: 0;
  text-align: justify;
}

textarea {
  box-sizing: border-box;
  display: inline-block;
  width: 1%;
  font-size: 10px;
  font-family: monospace;
}

.CodeMirror {
  box-sizing: border-box;
  display: inline-block;
  width: 1%;
}

JavaScript

var editorCount = 100;
var progress = 0;

function createTextareas() {
	var $container = $('<div></div>');
  for (var i = 0; i < editorCount; i++) {
  	$container.append($('<textarea rows="2"></textarea>'));
  }
	$('#target').html($container.html());
}

function logProgress() {
	var res = '';
	for (var i = 0; i < progress; i++) {
  	res += '<span class="ready"></span>';
  }
	for (var i = progress; i < editorCount; i++) {
  	res += '<span></span>';
  }
  $('#progress').html(res);
}

function initializeCodeMirrors() {
	$('textarea').each(function(){
    (function(el){
    	setTimeout(function(){
        CodeMirror.fromTextArea(el, {
          lineNumbers: true,
          mode: 'htmlmixed'
        });
        progress++;
        logProgress();
      }, 0);
    })(this);
  });
}

createTextareas();
logProgress();

$('#start').on('click', initializeCodeMirrors);