Показать Меню
falbar Подсветка кода Prism

Улучшенная подсветка кода от Prism

Подсветка кода Prism

Доброго времени суток, читатели Фалбар и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием Prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

Почему я выбрал именно Prism?

Конечно, подобных скриптов множество, каждый из которых по-своему хорош. Когда я разрабатывал этот сайт, я решил не качать самую распространенную подсветку кода, а порыться немного и посмотреть, что вообще уже написано в данной области. Так мною и был найден данный скрипт – prism.js. К сожалению, русскоязычной документации на сайте разработчиков (да и вообще в интернете) не оказалось, что явилось первым минусом в моих глазах. Но, ведь суть подсветки кода везде одинакова, поэтому я решил разобраться с расширением самостоятельно.

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

  1. Вес скрипта составляет какие-то жалкие 1.6 кб – собственно, это вес ядра. Все остальные дополнения (языки, стили и плагины) легко подключаются на официальном сайте отдельно. В результате, имеем «чистый», только нам необходимый функционал и ничего лишнего.
  2. Prism поддерживает около 20-30 подсветок разных языков (HTML, XML, CSS, PHP, JavaScript и многие другие).
  3. Уже написаны дополнительные расширения, при помощи которых можно добавить нумерацию строк, язык, в котором отображается код и др.;
  4. Плагин имеет шесть готовых CSS стилей, если кому-то мало, или требуется что-то очень специфическое, то не составит труда написать свои стили под код. Замечу, что все классы, используемые в Prism логичны и понятны.
  5. Библиотека легкая и быстрая, что не влияет на скорость загрузки страницы;
  6. У Prism есть своё небольшое API;
  7. Ну и последний хороший бонус, это наличие возможности самому расширять библиотеку, дописывая нужный функционал и добавляя свои варианты отображения кода через внутренние методы.

Возможно, я что-то упустил, но думаю, что этого и так достаточно, чтобы выбрать именно Prism. Теперь мы её подключим и поднастроим, делать это мы будем точь-в-точь так, как это реализовано у меня на сайте на момент написания данной статьи.

Как Вы уже наверно заметили, в статьях при выводе кода я использую нумерацию строк и показываю язык кода (данный функционал мы реализуем сами вручную, без использования методов плагина, о причинах такого решения и самой реализации расскажу ниже). Изначальный стиль я выбирал OKAIDIA, а потом уже изменял его под себя. Языки: Markup (HTML, XML), CSS, JavaScript и PHP - стандартная сборка для веб-разработчика. Если она Вас устраивает, то переходим по ссылке, и там уже будут выбраны все эти пункты. Далее скачиваем два файла.

Скачать prism

Подключаем их к себе на страницу и ещё библиотеку 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.js завершено.

Если подключение библиотек и плагинов мало у кого вызывает затруднения, то при добавлении кода в статью, особенно у новичков, всё-таки могут возникнуть проблемы. Далее пойдёт речь об этом этапе.

Когда первый раз подключаешь такого рода скрипты, то при добавлении кода в стандартную конструкцию (в моем случае между элементами 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). В итоге у Вас будет отображаться на странице всё как надо.

На этом у меня всё, спасибо за внимание, надеюсь, данная статья поможет Вам реализовать у себя на сайте подсветку.

Подписаться на обновления

Комментариев еще не оставлено