Oi Code Listing

Oi Code Listing

Oi Code Listing — это простой плагин без подсветки синтаксиса для вывода листинга кода, разбитого на строки с возможностью копировать код в один клик.

Для работы плагина достаточно подключить статические файлы и вставки кода мгновенно преобразятся.




Text

Для получения листинга, расположенного выше, достаточно написать следующий HTML-код:

<pre>
<code>
<!-- это обычный код, вставленный через HTML -->
<div class="">Text</div>
</code>
</pre>

Строки кода автоматически нумеруются и добавляется «зебра» для более удобного восприятия. Вы как обычно используете теги pre > code, а плагин делает все остальное.

Названия вкладок

Если необходимо добавить названия кладок для обозначения языка кода, это можно сделать с помощью атрибутов в теге code:

  • lang — для указания используемого языка, используется для переключения вкладок в разных листингах;
  • caption — для отображения названия языка, является декоративным текстом.

При добавлении следующего кода:

<pre>
    <code lang="php">
        // code
        echo('Hello!');
    </code>
    
    <code lang="javascript" caption="JavaScript">
        # code
        console.log('Hello!')
    </code>
</pre>

Результат будет таким:

        // code
        echo('Hello!');        # code
        console.log('Hello!')

Если вы используете WordPress

При использовании WordPress просто активируйте плагин и он сразу начнет работать. Для добавления блоков с кодом в редакторе блоков Гуттенберг выберите Code Listing и добавьте необходимое число вкладок кода:

Цветовая схема

Вы можете управлять цветовой схемой в панели администратора через меню плагина:

Code listing Menu item

Можно установить автоматический режим, если ваш сайт подстраивается под схему пользователя, либо указать нужную схему вручную:

Примеры

// code
console.log('Hi') // code
echo('Hi');

Обратите внимание на то, что при переключении вкладки кода в одном листинге, аналогичная вкладка включается и на других, если она там есть:

.foo{
    backgrount-color: red;
}
.foo .bar{
    backgrount-color: green;
}.foo{
    backgrount-color: red;
    .bar{
        backgrount-color: green;
    }
}
.foo{
    color: red;
}
.foo .bar{
    color: green;
}.foo{
    color: red;
    .bar{
        color: green;
    }
}

В обычном HTML для добавления листинга представленого выше можно написать так:

<pre>
<code lang="css">
.foo{
    color: red;
}
.foo .bar{
    color: green;
}
</code>

<code lang="sass">
.foo{
    color: red;
    .bar{
        color: green;
    }
}
</code>

</pre>

Все листинги на данном сайте выводятся с помощью данного плагина.

Вопрос по продукту
↑