Всем привет. Не так давно я задался вопросом как же подкрашивать вставляемые в текст коды. Поиск не занял много времени и сегодня я расскажу о результате своих поисков.
Перепробовав несколько решений я остановил свой выбор на плагине от Дмитрия Штефлюка CodeColorer.
Плагин работает с WordPress 1.5 — 2.7 2.7 – 3.0.3 так что проблем с совместимость быть не должно, но автор плагина все равно рекомендует обновиться до последней версии WordPress’а.
Итак, что же умеет этот плагин:
- автоматическая нумерация строк;
- автоматическая вставка ссылок на документацию;
- грамотное вычисление размера блока кода (короткий код будет заключен в маленький блок, для более длинного высота блока будет зафиксирована, и появятся полосы прокрутки);
- Предустановленные цветовые схемы (Slush & Poppies, Blackboard, Dawn, Mac Classic, Twitlight, Vibrant Ink);
- настройка подсветки синтаксиса в файле CSS;
- подсветка кода в комментариях;
- защита кода от искажения WordPress’ом (например, двойные кавычки, длинные тире и т.п. будут выглядеть в точности так, как Вы их ввели);
Пример html кода:
<div id="examples_id">
<div class="examples_class">
Какой-нибудь текст
</div>
</div>
Установка:
- Загрузите и распакуйте файлы плагина в каталог wp-content/plugins/codecolorer.
- Включите плагин “CodeColorer” в Site Admin (Панель управления)
- Зайдите на страницу Options/CodeColorer (Настройки/CodeColorer) в Site Admin (Панель управления) и настройте его по своему вкусу.
Настройка
Подсветка синтаксиса полностью настраивается: вы можете поменять цветовую схему как для всех языков сразу, так и для отдельного языка. Файл CSS плагина CodeColorer можно найти здесь: wp-content/plugins/codecolorer/codecolorer.css. Чтобы изменить цвета для всех языков, отредактируйте строки в секции Color scheme. Обычно, вам будет достаточно изменить следующие классы CSS:
- kw1, kw2, kw3 — ключевые слова
- co1, co2, coMULTI — комментарии
- es0 — экранированные символы
- br0 — скобки
- st0 — строки
- nu0 — числа
- me0 — методы
Для изменения цветов конкретного языка, скопируйте значения по умолчанию и добавьте имя языка с точкой в начале.
Кроме того, можно изменить ширину блоков кода в начале файла CSS. B файле прописано несколько значений для различных ситуаций, например для случая, когда ваш код размещается в
Ответы на часто задаваемые вопросы, список поддерживаемых языков и инструкцию по более тонкой настройке можно найти на странице плагина.
Последняя версия “CodeColorer” — 0.9.8, и она может быть загружена отсюда:
2leep.com
18 декабря 2010 в 1:10
Приветствую.
А у меня проблема следующего характера Codecolorer не работает в написанном мною простом шаблоне для wordpress. Может какие то требования нужны специфические в шаблоне ???
Подскажите , коли знаете.
18 декабря 2010 в 2:29
По идее никаких требований особых нет, разве что сам движок должен быть не менее чем 2.7
Если шаблон самописный проверь как у тебя вообще подключаются скрипты и стили, в этом и может быть основная проблема.
В файле header.php дложна присутствовать строчка <?php wp_head(); ?> — она отвечает за подключение сторонних стилей и скриптов (т.е. скриптов и стилей каких-либо плагинов и примочек).
Если ее нет, то вот она твоя ошибка.
21 декабря 2010 в 17:13
Версия вордпресса последняя на данный момент — 3.0.3.
СтрокИ такой и вправду у меня не было, добавил (куда добавить подсмотрел в рабочем шаблоне). Но проблему это не решило.
Главное видно, что плагин активируется, появляется нумерация строк, заключённых в тэги плагина, но сама подсветка не работает, просто белые строки.
Про то, что может не подкючаются скрипты я тоже думал, но файлик css я ложил к остальным моим файлам стилей и всё равно не разукрашивает.
До сих пор думаю, где рука дрогнула.
21 декабря 2010 в 22:58
Во-первых.
CSS-файлы плагина трогать не надо было все css и js файлы должны находиться именно там где это предусмотрел автор плагина. Может быть еще чего-то не хватает в теме. Проверь наличие строчки <?php wp_footer(); ?> (отгадай где). Некоторые скрипты грузятся в футер чтобы не замедлять загрузку страницы.
Что можно сделать:
1) Проверить наличие<?php wp_head(); ?> в файле header.php и <?php wp_footer(); ?> в footer.php
2) Снести к чертям все изменения, которые ты внес и по новой закачать плагин в /wp-content/plugins/
3) Активировать плагин через админку.
4) Энжой! При условии, что больше ничего не мешает.
Если это не поможет — блог в студию.
22 декабря 2010 в 0:35
Ну спасиб, добрый человек. Именно <?php wp_footer(); ?> и не хватало, добавил, заработало. Счастье есть, так бы ещё с месяц разбирался без твоей помощи.
Ещё раз премного благодарен!
22 декабря 2010 в 1:11
Всегда пожалуйста