Как уставить и настроить highlight.js на WordPress
08.9.2008 – Рубрика: CMS
В этой заметке я расскажу как установить и настроить плагин подсветки кода для WordPress написанный Иваном Сагалаевым. Для начала качаем сам модуль с сайта разработчика highlight.js по ссылке http://softwaremaniacs.org/media/soft/highlight/highlight.zip . Архив уже сделан в виде модуля для WordPressа поэтому после разархивированния копируем в папочку wp-content/plugins. Заходим в админку вордпреса и в разделе «Плагины» включаем его. После всего это нужно указать в настройках самого плагина какие языки будут использоваться. Для этого заходим в раздел «Параметры» – «highlight.js» и в поле «Highlight Languages» через запятую пишем названия языков(css,html,javascript,php,phython). Теперь для того чтоб в посте код выводился в блоке с подсветкой синтаксиса код нужно взять в блоки
По умолчанию блок кода будет иметь вид:
Можно сделать несколько несложных правок чтоб привести его к виду:
Для этого открываем файл стилей и заменяем селектор pre code[class]:after на:
pre code[class]:after {
padding-top: 0.5em;
}
Это уберет надпись highlight: «languagename» и полосу подчеркивания над ней. После этого скачиваем картинки языков которые будут в верхнем левом углу по ссылкам:
code img
css img
html img
Закидываем их в папочку wp-content/plugins/highlight и теперь в том же файле стилей меняем стиль pre code на приведенный ниже стиль и добавляем еще два стиля
pre code {
padding:0 10px 10px;
display: block;
background:url(../code-bg.png) no-repeat #F0F0F0;
border:1px solid #C0C0C0;
border-width:1px 0 1px 0;
}
pre code.html {
background-image:url(../html-bg.png);
}
pre code.css {
background-image:url(../css-bg.png);
}
Это добавит рамку из двух полосок над блоком и картинку языка. Теперь для того чтоб отображалась нужная картинка языка при написании поста нужно добавить класс class=» html » в <code> , если представлен код на языке html. Для других языков нужно нарисовать другие картинки и таким же образом добавить стили, или довольствоваться картинкой с надписью «код» в углу.
Tags: CMS, JavaScript, WordPress
12 Отзывов to “Как уставить и настроить highlight.js на WordPress”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 11 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)
Сентябрь 22, 2008 в 16:20
ошибка (css,html,javascript,php,hython) – Python вместо hython
Сентябрь 22, 2008 в 20:34
Спасибо, исправил
Ноябрь 5, 2008 в 1:57
Заморочно как-то. Пользуюсь wp-syntax и нет проблем ни с установкой, ни с использованием.
Ноябрь 13, 2008 в 23:17
Я тоже начал использовать wp-syntax, вроде неплохо, но например мне не нужна такая куча языков. Я реально использую в постах только hmlt, css, javascript и php. По-этому может и опробую этот плагин. Он вроде полегче. Хотя wp-syntax красивее подсвечивает как по мне.
Май 28, 2009 в 15:15
Хороший топик, блог уже в закладках и не жалею об этом:)
Май 31, 2009 в 18:47
Есть кое-какое замечание, стукните в аську 235-246-245
Июнь 5, 2009 в 21:11
Хорош топик, благодарю
Август 13, 2009 в 11:52
Между прочим недавно нашел довольно интересный сайт о долгах одних юр.лиц перед другими. Называется Центр Долгов юрлиц . Нашел там кучу интересной информации о фирмах должниках. Имхо полезно для проверки подозрительных партнеров. Есть возожность добавить своих должников в базу неплательщиков.
Август 21, 2009 в 16:00
Интересный блог- ещё зайду
Декабрь 29, 2009 в 17:57
Изучаю верстку – интересно, зайду ещё.
Декабрь 29, 2009 в 17:58
«Как уста?вить и настроить highlight.js на WordPress»
Декабрь 29, 2009 в 18:00