Подсветка синтаксиса на любом сайте
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 минут и справится должен каждый. На этом всё, спасибо за внимание.
10 лет назад
Сделал такую подсветку на своём сайте, очень классно получилось. Спасибо за урок.
dickist
8 лет назад
Цитата: «1. Исходники
Сперва советую скачать исходники и посмотреть как это работает»
А где же «Исходники», сам скрипт?