Как подсветить 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);
      }
  }
?>