JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/codemirror.css">
<h1>Code Demo</h1>
<div class="wrap">

<h2>Title</h2>
<div class="code_preview"></div>
<textarea class="code_content html">
<h3 class="title">타이틀</h3></textarea>


<h2>Button</h2>
<div class="code_preview"></div>
<textarea class="code_content html">
<button type="button">확인</button>
<button type="button">취소</button>
</textarea>


<h2>CSS</h2>
<textarea class="code_content css">
.wrap > h2 {
  margin: 30px 0 10px;
}
.CodeMirror {
  height:auto;
  border: 1px solid #eee;
  
}</textarea>


<h2>List</h2>
<textarea class="code_content html">
<ul>
  <li>세월이 지나가면</li>
  <li>시간이 흐르고</li>
</ul>
</textarea>

</div>

CSS

.wrap {
  margin: 30px;
}
.wrap > h2 {
  margin: 30px 0 10px;
}
.CodeMirror {
	height:auto;
  padding:10px;
	background: rgba(243, 244, 245, 1) !important;
}
.CodeMirror pre {font-size:14px;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;}
.cm-tag{color:#c92c2c;}
.cm-attribute{color: #2f9c0a !important;}
.cm-s-default .cm-string{color: #1990b8 !important}

.cm-property {color: #905;}
.cm-s-default .cm-qualifier {color: #690;}
.cm-s-default .cm-comment {color: #647281;}

.code_preview {
  padding: 10px;
  border: 1px solid #eee;
}

JavaScript

$(document).ready(function(){
  $('.code_content').each(function(index, elem){
	if($(this).hasClass('css') === true){
		var editor = CodeMirror.fromTextArea(elem, {
			mode: 'text/css',
			tabMode: 'indent',
			onChange: function() {
				clearTimeout(delay);
				delay = setTimeout(updatePreview, 300);
			}
		});
	} else if($(this).hasClass('html') === true) {
		var editor = CodeMirror.fromTextArea(elem, {
			mode: 'text/html',
			tabMode: 'indent',
			onChange: function() {
				clearTimeout(delay);
				delay = setTimeout(updatePreview, 300);
			}
		});
	}

	var $this = $(this);

	function updatePreview(index, elem) {
		if($this.prev().hasClass('code_preview') === true){
			var preview = $this.prev();
			preview.html(editor.getValue())
		}

	}
	setTimeout(updatePreview, 300);
});
})