Задача: Подсвечивать HTML-синтаксис внутри textarea при редактировании. Например, у нас есть поле texarea содержащее некий HTML-код подлежащий редактированию, и мы хотим подсвечивать (разукрасить) синтаксис для удобства.
Решение: Воспользуемся CodeMirror — замечательным текстовым редактором, реализованным на JavaScript. Все что нам необходимо сделать — это скачать последнюю версию библиотеки с официального сайта, или из GitHub репозитория, и положить файлы в /css и /js директории на сервере, соответственно.
Подключение и использование происходит следующим образом:
<link href="/css/codemirror.css" rel="stylesheet">
...
<textarea id='my-textarea'>
<p>some THTML in textarea for syntax <i>highlighting</i></p>
</textarea>
...
<script src="/js/codemirror.js"></script>
<script src="/js/mode/xml.js"></script>
<script type="text/javascript">
CodeMirror.fromTextArea(document.getElementById('my-textarea'), { mode: 'xml', lineNumbers: true })
</script>