2009-07-14

Включение исходных текстов программ в блоги blogger.

Для включения исходных текстов программ наиболее просто воспользоваться тегом <pre>. Но таким образом обрамленный текст будет сложно различим среди основного текста статьи, к тому же длинные строки будут перекрываться с содержимым sidebar (правой колонки блога) или вылазить за границы окна браузера.

Предлагается способ решения указанных проблем с использованием таблиц стиля (CSS).

Ниже приведен пример как выглядит текст в тегах <pre> на странице blogger:
#include <stdlib>

int main()
{
    puts("hello world!");

    return 0;
}

После добавления стиля:

div#code { border: dotted 1px $bordercolor; background: $codebgcolor; width: 95%; overflow: auto; line-height: 1em; margin: 5px; padding: 5px; white-space: pre; font-family: monospace; }
и добавления определения переменной codebgcolor:
<Variable name="codebgcolor" description="Code Background Color" type="color" default="#fff" value="#fffff0">
исходный текст программы стал виден как:
#include <stdlib> int main() { puts("hello world!"); return 0; }
Небольшое пояснение назначения элементов стиля:
border: dotted 1px $bordercolor;
граница области <div> в точечку, тоненькая, цвета, определенного в шаблоне
background: $codebgcolor;
используем специально определенный цвет фона
width: 95%; overflow: auto;
делаем ширину области фиксированной, при наличии длинных строк появится горизонтальная полоса прокрутки
line-height: 1em;
междустрочный отступ определен в верхнеуровневых тегах и выглядит ужасно для текста программы, определяем явно "хороший" отступ
margin: 5px; padding: 5px;
лучше выглядит когда рамка не сливается с текстом
white-space: pre; font-family: monospace;
позволяет тегу <div id="code"> вести себя как тег <pre>

Цвета фона я подбирал в Layout ==> Fonts and Color для новоопределенной переменной codebgcolor (здесь доступен вид блога сразу, on fly). Остановился на светло светло желтом.

Используется стиль следующим образом:

<div id="code">line-1 line-2 ... line-(n-1) line-n</div>
Первая строка текста должна находится на той же строке что и открывающийся тег <div id="code">, последняя строка текста должна находится на той же строке что и закрывающийся тег </div>. Иначе в начале или в конце могут появится одна пустая строка.

4 comments:

gavenkoa комментирует...

Очень интересный пост (хвалю сам себя)!

Виктор Деревянко комментирует...

Вот здесь описано, как прикрутить к блоггеру полноценный SyntaxHighligher

gavenkoa комментирует...

В связи с дополнительными требованиями ни мой способ, ни SyntaxHighlighter, ни google-code-prettify с определенного момента мне не подходят.

Фиды, синдицируемые в planet.emacsen.org, мало того что обрабатываются фильтром, так еще и настройки из шаблона Blogger СОВСЕМ НЕ ПОПАДАЮТ в RSS/Atom.

Потому необходимо дублировать описания в атрибуте 'style="..."', да еще связаться с администратором агрегатора с просьбой установить приемлемые политики фильтров (с emacsen проблем нету, но другие планеты заподозрены в производстве бяк).

Виктор Деревянко комментирует...

Понятно. Кстати, если не секрет - каким образом вы добились от гаджета "Archive", чтобы он показывал полное дерево сообщений, а не только сообщения последнего месяца? Очень удобно. Нестандартный гаджет?