Включение исходных текстов программ в блоги 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>. Иначе в начале или в конце могут появится одна пустая строка.