Как уставить и настроить highlight.js на WordPress

Orosi — Sat, 09 Aug 2008 17:32:43 +0000

В этой заметке я расскажу как установить и настроить плагин подсветки кода для 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 » в , если представлен код на языке html. Для других языков нужно нарисовать другие картинки и таким же образом добавить стили, или довольствоваться картинкой с надписью «код» в углу.

ZODIOS.net » WordPress

Как уставить и настроить highlight.js на WordPress