Подсветка синтаксиса 1С на сайте битрикс

09.02.2020

В данной статье подробно расскажем как сделать подсветку кода 1С и не только на сайте под управлением CMS Битрикс

С чего всё началось? Мы обновили наш сайт. В качестве шаблона для сайта выбрали BXReady Флагман Старт. С решениями данной компании Я лично знаком давно. Они представляют из себя "отличный конструктор" для человека, который не сильно разбирается в php и платформе Битрикс. И позволяют очень гибко настраивать дизайн сайта. Поставили сайт на хостинг, настроили, перенесли данные со старого сайта (кстати тоже интересная тема для статьи). И решили писать статьи и активно делиться своим довольно обширным опытом. Но... Хотелось как то красиво оформлять код 1С (и не только) в статьях. В принципе можно было обойтись тэгом "<pre>".

Запрос = Новый HTTPЗапрос("/private/api/auth.php?USER_LOGIN=" + Логин + "&USER_HASH=" + АПИКлюч + "&type=json");

Но это не наш метод.

После довольно продолжительного поиска выяснилось, что это можно сделать используя библиотеку highlight.js, которая как оказалось поддерживает в том числе и синтаксис 1С. Решение есть. Добрые люди написали библиотеку. Осталось понять как её правильно подключить в битрикс. Поиск на эту тему практически ничего вменяемого не дал. Ну т.е. для программеров, которые работают с битрикс возможно было бы и понятно, но как показали мои обращения в техподдержку битрикс... "Не только лишь все в этом понимают."

В процессе выяснения механизмов подключения библиотек выяснилось следующее. Библиотека highlight.js уже имеется в стандартной поставке платформы Битрикс, а конкретно она обычно располагается по адресу /bitrix/js/ui/highlightjs В принципе это собственно та самая библиотека в том виде, в котором она есть на сайте.

После чего я написал в поддержу ЦР Кузница. Задал вопрос со следующей формулировкой: Как правильно подключить эту библиотеку в Вашем решении? На что получил ответ, что поддержкой данной библиотеки занимается сам Битрикс. ОК. Я не гордый. Пишу тот же самый вопрос в техподдержку битрикс. Отгадайте какой ответ получаю. Получаю ответ, что стандартно эта библиотека работает только в админке, но как подключить к конкретному шаблону должен дать ответ автор шаблона.

После некоторых препирательств с техподдержкой Кузницы, они мне таки помогли. Бесплатно, хотя я предлагал заплатить. За что им большое спасибо.

Что они сделали?

1. Они скачали стандартную библиотеку с официального сайта и записали её в папку на сайте под именем library_highlight. Прям в корень положили... Как выяснилось поздней можно было этого не делать.

2. Подключили библиотеку и стиль к моей странице "Статьи". Вставив в /articles/index.php следующий код:

$APPLICATION->AddHeadScript("/library_highlight/highlight.pack.js");
$APPLICATION->SetAdditionalCSS("/library_highlight/styles/default.css", true);

И немного дальше вставили скрипт:

<script>
hljs.initHighlightingOnLoad();
</script>

И в принципе подсветка кода заработала. Для php... Но не для 1С. Выясняем дальше.

Как оказалось проблема была в том, что та библиотека, которая была установлена в "/library_highlight" поддерживала множество разных синтаксисов, но 1С не было в их числе. Там на сайте нужно было перед скачиванием установить галку напротив синтаксиса 1С, тогда библиотека будет работать с 1С. В общем я не стал ничего заново скачивать, я просто подключил стандартную библиотеку битрикс, которая уже содержала нужный код:

$APPLICATION->AddHeadScript("/bitrix/js/ui/highlightjs/highlight.pack.js");

В общем всё заработало как надо, но подсветка была "не по феншую".

Нужно было сделать свой css. Не буду приводить весть процесс экперимента со стилями библиотеки. Вот тут есть описание https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html . Можете поэкспериментировать сами.

Приведу текст самой css и дам ссылку на скачивание.

/*

1C-Enterprise Classic theme - Andrey Telnov 

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #FFFFFF;
}

/*Базовый цвет Base color*/
.hljs,
.hljs-subst {
  color: #0000FF;
}

