Подсветка кода с помощью 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>

<link href="prism.css" rel="stylesheet"/>

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

< script src="prism.js"></script>

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

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

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

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

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

вывод

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

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

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

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


wp_enqueue_script('prism', get_stylesheet_directory_uri() . '/js/prism.js', array(), false, true);
wp_enqueue_style('prism', get_stylesheet_directory_uri() . '/css/prism.css');

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

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

pre.language-css:before, pre.language-html:before {
  content: 'css';
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  color: #ff8a00;
  top: 0;
  right: 0;
  margin-right: 5px;
}
pre.language-html:before {
  content: 'css';
}

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

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

Добавьте комментарий

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.