Существует много скриптов и плагинов, позволяющих сделать на сайте подсветку кода, например,html или css. В этой статье разберу преимущества скрипта Prism и как установить его на сайт. На самом сайте Призм руководства на русском языке нет, поэтому и решил подготовить небольшую инструкцию.
Почему именно Prism
До этого я уже пользовался разными скриптами для подсветки программного кода. Когда пришло время внедрить подсветку кода на новом сайте, решил не использовать уже проверенные варианты, а посмотреть, что используют топовые сайты в англоязычном интернете.
Выяснил, что на некоторых стоит скрипт от prismjs.com
Его преимущества:
- Простая программа в установке и использовании.
- Маленький размер: ядро на 7KB, плюс тема — 2KB, плюс примерно 1KB на каждый подключенный язык.
- Можно легко стилизовать вывод под свой сайт.
- Поддерживает все распространенные языки: HTML, CSS, JS, PHP, Python, C#, C++ и многие другие.
- Есть несколько цветовых тем.
- Существуют дополнения для вывода нумерации строк, отображения языка и т.д.
- Скрипт можно дописывать под свои нужды.
Установка
Для установки нужно зайти на сайт https://prismjs.com/download.html, выбрать необходимые пункты.
- Minified version (если только не собираетесь заниматься доработкой скрипта).
- Тема — пример работы можно увидеть в конце страницы. Например, вот так выглядит код в теме Okaidia:
- Languages (Языки) — выбирайте только необходимое, так как они увеличивают объем кода. При необходимости потом можно дополнить скрипт.
- Plugins (плагины) — здесь могут быть полезными Line Numbers (нумерация строк) и Show Language (Показывать язык).
Затем в конце страницы нужно скачать js и css файлы кнопками Download JS и Download CSS.
После скачивания файлов их нужно загрузить на хостинг в корневую или какую-то внутреннюю папку сайта.
Подключить файлы:
внутри тега <head>
1 |
<link href="prism.css" rel="stylesheet"/> |
внутри <body> (лучше в конце)
1 |
< script src="prism.js"></script> |
Вам нужно указать полные пути к файлам на сайте.
Пример работы
Чтобы вывести код с подсветкой на сайте, вам нужно обернуть его тегом <code> и указать класс с названием языка в виде language-xxxx (либо в виде короткой версии lang-xxxx, например, lang-css).
Например, следующий код:
на сайте будет представлен так:
У меня в коде есть еще обертка в тег <pre>. Дело в том, что есть так не сделать, код будет не на всю ширину экрана. Еще я сделал вывод языка в правом верхнем углу. Про это немного ниже.
Особенности установки для WordPress
Для wordpress есть специальные функции подключения скриптов и стилей. Подробнее их описание в статье.
Нужно добавить в functions.php две строчки кода, которые подключат указанные файлы к сайту. Здесь предполагается, что файл javascript лежит у вас в папке js, а файл стилей в папке css.
1 2 3 |
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 следующие инструкции
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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/. Но лично мне больше нравится использование этого скрипта в чистом виде без плагина.