среда, 21 декабря 2011 г.

[blog] Вставка раскрашенных фрагментов кода в блог

В комментарии к предыдущей заметке ув.тов.Eugeniy спросил о том, как я вставляю раскрашенные фрагменты кода в блог. Решил ответить в виде отдельной заметки на случай, если кому-то еще это пригодится.

Для написания заметок я использую Windows Live Writer. Когда мне нужно вставить фрагмент кода, то использую редактор vim + следующий заготовленный фрагмент HTML:

<table width="100%" bgcolor="#000040"><tbody>
    <tr>
      <td><font color="#c0c0c0" face="monospace">
          </font>
      </td>
    </tr>
  </tbody></table>

Этот фрагмент я добавляю в HTML-код заметки. После чего набираю в vim-е фрагмент исходного кода и даю vim-у команду TOhtml:

Далее выделяю нужный мне кусок сгенерированного vim-ом HTML-я и вставляю его в заранее заготовленный HTML-ный фрагмент в тексте заметки. Получается что-то вроде:

<table width="100%" bgcolor="#000040"><tbody>
    <tr>
      <td><font color="#c0c0c0" face="monospace">
<font color="#ff80ff">#include&nbsp;</font><font color="#ffa0a0">&lt;iostream&gt;</font><br>
<br>
<font color="#60ff60">int</font>&nbsp;main() {<br>
&nbsp;&nbsp; std::cout &lt;&lt;&nbsp;<font color="#ffa0a0">&quot;Hello, colorfull World!&quot;</font>&nbsp;&lt;&lt; std::endl;<br>
}          </font>
      </td>
    </tr>
  </tbody></table>

И это все в результирующем виде будет выглядеть так:

#include <iostream>

int main() {
   std::cout << "Hello, colorfull World!" << std::endl;
}

Цветовая гамма, в которой vim генерирует HTML, соответствует обычной цветовой гамме, которую я vim-у задал для себя (т.е. именно такие цвета я использую в повседневной работе).

Теперь о том, почему я остановился именно на таком способе оформления фрагментов кода. Когда озадачился этой темой, то погуглил по Интернету. И нашел, что самые красиво выглядящие способы требуют изменения CSS-ов и подключения каких-то JavaScript-овых инструментов. Чего мне совсем не хотелось, т.к. лень было разбираться с правкой CSS в blogger-е, да и не хотелось, чтобы вместе с моими заметками к пользователю грузились еще какие-то JavaScript-ы. Мне показалось, что сделать раскрашенный фрагмент вручную намного проще и дешевле ;)

3 комментария:

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

Вот же есть
http://source.virtser.net/

Евгений Охотников комментирует...

Для этого нужно иметь подключение к интернету. В свое время я на dial-up-е сидел и заметки писал только в offline.

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

http://source.virtser.net/ -- че-то я там с++ не заметил

да и вообще, когда есть оффлайновый вариант, я предпочитаю его, и не зря

например, онлайновый поиск, сделанный говнокодерами, может *тихо* выдать 0 результатов на поиск по 2 буквам по той причине, что результатов может быть слишком много -- но они нужны мне все

или недавно говнопоиск на mail.ru отличился -- видимо, в связи с выходом фильма про высоцкого, с целью защиты Священных Прав Копирайта, *тихо* перестал искать видео по слову высоцкий ("ничего не найдено" и все)

тем не менее, их все можно было найти по слову, емнип, "высоцк"

з.ы. епрст, авторам этого идиотизма на мейл.ру следовало включить мозги и заблочить хотя бы не все видео, а те, что длиннее 1 часа