Подсветка синтаксиса ISBL с помощью Highlight.js

Опубликовано:
9 апреля 2018 в 07:48

29 3

При публикации статей со вставками кода желательно позаботиться о комфортном чтении этого кода пользователями. Например,воспользоваться подсветкой синтаксиса. Подсветка синтаксиса может потребоваться не только при публикации ISBL кода на сайтах, форумах или блогах, но и в каких-нибудь ваших веб-проектах, например, в веб-доступе DIRECTUM.

Для подсветки синтаксиса на любых веб-страницах удобно пользоваться библиотекой Highlight.js. Библиотека написана на javascript, имеет относительно небольшой размер и не требует никаких дополнительных библиотек или фреймворков. Помимо этого она умеет сама находить блоки кода и автоматически определять язык, для которого необходимо применить подсветку синтаксиса. Более подробно о Highlight.js и о том как ее использовать можно почитать на официальном сайте или на Github.

На текущий момент библиотека поддерживает подсветку синтаксиса для 176 языков и 79 различных стилей отображения подсветки. Среди поддерживаемых языков для подсветки синтаксиса есть даже 1С, но нет ISBL. Чтобы устранить это недоразумение в библиотеку была добавлена поддержка подсветки кода для ISBL и два стиля отображения подсветки для светлой и темной схемы редактора кода. Исходный код библиотеки с поддержкой подсветки синтаксиса ISBL опубликован на Github и доступен по ссылке: https://github.com/MedvedTMN/highlight.js. В конце статьи приведена ссылка на уже скомпилированную библиотеку с поддержкой подсветки синтаксиса основных языков, включая ISBL. 

Для оформления любых публикаций на сайтах, форумах или блогах удобно использовать легковестный популярный WYSIWYG-редактор CKEditor, который для подсветки синтаксиса использует плагин Code Snippet. Данный плагин для подсветки синтаксиса использует библиотеку Highlight.js и для того, чтобы он научился подсвечивать ISBL, его придется немного доработать. В конце статьи приведена ссылка на уже доработанный плагин, который поддерживает подсветку синтаксиса ISBL. Визуально выглядит это так:

Теперь мы подошли к тому, для чего была вся эта предыстория. Наверно многие из вас уже заметили, что на сайте сообщества DIRECTUM Club при вставке фрагментов кода появилась поддержка ISBL:


К сожалению, у разработчиков ресурса пока нет свободного времени, чтобы добавить возможность поддержки цветовых схем при вставке кода. Но т.к. поддержка подсветки синтаксиса ISBL у нас уже есть, мы можем раскрашивать код своими силами, не дожидаясь, когда эту возможность добавят разработчики. Для этого в редакторе текста публикации необходимо нажать кнопку "Источник":


И вставить в самое начало текста следующее описание стиля для светлой темы оформления редактора кода, взятой из дистрибутива доработанной библиотеки Highlight.js и немного подправленной для этого случая:

