Подсветка синтаксиса исходного кода в блоге на сегодняшний день уже не роскошь, а признак хорошего тона. Действительно, подсвеченный синтаксис не только смотрится респектабельней по сравнению с неподсвеченным, но и существенно лучше читается и поддается анализу. Разумеется “спрос рождает предложение”. Инструментов в этой области уже придумано немало и именно об этих инструментах моя очередная статья.
Инструментарий используемый для подсветки синтаксиса исходных кодов можно разделить на две категории (по способу обработки) – на статические и динамические.
- Статические – обработка (подсветка) синтаксиса кода происходит на этапе написания статьи и не требует каких-либо специальных обработчиков. В качестве плюсов этой группы инструментов хотелось бы отметить быструю загрузку статьи посетителем и стабильность отображения. К минусам – невозможность правки подсветки всех опубликованных кодов исправлением в одном месте (в обработчике), существенное увеличение объёма исходного кода статьи и неудобство правки самого публикуемого кода.
- Динамические – обработка (подсветка) синтаксиса кода производится обработчиком при загрузке страницы статьи пользователем (посетителем). Плюсы: возможность поменять правила подсветки кода с помощью небольших изменений как в коде обработчика, так и в коде статьи, более лёгкая правка самого публикуемого кода и достаточно компактный код статьи, а так же возможность добавления дополнительных сервисов для посетителей. Минусы: большее время загрузки страницы статьи за счет загрузки софта обработчика.
Перейдём к конкретным инструментам.
Статические
Среди статических инструментов чаще всего встречаются add-on’s и plug-in’s для блог-клиентов, как встроенные, так и подгружаемые. Поскольку я, в некотором роде, являюсь поклонником Windows Live Writer, то, в качестве примера, приведу несколько дополнений для WLW.
Code Snippet plugin for Windows Live Writer – вставка и подсветка синтаксиса исходного кода.
Insert Source Code Snippet – вставка и подсветка кода из буфера обмена, скопированного из Visual Studio или какого либо другого инструмента разработчика.
Кроме дополнений к блог-клиентам существуют сетевые сервисы, которые позволяют сделать то-же самое не устанавливая дополнения. Это удобно для тех, кто не пользуется блог-клиентами для написания статей. Вот типичный пример:
Source Code Highlighter – выдаёт подсвеченный код в HTML-коде.
Динамические
highlight.js – подсветка синтаксиса в примерах кода в блогах, форумах и вообще на любых веб-страницах. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает.
Скриншот:
Поддерживается подсветка следующих языков:
- Python
- Ruby
- Perl
- PHP
- XML
- HTML
- CSS
- Django
- Javascript
- VBScript
- Delphi
- Java
- C++
- Lisp
- RenderMan (RSL и RIB)
- Maya Embedded Language
- SQL
- SmallTalk
- Axapta
- 1С
- Ini
- Diff
- DOS .bat
- Bash
Инструкция по установке
WordPress – для установки highlight.js в WordPress в комплекте поставки есть соответствующий плагин.
Для установки плагина надо скопировать всю директорию с файлами highlight.js в директорию плагинов WordPress. После этого в панели плагинов его можно будет включать и отключать. В меню Options также добавляется страничка highlight.js, где можно настраивать список языков и CSS-стили.
Blogger – для установки highlight.js в Blogger (XML тема) необходимо вставить следующий код, где-нибудь в районе закрывающего тега body (перед тегом).
|
1 2 3 4 |
<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script> |
Для уменьшения времени загрузки можно ограничить автоопределение языков списком используемых языков:
|
1 2 3 4 |
<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad('html', 'css'); </script> |
Полный список классов для разных языков приведен в readme.rus.txt.
Для определения цветов подсветки используйте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .comment { color: gray; } .keyword { font-weight: bold; } .python .string { color: blue; } .html .atribute .value { color: green; } </style> |
разместите его перед закрывающим тегом head.
Использование
В тексте статьи для подсветки синтаксиса исходного кода используйте следующую конструкцию:
|
1 |
<pre><code>...</code></pre> |
для принудительного использования подсветки конкретного языка или для отказа от подсветки используйте параметр class тега code:
|
1 2 3 4 5 |
<!-- Подсветить HTML --> <pre><code class="html">...</code></pre> <!-- Не подсвечивать --> <pre><code class="no-highlight">...</code></pre> |
P.S. Продолжение следует. У меня есть в запасе ещё пара неплохих прибомбасов на эту тему.
© 2008 – 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
вобщем в продолжении проблемы на blogspot.com для себя я решил оставить все как есть, и использовать статическую подсветку, благо у highlight имеется офлайновая разметка (да и не было можно самому написать)
как ни странно заработало, после того как макет был приведен к следующему:
code {
font-size: 90%;
/*white-space:normal;
color:#666;*/
}
я так понял проблема была в white-space:normal хотя не пойму почему *dontknow*
хочу обратить внимание я больше блок code нигде не переопределял, т.е. наложение исключено
“Темна вода во облацех”. Лично меня напрягает отсутствие полного контроля в Blogspot, ну, или хотя бы его видимости ;). Здесь кстати возможно наложилось стремление blogspot к исправлению кода поста и css highlighter’а, плюс в теме что-то могло быть. Если копать в чём причина, нужно рассматривать все факторы.
это верно, без полного контроля найти проблему проблематично
кстати мне в поиске помог брутфорс 🙂
сначала проверил <pre>, он отработал нормально, затем уже проверил <code> вот тут то и вылезло, в общем полез в XML-шаблон.
Может кому интересно будет
еще вопрос как стать постоянным читателем? или это невозможно по причине разных сервисов?
2 SiMBa: Я думаю, что борьба с глюками и методы выхода из создавшегося положения всегда и всем интересны 🙂 . Что касается “постоянных читателей“: то, что Вы имеете ввиду, является частью сервиса Blogger и использование его в WordPress не представляется возможным. Впрочем, существуют и другие сервисы. С одной стороны, не хотелось бы перегружать блог (на одном из блогов сетовали, что мой блог на blogspot очень тяжело грузится), а с другой стороны … Если народ просит … Надо подумать 😉
в принципе сильно не надо я на feed подписался.
насчет перегрузки блога, действительно на blogspot перегружен был.
кстати в настройках blogspot’a видел перенаправление, можно было бы сюда сделать перенаправление.
Блог на blogspot’е ещё пригодится, как площадка для демонстрации и тестирования виджетов и шаблонов тем …