.hljs-number,
.hljs-string {
  color: #000000;
}

.hljs-built_in,
.hljs-type,
.hljs-params,
.hljs-variable,
.hljs-symbol,
.hljs-title,
.hljs-class {
  color: #0000FF;
  font-weight: bold;
}

.hljs-literal,
.hljs-keyword {
  color: #FF0000;
}

/*Цвет комментария Comment color*/
.hljs-comment {
  color: #008000;
}


/*Цвет препроцессора Preprocessor color*/
.hljs-meta,
.hljs-meta-string,
.hljs-meta-keyword {
  color: #963200;

Ссылка на скачивание

Единственный момент который не удалось победить это то что скобки, точки с запятой и пр. спецсимволы выводятся общим цветом. Есть подозрение, что для этого нужно модифицировать саму библиотеку.

Можете оценить то что вышло:

#Область РаботаСАМОЦРМ

//Возвращает структуру ответа на авторизацию
// Параметры:
// АдресСайта - Строка - адрес сайта в сервисе amoCRM без "https://"
// Логин - Строка - Логин пользователя в сервисе amoCRM (электронная почта)
// АПИКлюч - Строка - Ключ пользователя в сервисе amoCRM (можно получить в настройках)
// МассивОшибок - Массив строковых значений с кодами ответа сервера для записи в журнал обмена или журнал регистрации передается массив строк или пустой массив
// Возвращаемое значение:
//  Структура - со свойствами:
//  * РезультатАвторизации	-	Структура	- Структура JSON согласно описанию на сайте amoCRM (https://www.amocrm.ru/developers/content/api/auth)
//  * КодСостояния 			-	Число		- Код ответа сервера
//  * ЗаголовокАвторизации	-	Строка		- Заголовок для авторизации с идентификатором сессии который необходимо вставить в заголовки при отправки запросов через API
//  * СессияИстекает		-	Дата		- Рассчетное время истечения сессии
Функция АвторизацияНаСервере(АдресСайта,Логин,АПИКлюч, МассивОшибок) Экспорт
	СтруктураОтвета = Новый Структура;
	Соединение = Новый HTTPСоединение(АдресСайта,443,,,,,Новый ЗащищенноеСоединениеOpenSSL()); 
	Запрос = Новый HTTPЗапрос("/private/api/auth.php?USER_LOGIN=" + Логин + "&USER_HASH=" + АПИКлюч + "&type=json"); 
	Результат = Соединение.ОтправитьДляОбработки(Запрос); 
	Поток = Результат.ПолучитьТелоКакПоток(); 
	Чтение = Новый ЧтениеJSON;
	Чтение.ОткрытьПоток(Поток);
	СтруктураОтвета.Вставить("РезультатАвторизации",ПрочитатьJSON(Чтение)); 
	СтруктураОтвета.Вставить("КодСостояния",Результат.КодСостояния);
	Если Результат.КодСостояния = 200 Тогда
		Куки = Результат.Заголовки.Получить("Set-Cookie");
		СтруктураОтвета.Вставить("ЗаголовокАвторизации",Куки);
		СтруктураОтвета.Вставить("СессияИстекает",ТекущаяДата() + 840);
	ИначеЕсли Результат.КодСостояния = 401 Тогда
		МассивОшибок.Добавить("Ошибка авторизации код ответа: " + Результат.КодСостояния);
		СтруктураОтвета.Вставить("ЗаголовкиАвторизации","");
	ИначеЕсли Результат.КодСостояния = 403 Тогда
		МассивОшибок.Добавить("Ошибка авторизации код ответа: " + Результат.КодСостояния);
		СтруктураОтвета.Вставить("ЗаголовкиАвторизации","");
	Иначе
		МассивОшибок.Добавить("Ошибка авторизации код ответа: " + Результат.КодСостояния);
		СтруктураОтвета.Вставить("ЗаголовкиАвторизации","");
	КонецЕсли;
	Чтение.Закрыть();
	Соединение = Неопределено;
	Возврат СтруктураОтвета;
КонецФункции

#КонецОбласти

Андрей Тельнов

Программист 1С