<?php
//блокируем выполнения файла в случае открытия по прямой ссылке на всякий случай
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}

use \Bitrix\Main\Localization\Loc;

return array(
  //общее описание блока
    'block' => array(
   	 'name' => 'Подсветка синтаксиса', //название нашего блока в конструкторе
   	 'section' => array('other'), //категория в конструкторе
    ),
  //описание нодов блока
    'nodes' => array(
	//селектор элемента
   	 '.landing-block-node-code' => array(
   		 'name' => 'Код', //название параметра для редактирования в конструкторе
   		 'type' => 'text', //тип параметра, в нашем случае простой текст
   	 ),
    ),
  //описание возможных стилей нодов блока
    'style' => array(
	//у нас нет специфических настроек, лишь дефолтные для всего блока в целом
   	 'block' => array(
   		 'block-default',
   	 ),
	/*
	Вообще, после блока 'block' может находиться блок 'nodes',
	где так же как и для описания нодов пишется селектор,
	и далее описываются какие стили могут быть изменены в конструкторе вплоть до анимации появления */
    ),
  //описание возможных атрибутов
    'attrs' => array(
   	 '.landing-block-node-code-container' => array(
   		 'name' => 'Язык', //название параметра для редактирования в конструкторе
   		 'type' => 'dropdown', //тип параметра, у нас выпадашка, ниже описаны варианты
   		 'attribute' => 'data-language', //название атрибута
   		 'items' => array(
   			 array('name' => 'Авто', 'value' => 'auto'),
   			 array('name' => 'html', 'value' => 'xml'),
   			 array('name' => 'bash', 'value' => 'bash'),
   			 array('name' => 'php', 'value' => 'php'),
   			 array('name' => 'javascript', 'value' => 'javascript'),
   			 array('name' => 'css', 'value' => 'css'),
   			 array('name' => 'json', 'value' => 'json'),
   			 array('name' => 'sql', 'value' => 'sql'),
   		 ),
   		 'value' => 'auto', //значение по умолчанию
   	 )
    ),
  //сторонние подключения
  /*
  В апи Битрикса написано, что в папке с блоком можно разместить файлы script.js/style.css, которые подгружаются с блоком, но я не рекомендую так делать,
  потому что при каждом изменении этих файлов придется перерегистрировать блок
  (обновлять кэш и удалять его с шаблона и ставить заново),
  чего лишен вариант указать наши файлы стиля и js в этом блоке,
  так как указанные таким способом модули подгружаются на страницу методом BX.loadScript,
  из-за чего не кэшируются, т.е. их можно обновлять "на ходу".
  В нашем случае используется локальная директория local со всеми файлами проекта, которые можно вынести.
  */
    'assets' => array(
   	 'css' => array(
   		 'https://bambit.ru/local/blocks/highlight/default.min.css', 'https://bambit.ru/local/blocks/highlight/github-dark.css',
   	 ),
   	 'js' => array(
   		 'https://bambit.ru/local/blocks/highlight/highlight.min.js', 'https://bambit.ru/local/blocks/highlight/highlightjs-copy.min.js', 'https://bambit.ru/local/blocks/highlight/main.js',
   	 ),
   	 'ext' => array(
   		 'landing_form',
   	 ),
    ),
);

<section class="landing-block g-pt-auto g-pb-auto">

	<div class="landing-block-node-code-container js-animation fadeIn landing-semantic-text-medium g-pb-1 container g-max-width-container g-color g-font-weight-400 g-font-size-18" style="display: flex;">

		<pre><code class="landing-block-node-code"></code></pre>

	</div>

</section>

document.addEventListener('DOMContentLoaded', function () {

	hljs.addPlugin(new CopyButtonPlugin({

		lang: 'ru',

	}));

	document.querySelectorAll('div.landing-block-node-code-container').forEach((elem) => {

		let language = elem.getAttribute('data-language');

		elem.querySelectorAll('pre code').forEach((el) => {

			el.querySelectorAll('br').forEach((br) => {

				br.remove();

			});

			if (language !== 'auto') {

				el.classList.add('language-' + language);

			}

			hljs.highlightElement(el);

		});

	});

});