Подсветка кода в блоге.

Для нормального программерского блога, само собой, необходима грамотная подсветка кода.

Для этой цели можно использовать онлайн-скрипты. Поддержку достаточно большого количества языков и неплохой внешний вид обеспечивают сайты ToHtml и HiLiteMe. Но мы не ищем легких путей и хотим автоматической подсветки кода, без хождения на сторонние сайты, да ещё с поддержкой хотя бы языка VHDL.

Отличное руководство расположено вот здесь: Подсветка синтаксиса в блоге на Blogger.com. По ссылке описано подключение в шаблон вашего журнала библиотеки highlight.js. Единственное замечание, что теперь стандартный пакет скриптов расположен по другому адресу, который можно найти здесь: Описание highlight.js.

Код на Си:

int main(void)
{
  printf("Привет, мир!\n");
  return 0;
}

Отличный вариант, но в highlight.min.js нет поддержки VHDL. Поэтому качаем отсюда http://softwaremaniacs.org/soft/highlight/download/ упакованный скрипт с поддержкой всех нужных нам языков (я выбрал все доступные). Извлекаем из архива файлы, и видим файл highlight.pack.js, содержащий скрипты для всех доступных языков.

Раз у нас уже есть этот блог, то логично и файл выложить на сервер гугла. Для этого заводим сайт на Сайты гугл - не бойтесь, это очень быстро, если у вас почта гугла. На сайт добавляем новую страницу типа «Файловый менеджер», и загружаем туда highlight.pack.js. Ссылка на файл выглядит вот так https://sites.google.com/site/programmerpractice/fajly/highlight.pack.js?attredirects=0&d=1, удаляем лишнее, и получаем прямую ссылку на файл https://sites.google.com/site/programmerpractice/fajly/highlight.pack.js. Теперь по руководству, на которое я ссылался выше, можно воспользоваться моим файлом, а стили настроить индивидуально в шаблоне вашего журнала.

Код на VHDL:

-- AND gate (ESD book figure 2.3)  
-- two descriptions provided

library ieee;
use ieee.std_logic_1164.all;

entity AND_ent is
port( x: in std_logic;
 y: in std_logic;
 F: out std_logic
);
end AND_ent;  

architecture behav of AND_ent is
begin
    F <= x and y;
end behav;

После этого останется только отредактировать стиль, цвета и форматирование в шаблоне вашего блога по вкусу (см. секцию pre code{}, которую вы скопировали из файла *.css из каталога "styles\", который шел в комплекте с библиотекой highlight в тексте шаблона). Я, например, добавил в pre code{}:

background:white;

border:solid gray;

border-width:.1em .1em .1em .8em;

padding:.2em .6em;

и получил симпатичные рамочки.

Итак, всё, что теперь нам нужно для автоматического форматирования кода, - это выделять текст с исходным кодом парой тэгов <pre><code>текст программы</pre></code>. Т.к. при малом количестве кода язык кода может определяться неверно (как в моем случае с Си), то можно вручную указать язык в теге <code>: <code class="python"> или <code class="cpp"> и т.д.