dimoning.ru
Это блог о сео, деньгах, заработке в сети, разработке своих проектов, программировании
и "жизни программиста", бизнесе, блогосфере, фрилансе и многом другом.

Контакты, Реклама в блоге

Подсветка синтаксиса для блога WordPress с помощью highlight

Автор DimoninG, написано 20.06.2008

Рубрика на WordPress

Вот, что может получиться с помощью библиотеки highlight.js:

#include "stdio.h"
void main(void){
    int a;
//hello!
    for (a = 0; a < 10; a++){
        printf ("hello!");
    }
}

И CSS + HTML:


.hello{
    font-size: 10px;
}


<body>
    <font size="2"> барби-сайз! </font>
    <p> тест </p>
</body>

По-моему совсем неплохо! А теперь подробнее – где скачать, как использовать и настраивать.

Про эту чудо-библиотеку я на Вирусном СЕО, за что автору большое спасибо

Сама библиотека может работать не только на вордпрессе – ее достаточно подключить как JS-файл, активировать. Она сама ищет код на странице и раскрашивает его

Я же воспользовался HighLight плагином для WordPress, потому, что поставить ее вручную у меня не вышло (или я где-то ошибся). Установка простая, как обычно: всего лишь заливаем плагин в каталог wp-plugins и активируем его в «Плагинах».

В настройках можно указать, какие языки Вы используете (если не указывать языки явно, то будут использоваться все языки, что может замедлить работу библиотеки). У меня используются css, html, php, cpp. Вот весь список поддерживаемых языков (если хотите использовать язык, введите его в соответствующее поле; несколько языков вводятся чере запятую): python, ruby, perl, php, css, xml, html, django, javascript, java, cpp, sql, smalltalk, ini, diff, 1c, axapta, delphi, rib, rsl, vbscript, profile, dos, bash.

Я привел список языков, т.к. даже на официальном сайте его не нашел и пришлось лезть в исходники.

Библиотека так же позволяет изменить оформление кода с помощью CSS (подробнее читайте на официальном сайте). Но я не стал раскрашить код сам – я не дизайнер, ужасно получится

По поводу использования библиотеки: в блоках текста, заключенных в <pre><code>…</code></pre> библиотека будет искать код и пытаться его раскрашивать.

У меня есть некоторые сомнения по поводу быстродействия библиотеки, но хорошо хотя бы то, что она выполняется на стороне клиента (т.к. javascript). Тем не менее, фактически, время загрузки документа это все равно увеличивает, хоть и снимает нагрузку на сервер.

Приятного использования.