Доделываем плагин wp-syntax

Использовав штатную возможность плагина wp-syntax нумерации строк, обнаружил что стили темы Wp влияют на вид блока с исходным кодом не лучшим образом. Вот как это выглядело: расхлябанный wp-syntax

Будем бороться!

Одним из повседневных и незаменимых для меня инструментов это firebug. С его помощью удобно проинспектировать любой элемент на странице и быстро определить почему же он выглядит именно так, и налету примерить к нему другие стили, отредактировать разметку страницы, удалить любой Dom-элемент. Во всех популярных браузерах теперь уже есть альтернативы, чаще встроенные инспекторы кода, но по удобству пока ни один я не могу сравнить с firebug-ом для Firefox.

Исследовав стиль блока генерируемого wp-syntax, я нашёл целый букет свойств, наследуемых в основном от верхнего div’а страницы #content. Править его свойства — значит, нарушить стили отображения всего блога, поэтому я принял решение файл wp-syntax.css, где сбросить ненужные свойства и добавить которые хотелось бы для блока div.wp_syntax. Этот файл находиться в папке с плагином. По-умолчанию там определены только общие стили, раскраска же синтаксиса в красивые цвета (главная изюминка плагина) делается inline-стилями, которые добавляются плагином при парсинге во время вывода страницы.

Поиграв со стилями, я привёл блок к следующему виду:

144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
    $output = "\n<div class=\"wp_syntax\">";
 
    if ($line) {
        $output .= "<table><caption>Исходный код $language:</caption><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else {
        $output .= "<section class=\"code\"><h1>Исходный код $language:</h1>";
        $output .= $geshi->parse_code();
        $output .= "</section>";
    }
    $output .= "</div>\n";
 
    return $output;
}


/* изменения для обнуления стилей наследуемых блоком .wp_syntax от #content из style.css */
#content .wp_syntax table{margin: 0;} /* нижний отступ */
#content  .wp_syntax  tr td{padding: 2px;}
#content  .wp_syntax  .code pre{background: #def;}
#content  .wp_syntax  .line_numbers pre {background: black; color: white}
#content  .wp_syntax  pre {padding: 0 0 0 1em; margin: 0;}
#content  .wp_syntax  caption, #content  .wp_syntax h1  {text-align: left; font: italic bold 90% Arial; padding-left: 4px; margin: 0;}

Эта запись была опубликована в рубрике Доработка Wordpress'а надфилем, Основное и отмечена метками , , . Добавить в закладки ссылку.

1 в ответ на Доделываем плагин wp-syntax:

  1. Пинг: Обновление WP-syntax до 0.9.13 | samizdam.net

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>