Как подсветить html синтаксис в 1c-Битрикс во вкладках "Анонс" и "Подробно"

Оцените, как теперь отличается размеченная статья от той, что сверстана в редакторе битрикса без каких-либо доработок. Красота?

Базовый текстовый редактор 1с-Битрикс

Текстовый редактор с подсветкой от codemirror

Обратите внимание на комментарии в коде. С их помощью я старался пояснить подробнее места, которые могут вызвать вопросы или требовать правок под ваш конкретный сайт.

    	
<?php
  // Нам нужно редактировать только текстовые редакторы "Анонс" и "Подробно", поэтому подключим codemirror только в файле, который отвечает за интерфейс редактирования инфоблока 
  if ($_SERVER['SCRIPT_NAME']=="/bitrix/admin/iblock_element_edit.php")
  {

	  //Добавляем обработчик события
	  AddEventHandler("main", "OnEpilog", "InitPHPHighlight");
	  function InitPHPHighlight()
	  {
		global $APPLICATION;
		// сохраним путь до папки библиотеки в переменную для удобства
		$path = '/local/templates/main/assets/codemirror';
		// сформируем строку, которую потом добавим в head
		$string='
		// основные стили и скрипты библиотеки 
		<link rel="stylesheet" href="'.$path.'/lib/codemirror.css">
		<script src="'.$path.'/lib/codemirror.js"></script>

		// Codemirror умеет подсвечивать синтаксис разных языков программирования.
		// Нам нужно подсвечивать html, для этого подключаем эти 4 файла
		<script src="'.$path.'/mode/htmlmixed/htmlmixed.js"></script>
		<script src="'.$path.'/mode/xml/xml.js"></script>
		<script src="'.$path.'/mode/javascript/javascript.js"></script>
		<script src="'.$path.'/mode/css/css.js"></script>

		// Если не подключить этот скрипт, подсветка появится только после клика по полю редактора
		<script src="'.$path.'/addon/display/autorefresh.js"></script>

		// Немножко вмешиваемся в стили. В битриксе почему-то по умолчанию текст будет по центру, а нам нужно по левому краю
		<style>
		  .CodeMirror pre.CodeMirror-line,
		  .CodeMirror pre.CodeMirror-line-like {
			  text-align: left;
		  }
		</style>

		// Инициируем библиотеку
		<script>
		BX.ready(function(){
		  Codemirror_Init();
		});
		function Codemirror_Init() {

		  function cmEditor(textarea) {

			  CodeMirror.fromTextArea(textarea, {
				  lineNumbers: true,
				  autoRefresh: true,
				  matchBrackets: true,
				  mode: "htmlmixed",
				  indentUnit: 2,
				  indentWithTabs: false,
				  tabMode: "indent",
				  enterMode: "indent",
				  lineWrapping: true,
				});

		  }

		  let taList = document.getElementsByTagName("textarea");
		  // Нам не нужны все поля типа textarea, мы хотим подсветку только в "Анонс" и "Подробно"
		  // Поэтому указываем только их. Если не указать, будет подключено для всех textarea (кстати, для кого-то такой сценарий подойдет)
		  let fields = [
			  "PREVIEW_TEXT",
			  "DETAIL_TEXT"
		  ];

		  for(let i = 0;i < taList.length; i++)
		  {
			  if (fields.some(v => taList[i].id.includes(v))) {
				  cmEditor(taList[i]);
			  }

		  }

		}
		</script>';     

		// Добавляем нашу строку со стилями и скриптами в head
		$APPLICATION->AddHeadString($string);
	  }
  }
?>