Автоматическая подсветка любого кода в блогах и HTML документах
1 июня, 2008Часто в блоге или где-то ещё требуется вставить в HTML некоторый код на каком-либо языке (CSS, HTML, Perl, PHP, JS, C и т.д.). Особенно это актуально в программистских-технических блогах.
У меня возникла такая необходимость относительно недавно в посте про парсинг сайтов и прочей фигни 
В тот раз я как выкрутился. Файл PHP переименовал в .phps - вызвал, он РНР подстветил мне код и я скопировал готовый HTML и вставил его в блог. Решение конечно интересно, но согласитесь, постоянно так извращаться - не выход. Нужно какое-то быстрое и простое решение.
Сейчас опять возникла необходимость во вставке кода PHP в HTML этого блога. Как? Недолго думая - я загуглил на эту тему и через 5 минут у меня было уже готовое решение, которое я тут же прицепил к этому блогу.
Ближе к делу…
Итак, если хотите красивую автоматическую подсветку любого известного языка программирования в Ваш блог - делаем следующее.
- Идём на сайт разработки проекта ““.
Скачиваем там себе “Highlight.js” и распаковываем. - Создаём тестовый файл для проверки test.html, где пишем:
<head> ... <link rel="stylesheet" title="Default" href="styles/default.css"> </head> <script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> initHighlightingOnLoad('php', 'html', 'css'); </script> <pre><code class="php">...тут РНР код...</code></pre>
Аналогичным образом можно подсвечивать не только РНР код. Этот проект поддерживает достаточное количество языков подсветки, судите сами:
- Python
- Ruby
- Perl
- PHP
- XML
- HTML
- CSS
- Django
- Javascript
- VBScript
- Delphi
- Java
- C++
- RenderMan (RSL и RIB)
- SQL
- SmallTalk
- Axapta
- 1С
- Ini
- Diff
- DOS .bat
- Bash
Вызывать библиотеку можно ещё вот так:
initHighlightingOnLoad();
Но не советую инициализировать скрипт подобным образом, поскольку он попытается автоматически распознать подсвечиваемый язык, что не всегда можно сделать корректно и второе - это время затрачиваемое на данную операцию. Так естественно долже. Поэтому, если знаете какой язык нужно подсвечивать - пропишите его сразу в “class“.
Как подключить этот скрипт к WordPress?
Сделать это можно двумя путями. Простым и не очень.
Простой - это использовав плагин ВордПресса wp_highlight.js.php, который идёт в архиве с Highlight.js.
Посложнее путь - это самостоятельно расположить все файлы скрипта и вручную подключить его в тему.
Я выбрал именно этот путь. Зачем? Не доверяю я этим всем плагинам, из-за них частенько при апдейтах “ломается” вордпресс. А если не сложно сделать вручную, то зачем вешать лишний плагин?
Поэтому на этом методе я остановлюсь поподробнее, тем более он не настолько уж и сложный.
Он состоит всего лишь из добавления вот этих строк подключения:
<style type="text/css">@import url(wp-content/themes/THEME_NAME/highlight/highlight.css);</style>
<script type="text/javascript" src="wp-content/themes/THEME_NAME/highlight/highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad('php', 'html', 'css');
</script>В файлы темы THEME_NAME (замените на название Вашей темы оформления). Файлы такие:
- index.php - чтобы подсвечивался код на главной
- single.php - подсветка на странице поста
Теперь код будет автоматически подсвечиваться.
Вы пока не обращайте внимания на то, что в блоге у меня не очень красивая подсветка.. я просто сейчас в процессе дизайна своей подсветки (это скрипт также предоставляет!). Поэтому, пока что провожу эксперименты с подходящим вариантом подсветки.
Ну вот и всё! Как грится, “вот и все чудеса”!
Надеюсь этот пост пойдёт кому-нибудь на пользу!
Наслаждайтесь!
12 Responses to “Автоматическая подсветка любого кода в блогах и HTML документах”
Стёпыч [01.06.08 17:32] | Reply
хорошая статья, пиши еще!
SEOVirus [02.06.08 08:00] | Reply
Спасибо!
Буду стараться писать дальше!
DimoninG [20.06.08 02:15] | Reply
Спасибо! Только озаботился такой фигней… Хотя что-то мне подсказывает, что новые типы данных и прочее (C++) эта штука не подсвечивает. Ну сейчас и проверим.;)
DimoninG [20.06.08 03:06] | Reply
Вы дали мне вдохновение на эту статью:
Спасибо!
Еще пара замечаний по Вашей статье: у Вас, очевидно, тема в каждом файле использует свой хедер (), обычно в темах хедер располагается в одном файле (header.php), поэтому разместить код инициализации можно только там. Не нашел у Вас языка C++, долго пытался его добавить как c++ или c - не работало. Поэтому у себя я написал используемые в библиотеке названия языков.
SEOVirus [20.06.08 21:17] | Reply
Пожалуйста!
Язык C++ там значится как cpp..
Иван Сагалаев [25.06.08 15:23] | Reply
DimoninG:
> Только озаботился такой фигней… Хотя что-то мне
> подсказывает, что новые типы данных и прочее (C++)
> эта штука не подсвечивает. Ну сейчас и проверим.;)
Если найдете, что не подсвечивается или подсвечивается некорректно — пишите на
aktuba [05.07.08 15:50] | Reply
Еще можно использовать GeShi, есть даже плагин для Wordpress, на его основе. А я себе сделал для подсветки синтаксиса.
Доктор Портфолиус [01.03.09 05:10] | Reply
Есть проблемка, он не настраивает css, у меня сайт темный, и пришлось использовать другое решение для этого.
sarmad [07.06.09 22:00] | Reply
Товарищи запомните HTML это не язык программирования,это язык разметки гипертекста-мне за это на экзамене по информатике 1 балл не зачли
SEOVirus [10.06.09 19:04] | Reply
Ну дык да, мы знаем
TRSteep [29.04.10 16:53] | Reply
А есть решение без javascript?