Без перерывов и выходных! 10:00 - 19:30 (пн-пт), 12:00 – 17:00 (сб-вс)
Х

Уважаемые клиенты!

Скидка 15% в честь открытия филиала!

Открылся филиал сервисного центра КомпЛайн в микрорайоне Южный по адресу ул. Софьи Перовской д.54.

Рады встретить Вас в нашем новом офисе.

Приходите!

Подсветка кода на страницах

ГлавнаяСтатьиСайты и оптимизацияПодсветка кода на web странице
Подсветка кода на web странице

В поиске решения как сделать на странице, чтобы код языка программирования (любого) отображался специфически, а не просто текстом со стилями. Это упрощает восприятие посетителем публикуемых фрагментов кода, и скопировать его так значительно проще. Изготовление сайтов на ModX достаточно специфично, но и для этой CMF в интернете есть несколько различных рецептов. Рассмотри один из них, самый простой.

Для этого будет использоваться Google Code Prettifier - скрипт отвечающий за подстветку кода на веб-странице. Google Code Prettifier сам определяет тип кода. Для его использования нам нужно лишь подключить его на своем, это делается очень быстро. буквально пару минут.

Сначала качаем архив со скриптом по этой ссылке. Из скачанного архива берем только два файла это: prettify.css и prettify.js. Копируем их в корневую папку сайта. Добавляем в заголовок код подключения скрипта:

можно подключить их например в шаблоне, который будет использоваться для материалов с использованием выделения фрагментов кода.

<link rel="stylesheet" href="prettify.css" type="text/css" />
<script type="text/javascript" src="prettify.js"></script>

В тег <bоdy> дописываем onload="prettyPrint()", должно получиться:

<bоdy onload="prettyPrint()">

Все, подстветка кода активирована. Текст кода, который надо подсветить помещаем в тег

<pre class="prettyprint"> подсвечиваемый код </pre> 

Параметры стиля можно изменить в файле prettify.css.



Ваши вопросы и комментарии

ОтменитьОставьте ваш вопрос