Доброго времени суток уважаемые читатели моего дневника! Продолжаю цикл публикаций и сегодня судя из заголовка данной статьи вы наверное поняли, что сегодня мы подключим скрипт который сделает подсветку програмного кода на страницах вашего сайта. В интернете можно найти много методов и способов подсветки на стороне пользователя или можно даже на стороне сервера подключить. Сегодня хочу объяснить и показать на примерах два уже готовых скрипта которые мы просто научимся правильно подключать и правильно вставлять программные коды в исходный код статьи или новости. что угодно, либо даже комментарий. И так первый скрипт которым я пользовался долгое время, да и первые мои статьи с кодом на страницах подсвечиваются именно ним это - highlight.pack. Сам скрипт идет с множеством тем для подсветки, подойдет для разных дизайнов сайта. Его плюсы это маленький размер, при етом быстрая работа, удобен, даже без прописывания указанного именно какой код подсвечивать подсветит сам найдет. Подсвечивает весь код который заключен в теги.
Код HTML
<pre><code>здесь код для подсветки</code></pre>
Как мы видим очень просто подключить. Теперь начнем все по порядку. Роспаковать на хостинг или на локальный сервер папку в которой находятся скрипты и темы. Далее в файле где необходима подсветка кода между тегами head прописываем путь для подключения скрипта и стиля. смотрим код ниже.
Код HTML
<script language="javascript" src="jquery/highlight.pack.js"></script>
<link rel="stylesheet" href="jquery/styles/googlecode.css" type="text/css">
<script>hljs.initHighlightingOnLoad();</script>
Как видно здесь я использую тему googlecode. В комплекте есть 26 тем с разным оформлением кода, для любого практичесски дизайна сайта. Скрипт работает без проблем, быстро, удобно, подсвечивает любой код. Также можно и указывать какой код необходимо подсвечивать, для етого просто необходимо прописать класс тега код. смотрим пример ниже.
Код HTML
<code class="html undefined"> </code>
Приведен пример указанный для подсветки кода html. Недостатком данного скрипта есть то, что он не может указывать номера строк, код выводится без нумерации строк и измененного фона строки. Второй вариант подсветки более привычный нам вид отображения системного кода это скрипт SyntaxHighlighter. Который прекрасно работает на большенстве сайтов, он конечно более громоздкий, затрудняет загрузку страниц, но при этом делает нумерацию строк кода. Сейчас разберем и этот вариант подключения подсветки кода при помощи скрипта SyntaxHighlighter Скачать последнюю версию можно на сайте разработчика скачать SyntaxHighlighter Далее роспаковать архив скопировать на хостинг или в папку с сайтом на локальном компьютере папки из архива с названием scripts и styles куда душе угодно, можно просто создать папку можно в корень я приведу пример в отдельной папке назовем ее примерно shigt коротко и понятно что там SyntaxHighlighter. Теперь нам в шапке сайта на странице где необходимо подсветить код, не обязательно загружать на страници где код нет необходимости подсвечивать. Между тегами head пишим следующее.
Код HTML
<link type="text/css" rel="stylesheet" href="shigt/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="shigt/styles/shThemeDefault.css">
<script language="javascript" src="shigt/scripts/shCore.js"></script>
<script language="javascript" src="shigt/scripts/shBrushCss.js"></script>
<script language="javascript" src="shigt/scripts/shBrushJScript.js"></script>
<script language="javascript" src="shigt/scripts/shBrushPhp.js"></script>
<script language="javascript" src="shigt/scripts/shBrushSql.js"></script>
<script language="javascript" src="shigt/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'shigt/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Здесь я привожу пример подключения нескольких языков веб-программирования, php, css, sql, xml и так далее по списку. Основним файлом обработчиком есть shCore.js, также прописываем правильные пути к файлам тем. В нашем случае я выбрал самую распространенную тему деволтную. Пример работы данного скрипта вы видите на этой странице именно он подсвечивает весь программный код. Скрипты мы подключили, теперь надо заставить отделять подсвечиваемый код. Для этого мы просто заключим наш код в теги <pre class="brush: html;"></pre> и указываем язык программирования в классе. В моем случае я указал html. Вот так вот просто подключив скрипт у нас будет выводиться красивый системный код на страницах сайта. Если у кого, что не получиться пишите в комментариях будим разбирать вместе.