Подсветка кода с помощью Prism

Существует много скриптов и плагинов, позволяющих сделать на сайте подсветку кода, например,html или css. В этой статье разберу преимущества скрипта Prism и как установить его на сайт. На самом сайте Призм руководства на русском языке нет, поэтому и решил подготовить небольшую инструкцию.

Почему именно Prism

До этого я уже пользовался разными скриптами для подсветки программного кода. Когда пришло время внедрить подсветку кода на новом сайте, решил не использовать уже проверенные варианты, а посмотреть, что используют топовые сайты в англоязычном интернете.

Выяснил, что на некоторых стоит скрипт от prismjs.com

Его преимущества:

  • Простая программа в установке и использовании.
  • Маленький размер: ядро на 7KB, плюс тема — 2KB, плюс примерно 1KB на каждый подключенный язык.
  • Можно легко стилизовать вывод под свой сайт.
  • Поддерживает все распространенные языки: HTML, CSS, JS, PHP, Python, C#, C++ и многие другие.
  • Есть несколько цветовых тем.
  • Существуют дополнения для вывода нумерации строк, отображения языка и т.д.
  • Скрипт можно дописывать под свои нужды.

Установка

Для установки нужно зайти на сайт https://prismjs.com/download.html, выбрать необходимые пункты.

настройки prism

  • Minified version (если только не собираетесь заниматься доработкой скрипта).
  • Тема — пример работы можно увидеть в конце страницы. Например, вот так выглядит код в теме Okaidia: образец
  • Languages (Языки) — выбирайте только необходимое, так как они увеличивают объем кода. При необходимости потом можно дополнить скрипт.
  • Plugins (плагины) — здесь могут быть полезными Line Numbers (нумерация строк) и Show Language (Показывать язык).

Затем в конце страницы нужно скачать js и css файлы кнопками Download JS и Download CSS.

download

После скачивания файлов их нужно загрузить на хостинг в корневую или какую-то внутреннюю папку сайта.

Подключить файлы:

внутри тега <head>

внутри <body> (лучше в конце)

Вам нужно указать полные пути к файлам на сайте.

Пример работы

Чтобы вывести код с подсветкой на сайте, вам нужно обернуть его тегом <code> и указать класс с названием языка в виде language-xxxx (либо в виде короткой версии lang-xxxx, например, lang-css).

Например, следующий код:

код для примера
на сайте будет представлен так:

вывод

У меня в коде есть еще обертка в тег <pre>. Дело в том, что есть так не сделать, код будет не на всю ширину экрана. Еще я сделал вывод языка в правом верхнем углу. Про это немного ниже.

Особенности установки для WordPress

Для wordpress есть специальные функции подключения скриптов и стилей. Подробнее их описание в статье.

Нужно добавить в functions.php две строчки кода, которые подключат указанные файлы к сайту. Здесь предполагается, что файл javascript лежит у вас в папке js, а файл стилей в папке css.

Добавляем вывод языка с помощью стилей

Хочу показать, как вывести язык без подключения плагина просто через стили. Сделаем это для css и html. Нужно добавить в файл style.css следующие инструкции

Плагины для WP использующие prism

Для WP плагины, применяющие в своей работе скрипт prism. Найти их можно на этой странице https://wordpress.org/plugins/search/prism/. Но лично мне больше нравится использование этого скрипта в чистом виде без плагина.

Оцените статью
Делаем сайт своими руками
Добавить комментарии