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

11 февраля 2015 Антон Кулешов 2222 0

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

Реклама

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

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

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

  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 - стандартная сборка для веб-разработчика. Если она вас устраивает, то переходим по ссылке, и там уже будут выбраны все эти пункты. Далее скачиваем два файла.

skachat-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 завершено.

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

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

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 Антон Кулешов

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.

Всплывающие подсказки balloon CSS

8 июня 2016 Антон Кулешов

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную CSS библиотечку для добавления всплывающих подсказок. Решений на эту тему есть уже масса, и я неоднократно добавлял к себе на сайт разные варианты, но увидев balloon решил о нём написать.

Подбор слов, объективная необходимость или отрезанные крылья

15 июня 2015 ti1schweiger

Продолжая тему развития популярности блога, хотелось бы поделиться личным опытом и «набитыми шишками». Начиная вести falbar, мы столкнулись с весьма странным обстоятельством: статьи есть, темы тоже, вроде бы интересные, материал тоже уникальный (с точки зрения плагиата), а в выдаче Яндекса сайта как нет, так и нет. Выхода особого не оставалось: или забивать или обратить внимание на SEO как таковое. На тот момент, хоть я и работал молодым сеошником в маленькой региональной конторке, должного значения для сео в развитии блога я, почему-то, не придал. Да что там, мы же не окна и двери продаем, да даже и не кондиционеры, информационные статьи в моём тогдашнем понимании должны били вылазить в поиске сами собой. Да не тут-то было!