<style type="text/css">
  .language-isbl.hljs {
    background: white !important;
    color: black !important;
  }

  .language-isbl .hljs,
  .language-isbl .hljs-subst {
    color: #000000 !important;
  }

  .language-isbl .hljs-comment {
    color: #555555 !important;
    font-style: italic !important;
  }

  .language-isbl .hljs-keyword,
  .language-isbl .hljs-attribute,
  .language-isbl .hljs-selector-tag,
  .language-isbl .hljs-meta-keyword,
  .language-isbl .hljs-doctag,
  .language-isbl .hljs-name {
    color: #000000 !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-string {
    color: #000080 !important;
  }

  .language-isbl .hljs-type,
  .language-isbl .hljs-number,
  .language-isbl .hljs-selector-id,
  .language-isbl .hljs-selector-class,
  .language-isbl .hljs-quote,
  .language-isbl .hljs-template-tag,
  .language-isbl .hljs-deletion {
    color: #000000 !important;
  }

  .language-isbl .hljs-title,
  .language-isbl .hljs-section {
    color: #fb2c00 !important;
  }

  .language-isbl .hljs-title>.hljs-built_in {
    color: #008080 !important;
    font-weight: normal !important;
  }

  .language-isbl .hljs-regexp,
  .language-isbl .hljs-symbol,
  .language-isbl .hljs-variable,
  .language-isbl .hljs-template-variable,
  .language-isbl .hljs-link,
  .language-isbl .hljs-selector-attr,
  .language-isbl .hljs-selector-pseudo {
    color: #5e1700 !important;
  }

  .language-isbl .hljs-built_in,
  .language-isbl .hljs-literal {
    color: #000080 !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-bullet,
  .language-isbl .hljs-code,
  .language-isbl .hljs-addition {
    color: #397300 !important;
  }

  .language-isbl .hljs-class  {
    color: #6f1C00 !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-meta {
    color: #1f7199 !important;
  }

  .language-isbl .hljs-meta-string {
    color: #4d99bf !important;
  }

  .language-isbl .hljs-emphasis {
    font-style: italic !important;
  }

  .language-isbl .hljs-strong {
    font-weight: bold !important;
  }
</style>

Или следующее описание стиля для темной темы оформления редактора кода:

<style type="text/css">
  .language-isbl.hljs {
    background: #404040 !important;
    color: #f0f0f0 !important;
  }

  .language-isbl .hljs,
  .language-isbl .hljs-subst {
    color: #f0f0f0 !important;
  }

  .language-isbl .hljs-comment {
    color: #b5b5b5 !important;
    font-style: italic !important;
  }

  .language-isbl .hljs-keyword,
  .language-isbl .hljs-attribute,
  .language-isbl .hljs-selector-tag,
  .language-isbl .hljs-meta-keyword,
  .language-isbl .hljs-doctag,
  .language-isbl .hljs-name {
    color: #f0f0f0 !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-string {
    color: #97bf0d !important;
  }

  .language-isbl .hljs-type,
  .language-isbl .hljs-number,
  .language-isbl .hljs-selector-id,
  .language-isbl .hljs-selector-class,
  .language-isbl .hljs-quote,
  .language-isbl .hljs-template-tag,
  .language-isbl .hljs-deletion {
    color: #f0f0f0 !important;
  }

  .language-isbl .hljs-title,
  .language-isbl .hljs-section {
    color: #df471e !important;
  }

  .language-isbl .hljs-title>.hljs-built_in {
    color: #81bce9 !important;
    font-weight: normal !important;
  }

  .language-isbl .hljs-regexp,
  .language-isbl .hljs-symbol,
  .language-isbl .hljs-variable,
  .language-isbl .hljs-template-variable,
  .language-isbl .hljs-link,
  .language-isbl .hljs-selector-attr,
  .language-isbl .hljs-selector-pseudo {
    color: #e2c696 !important;
  }

  .language-isbl .hljs-built_in,
  .language-isbl .hljs-literal {
    color: #97bf0d !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-bullet,
  .language-isbl .hljs-code,
  .language-isbl .hljs-addition {
    color: #397300 !important;
  }

  .language-isbl .hljs-class  {
    color: #ce9d4d !important;
    font-weight: bold !important;
  }

  .language-isbl .hljs-meta {
    color: #1f7199 !important;
  }

  .language-isbl .hljs-meta-string {
    color: #4d99bf !important;
  }

  .language-isbl .hljs-emphasis {
    font-style: italic !important;
  }

  .language-isbl .hljs-strong {
    font-weight: bold !important;
  }
</style>

Светлая схема оформления применяется автоматически при сохранении текста публикации, поэтому ее имеет смысл использовать только, если вас раздражает схема оформления в стиле Visual Studio, которая применяется по умолчанию к не сохраненному тексту.

В результате вот так будет выглядеть оформление фрагмента кода ISBL для темной схемы редактора:

  // Описание констант
  ADD_EQUAL_NUMBER_TEMPLATE = "%s.%s = %s"
  EMPLOYEES_REFERENCE = 'РАБ'
  /********************************************* 
   *  Получить список кодов или ИД работников, *
   *  соответствующих текущему пользователю    *
   *********************************************/
  Employees: IReference.РАБ = CreateReference(EMPLOYEES_REFERENCE; 
    ArrayOf("Пользователь"; SYSREQ_STATE); MyFunction(FALSE; MyParam * 0.05))
  Employees.Events.DisableAll
  EmployeesTableName = Employees.TableName
  EmployeesUserWhereID = Employees.AddWhere(Format(ADD_EQUAL_NUMBER_TEMPLATE; 
    ArrayOf(EmployeesTableName; Employees.Requisites("Пользователь").SQLFieldName; 
    EDocuments.CurrentUser.ID)))
  Employees.Open()
  Result = CreateStringList()
  foreach Employee in Employees
    if IsResultCode
      Result.Add(Employee.SYSREQ_CODE)
    else
      Result.Add(Employee.SYSREQ_ID)
    endif  
  endforeach
  Employees.Close()
  Employees.DelWhere(EmployeesUserWhereID)
  Employees.Events.EnableAll
  Employees = nil

Аналогичным образом можно подготовить любую схему оформления подсветки синтаксиса языков, поддерживаемых редактором. Для этого достаточно взять любую понравившуюся схему оформления подсветки синтаксиса из дистрибутива библиотеки Highlight.js или разработать какую-нибудь свою и оформить ее способом, описанным выше.

Скомпилированная библиотека Highlight.js с поддержкой подсветки синтаксиса основных языков, включая ISBL: 

highlight.pack.js.zip

Плагин Code Snippet для WYSIWYG-редактора CKEditor с поддержкой подсветки синтаксиса ISBL: 

codesnippet_isbl_4.8.0.zip

Редактор ISBL ISBL веб подсветка синтаксиса WYSIWYG-редактор
29
Авторизуйтесь, чтобы оценить материал.
3
Дмитрий Тарасов
10 мая 2018 в 10:34

Библиотека Highlight.js обновилась:

- исправлена подсветка ключевых слов написанных кириллицей.

Приложенные в конце статьи архивы с библиотекой и плагином обновлены.

0
Авторизуйтесь, чтобы оценить материал.
Дмитрий Тарасов
20 ноября 2018 в 20:36

Подсветка синтаксиса ISBL вошла в состав дистрибутива библиотеки highlight.js начиная с версии 9.13.0. Скачать библиотеку с поддержкой подсветки синтаксиса необходимых языков можно на официальной странице загрузки highlightjs.org.

 

Дмитрий Тарасов: обновлено 20.11.2018 в 20:37
0
Авторизуйтесь, чтобы оценить материал.
Максим Буланов
20 февраля 2019 в 14:28

Дмитрий, спасибо за Ваш труд.

А можно Вас попросить добавить поддержку ISBL в CodeMirror?  https://github.com/codemirror/CodeMirror

0
Авторизуйтесь, чтобы оценить материал.

Авторизуйтесь, чтобы написать комментарий