Подсветка синтаксиса на любом сайте

18 ноября 2011 года, Размещено в категории: jQuery / MooTools

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

Подсветка синтаксиса


Данный способ работает с помощью Java Script, поэтому этот скрипт будет работать на любых хостингах и сайтах.

1. Исходники

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

2. Устанавливаем скрипт

К сайту надо подключить два файла - стили оформления и скрипт. Для этого в тегах <head></head> вставьте путь к этим файлам:

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

3. Подсвечиваем код

Любой код вставляем в тег <pre></pre> или code, которому присвоен класс prettyprint. Скрипт сам определяет язык, который оформлен в этих тегах и соответственно подсвечивает его.

<html>
 <head>
   <title>untitled</title>
   <link rel="stylesheet" href="sunburst.css" />
   <script src="prettify.js"></script>
 </head>
 <body>
		 <code class="prettyprint">
		(function() {
		   var jsSyntaxHighlighting = 'rocks';
		})();
		</code> 
	<script>prettyPrint();</script>
 </body>
</html>

В исходниках есть два файла оформления, они подключается в строке, как описано в первом пункте:

<link rel="stylesheet" href="sunburst.css" />

Первый prettify.css даёт вот такое оформление:

Подсветка синтаксиса на сайте

Второй sunburst.css оформляет код вот так:

Подсветка синтаксиса на сайте

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






2 комментария

  • 6 лет назад Ответить

    Сделал такую подсветку на своём сайте, очень классно получилось. Спасибо за урок.

  • 4 года назад Ответить

    Цитата: «1. Исходники
    Сперва советую скачать исходники и посмотреть как это работает»

    А где же «Исходники», сам скрипт?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: