Как подсветить синтаксис кода в статьях базы знаний? 1

Вы предоставляете клиентам примеры кода. Без подсветки синтаксиса сложно сходу понять, о чем именно ваш пример, и не всегда понятно, о каком языке идет речь.

Чтобы повысить читаемость кода, добавьте в центр поддержки скрипт и/или кастомный CSS. В исходном коде статьи указывайте в теге класс, который подсветит синтаксис.

Сторонние JS-скрипты и кастомный CSS

Выберите подходящий вам вариант:

— Google Prettify: импортируем сторонний скрипт, а в тегах pre или code указываем класс prettyprint, который самостоятельно определит язык. 

• Проще всего настроить и использовать;

• Список поддерживаемых языков доступен по ссылке, но вы можете импортировать дополнительные JS-скрипты для языков, которые не добавлены по умолчанию;

• Code Google архивировал проект, поэтому обновлений ждать не стоит.

— W3Schools: импортируем сторонний скрипт в центр поддержки и указываем нужный язык в тегах pre, code и других в формате class="w3-code [язык]High notranslate". 

• Доступные языки для выделения синтаксиса: HTML, CSS, JavaScript, Java, SQL, Python и Kotlin. 

• Комментарии внутри кода не всегда считываются корректно; 

• Сложнее прописывать классы в HTML тегах.

— Prismjs: выбираем любые языки на сайте Prismjs, тем самым формируем JS-скрипты и CSS-стили → прописываем их в центре поддержки → указываем для каждого тега code нужный язык в формате class="language-[язык]". 

• Доступны практически все известные языки программирования;

• Первоначальная настройка дольше, но добавлять теги в исходный код статьи несложно, благодаря синтаксису class="language-[язык]";

• Комментарии внутри кода указывать не стоит, так как класс .comment конфликтует с комментариями раздела «Предложения».

Google Prettify

1.  Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «Виджеты и скрипты» и добавьте следующие строки в поле «Сторонние скрипты»:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

2. При добавлении статьи в базе знаний перейдите в режим исходного кода и в тегах pre или code укажите нужный класс через конструкцию <[тег] class="prettyprint">.

Примеры выделения синтаксиса с помощью Google Prettify

<div class="omni_block html">
    <code class="prettyprint">[Ваша HTML-разметка]</code>
</div>

<div class="omni_block js">
    <code class="prettyprint">[Ваш JavaScript-код]</code>
</div>

PRO Подсказка

Выберите кастомную тему для Google Prettify, чтобы добавить нумерацию и поочередное выделение строки, например: 

<div class="omni_block js">
    <code class="prettyprint listnums">/**
     * Вставка в конец или в начало элемента
     */
    var addCode = function(selector, htmlCode, after) {
        var element = $(selector);

        if(checkNotUndefined(after) === true && after === true) {
            element.append(htmlCode);
        } else {
            element.prepend(htmlCode);
        }
    }; </code>
</div>

W3Schools

1. Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «Виджеты и скрипты» и добавьте следующие строки в поле «Сторонние скрипты»:

<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
<script>w3CodeColor();</script>

2. При добавлении статьи в базу знаний, перейдите в режим исходного кода и в тегах pre или code укажите нужный класс через конструкцию <[тег] class="w3-code [язык]High notranslate">

Примеры выделения синтаксиса с помощью W3School

HTML

Для HTML-разметки указывайте class="w3-code htmlHigh notranslate". Пример HTML-разметки горизонтального меню с кнопками с подсвеченным синтаксисом:

<div class="code_block_html" style="opacity: 1;">
    <code class="w3-code htmlHigh notranslate">[Ваша HTML-разметка]</code>
</div>

CSS

Для CSS-кода указывайте class="w3-code CssHigh notranslate". Пример CSS горизонтального меню с кнопками с подсвеченным синтаксисом:

<div class="omni_block css" style="opacity: 1;">
    <code class="w3-code cssHigh notranslate">[CSS код]</code>
</div>

Prismjs

1. Перейдите на сайт Prismjs, выберите тему и нужные вам языки в списке доступных:

2. В конце странице вы получите готовый JS-скрипт и CSS-стили для выделения синтаксиса выбранных языков:

Скопируйте оба кода и перейдите в аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация».

2.1. Вставьте JS-скрипт в поле «сторонние скрипты», внеся его в теги script:

2.2. Вставьте CSS-таблицы в поле «Кастомный CSS»:

3. При добавлении статьи в базе знаний перейдите в режим исходного кода, и в теге code укажите нужный класс объектов через конструкцию <code class="language-[язык]"> или <code class="lang-[язык]">  .

Примеры выделения синтаксиса с помощью Prismjs

JSON

Для JSON-кода указывайте class="language-json". Пример JSON-запроса редактирования обращения:

<div class="omni_block json" style="opacity: 1;">
    <code class="language-json">[Ваш JSON-текст]</code>
</div>

PHP

Для кода в формате php указывайте class="language-php". Пример добавления кнопки в коде самописного Telegram бота в формате PHP:

<div class="omni_block php">
      <code class="lang-php">[Ваш PHP-код]</code>
</div>