Dummy code hightlighter

by Vladimir

HTML

<textarea>var i = 0;
function factorial(n) {
    if(n = 1) {
        return 1; // базовый случай, когда углубляться дальше не надо
    } else {
        return n * factorial("arc");
    }
}
alert(factorial(6));</textarea>
<button>generate</button>
<div class="result">
  
</div>

CSS

textarea {
  width: 100%;
  height: 300px;
}
button {
  display: block;
  width: 300px;
  height: 30px;
}

.result {
  background: #000;
  color: #FFF;
  font-family: "Monroe", monospace;
}
.key {
  color: #66D9EF;
}
.var {
  color: #F92672;
}
.string {
  color: #edff00;
}
.comment {
  color: #888;
}
.green {
  color: #0F0;
}
.orange {
  color: #0FF;
}

JavaScript

$('button').on('click', function() {
	var code = $('textarea').val();
  code = code.replace(/^[^\/]."([^"]+)"/gi, '<span class="string">"$1"</span>');
  code = code.replace(/\/\/(.*)?$/gm, '<span class="comment">// $1</span>');
  code = code.replace(/\n/g, '<br />');
  code = code.replace(/\t|\s{4}/g, '&nbsp; &nbsp; ');
  code = code.replace(/(function) ([^\(]+)[(]([^)])[)]/g, '<span class="key">$1</span> <span class="green">$2</span>(<span class="orange">$3</span>)');
  code = code.replace(/((var))/g, '<span class="key">$1</span>');
  code = code.replace(/((return)|(if)|(else))/g, '<span class="var">$1</span>');
  $('.result').html(code);
});
$('button').click();