Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.
Почему я выбрал именно prism?
Конечно, подобных скриптов множество, каждый из которых по-своему хорош. Когда я разрабатывал этот сайт, я решил не качать самую распространенную подсветку кода, а порыться немного и посмотреть, что вообще уже написано в данной области. Так мною и был найден данный скрипт – prismjs. К сожалению, русскоязычной документации на сайте разработчиков (да и вообще в интернете) не оказалось, что явилось первым минусом в моих глазах. Но, ведь суть подсветки кода везде одинакова, поэтому я решил разобраться с расширением самостоятельно.
К слову, значительных недостатков мною обнаружено не было, а вот достоинств - хоть отбавляй:
- Вес скрипта составляет какие-то жалкие 1.6 кб – собственно, это вес ядра. Все остальные дополнения (языки, стили и плагины) легко подключаются на официальном сайте отдельно. В результате, имеем «чистый», только нам необходимый функционал и ничего лишнего;
- Prism поддерживает около 20-30 подсветок разных языков (HTML, XML, CSS, PHP, JavaScript и многие другие);
- Уже написаны дополнительные расширения, при помощи которых можно добавить нумерацию строк, язык, в котором отображается код и др.;
- Плагин имеет шесть готовых CSS стилей, если кому-то мало, или требуется что-то очень специфическое, то не составит труда написать свои стили под код. Замечу, что все классы, используемые в prism логичны и понятны;
- Библиотека легкая и быстрая, что не влияет на скорость загрузки страницы;
- У prism есть своё небольшое API;
- Ну и последний хороший бонус, это наличие возможности самому расширять библиотеку, дописывая нужный функционал и добавляя свои варианты отображения кода через внутренние методы.
Возможно, я что-то упустил, но думаю, что этого и так достаточно, чтобы выбрать именно prism. Теперь мы её подключим и поднастроим, делать это мы будем точь-в-точь так, как это реализовано у меня на сайте на момент написания данной статьи.
Как вы уже наверно заметили, в статьях при выводе кода я использую нумерацию строк и показываю язык кода (данный функционал мы реализуем сами вручную, без использования методов плагина, о причинах такого решения и самой реализации расскажу ниже). Изначальный стиль я выбирал OKAIDIA, а потом уже изменял его под себя. Языки: Markup (HTML, XML), CSS, JavaScript и PHP - стандартная сборка для веб-разработчика. Если она вас устраивает, то переходим по ссылке, и там уже будут выбраны все эти пункты. Далее скачиваем два файла.
Подключаем их к себе на страницу и ещё библиотеку jQuery:
<link href="prism.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="prism.js" type="text/javascript"></script>
Участок кода, который собираемся выводить с подсветкой, обрамляем в одну из приведенных ниже конструкций:
<pre><code class="language-markup"> HTML, XML </code></pre>
<pre><code class="language-css"> CSS </code></pre>
<pre><code class="language-javascript"> JavaScript </code></pre>
<pre><code class="language-php"> PHP </code></pre>
Как видите, все довольно просто и понятно.
Для включения нумерации сток дописываем к pre class=line-numbers, в итоге получиться такая строчка:
<pre class="line-numbers"><code class="language-markup"> HTML, XML </code></pre>
Изощренный читатель уже мог заметить подвох – добавление различных опций и красивостей ведет к непрерывному росту структуры, что крайне неудобно уже на стадии подключения нумерации строк, а если потребуется подключить что-то еще?!… Поэтому, я и был вынужден отказаться от использования стандартным методов плагина.
Что же я предпринял?
Ну, выход здесь только один (или я разглядел только один – не суть): при добавлении статьи использовать более простую конструкцию без классов, а при отображении страницы при помощи JavaScript добавлять эти классы. Этим вариантом мы решаем сразу две задачи: первая - это более короткая запись, а вторая – теперь мы можем сами контролировать отображение названия языка (это важно, так как все языки разметки в prism называются markup). Я использую вот такую конструкцию:
<pre rel="HTML"><code></code></pre>
В атрибут rel передаем желаемый язык.
Теперь добавим пару строк в файл prism.js, а именно: функцию prismAddClasses(), которая будет возвращать убранные классы:
function prismAddClasses(){
/* Добавление классов для подсветки кода */
$("pre[rel]").addClass("line-numbers");
$("pre[rel=html] code").addClass("language-markup");
$("pre[rel=xml] code").addClass("language-markup");
$("pre[rel=htaccess] code").addClass("language-markup");
$("pre[rel=css] code").addClass("language-css");
$("pre[rel=javascript] code").addClass("language-javascript");
$("pre[rel=php] code").addClass("language-php");
/* END Добавление классов для подсветки кода */
return false;
};
$(function(){
prismAddClasses();
});
Проделав эти нехитрые манипуляции, и задействовав библиотеку jQuery, мы возвращаем все классы обратно при загрузке страницы браузером. Так что, если вам, вдруг, не понадобиться нумерация, то нужно будет убрать всего несколько строк в функции, что очень удобно.
Теперь нам осталось только вывести в блоке с кодом название языка, который указан в атрибуте rel, делать это мы будем, используя CSS:
pre[rel]{
padding-top: 50px !important;
}
pre[rel]:before{
content: attr(rel);
background-color: #e18728;
color: #fff;
font-family: Consolas, Monaco, monospace;
font-size: 22px;
line-height: 28px;
font-weight: bold;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-indent: 15px;
}
Те, кто знаком селектором before, тут нечего нового не увидят. В этом куске CSS мы находим элементы pre c атрибутом rel и добавляем название языка перед ними, указывая стили при помощи атрибута before. В итоге получается шапка с названием кода.
Собственно на этом подключение prism завершено.
Если подключение библиотек и плагинов мало у кого вызывает затруднения, то при добавлении кода в статью, особенно у новичков, всё-таки могут возникнуть проблемы. Далее пойдёт речь об этом этапе.
Когда первый раз подключаешь такого рода скрипты, то при добавлении кода в стандартную конструкцию (в моем случае между элементами pre и code) многие буквально вставляют весь код, а потом удивляются, почему нечего не работает. Тут есть маленький подвох, а именно: код, который добавляется между элементами для вывода, должен быть преобразован особым образом. Это означает, что все скобки, кавычки и тому подобные знаки необходимо преобразовать в спецсимволы. Для этого можно написать простую функцию с регулярным выражением, которая перед занесением текста в базу данных, будет заменять знаки на спецсимволы автоматически. Что сэкономит вам кучу времени и избавит от нудного ручного труда.
function get_hand_text($text){
if($text){
preg_match_all("/<pre rel=\".+?\"><code>(.+?)<\/code><\/pre>/s", $text, $match);
if($match[1]){
foreach($match[1] as $val){
$text = str_replace($val, htmlspecialchars(trim($val), ENT_QUOTES), $text);
}
}
return $text;
}
return false;
}
Это один из вариантов реализации вышеописанной задачи. Функция get_hand_text() принимает один параметр $text. Внутри неё идут проверки: первая на наличие в переменной $text данных, вторая на наличие блоков с кодом (реализуется при помощи регулярного выражения), если таковые в тексте присутствуют. Далее используется foreach() функция, которая пробегается по массиву в $match[1] и заменяет в тексте $val (изначальный код) на htmlspecialchars(trim($val), ENT_QUOTES). В итоге у вас будет отображаться на странице всё как надо.
На этом у меня всё, спасибо за внимание, надеюсь, данная статья поможет вам реализовать у себя на сайте подсветку.