среда, 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-ы. Мне показалось, что сделать раскрашенный фрагмент вручную намного проще и дешевле ;)

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