Mini Beautify Code Editor

by Станислав Некрасов

HTML

<textarea id="code" cols="30" rows="10" class="code"></textarea>
<div class="result"></div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}

.code, .result {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-size: 32px;
  font-family: monospace;
  font-weight: bold;
  padding: 20px;
}

.code {
  background: #0f0217;
  color: #0f0217;
  caret-color: #999cff;
}

.code::selection {
  color: #0f0217;
  background: #f1c40f;
}

.result {
  color: #999cff;
  pointer-events: none;
}

.c-plus {
  color: #2ecc71;
}

.c-minus {
  color: #e74c3c;
}

JavaScript

document.querySelector('.code').addEventListener('input', e => {
	let formattedText = e.target.value
  	.replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/\n/g, '<br>')
    .replace(/-/g, '<span class="c-minus">-</span>')
    .replace(/\+/g, '<span class="c-plus">+</span>');
  console.log(formattedText);
	document.querySelector('.result').innerHTML = formattedText;
})