▼

7/23/2008

Как запостить программный код на Blogger?

Решил записать на память рецепт публикации программного кода в Blogger. Дело в том, что если вставить код просто так, его начнёт жевать блогодвижок и выдаст результат вместо кода. Особенно это неприятно в случае JavaScript.

Это, как выясняется, несложно. Для этого снова придётся править наш многострадальный шаблон, а именно вставить вот это:

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}


внутрь шаблона между 
<body> ... </body>
но перед тегом </head>.

 Это там, где идёт описание sidebar, footer и прочих элементов страницы блога.

Это не всё. Дело в том, что угловые скобки и другие символы могут жеваться всё равно, так что пропускаем наш код для вставки через эту форму. Оно будет работать только при включённом JavaScript (вырубаем NoScript на этой странице).

Теперь постим программные коды, заперев их между тегами 
<pre>...</pre>
или <code> </code>

Прошу меня за этот пост не пинать, так как вебмастер из меня ещё тот и может это кому и пригодится.


Цветовая раскраска кода для вставки в шаблон
На свете есть много вебсервисов для раскраски кода, но автору этих строк люб и дорог http://hilite.me/

Кроме этого, раскраска кода для вставки в пост делается с помощью Kate: подсвеченный в Kate программный код можно экспортировать в HTML  через меню File -> Export as HTML

Для автоматической подсветки синтаксиса есть higlight.js от Ивана Сагалаева. Но могут быть проблемы с угловыми скобками при переключении в онлайн редакторе поста из WYSIWYG в html режим.


Перевод изображений в Base64
Может потребоваться, если вы внедряете изображения в шаблон блога и не хотите, чтобы они постоянно дёргались со стороннего вебсервиса. Несколько вебсервисов, которые могут переводить изображения в Base64:
Кто знает другие сервисы - пишите в комментариях.

Изображения бывают разными, и стоит учитыавть разницу между фотореалистичными изображениями (подходит формат JPG) и скриншотами программ (лучше бы их сохранять в PNG). Иллюстрация на тему:

Стоит задуматься.

14 комментариев:

  1. PhoeniX23 июл. 2008 г., 19:45:00

    Если вы пользуетесь Vim можете опробовать мой метод

    ОтветитьУдалить
  2. Ilya Zonov23 июл. 2008 г., 19:51:00

    Тоже долго думал как же блин так красиво сделать для вставки кода. Очень люблю чтобы все было красиво и как надо подсвечено. В связи с этим было найдено следующее решение: пишу все посты теперь в emacs-muse. Просто использую тег <src>. Важно также чтобы был установлен пакет htmlize. После экспорта в html все будет красиво расскрашено, остается только запостить это дело в блог.
    В вашем случае был бы получен следующий кусок:

    <pre class="src">
    <span style="color: #0000ff;">pre</span>
    {
    <span style="color: #b8860b;">background</span>:#efefef;
    <span style="color: #b8860b;">border</span>:1px solid #A6B0BF;
    <span style="color: #b8860b;">font-size</span>:120%;
    <span style="color: #b8860b;">line-height</span>:100%;
    <span style="color: #b8860b;">overflow</span>:auto;
    <span style="color: #b8860b;">padding</span>:10px;
    <span style="color: #b8860b;">color</span>:#000000 }
    <span style="color: #0000ff;">pre:hover </span>{
    <span style="color: #b8860b;">border</span>:1px solid #efefef;
    }
    <span style="color: #0000ff;">code </span>{
    <span style="color: #b8860b;">font-size</span>:120%;
    <span style="color: #b8860b;">text-align</span>:left;
    <span style="color: #b8860b;">margin</span>:0;<span style="color: #b8860b;">padding</span>:0;
    <span style="color: #b8860b;">color</span>: #000000;}
    <span style="color: #0000ff;">.clear </span>{ <span style="color: #b8860b;">clear</span>:both;
    <span style="color: #b8860b;">overflow</span>:hidden;
    }
    </pre>

    Блин к сожалению в комментах тут нельзя html постить, а то бы сразу посмотрели бы как это выглядит. Думаю попозже напишу у себя как это все использую по-подробнее.

    ОтветитьУдалить
  3. virens23 июл. 2008 г., 21:11:00

    2 PhoeniX пишет...
    Если вы пользуетесь Vim можете опробовать
    Я пишу посты в Scribefire, хотя метод в vim интересный.

    2 puzan пишет...
    Тоже долго думал как же блин так красиво сделать для вставки кода.
    Да даже не красиво, а просто чтобы было.


    пишу все посты теперь в emacs-muse.
    Хорошо бы чтоб метод был не редакторо-зависимый.

    Думаю попозже напишу у себя как это все использую по-подробнее.
    Пишите, а я ссылку поставлю.

    ОтветитьУдалить
  4. Yuri Volkov23 июл. 2008 г., 22:28:00

    для автоматической подсветки синтаксиса могу порекомендовать higlight.js от Ивана Сагалаева. У себя в блоге использую именно этот скрипт. Единственное - с угловыми скобками проблема при переключении в онлайн редакторе поста из WYSIWYG в html режим. Но с этим вполне можно жить :)

    ОтветитьУдалить
  5. PhoeniX23 июл. 2008 г., 22:48:00

    2 virens: в том-то и прелесть, что прямо из любимого редактора, в котором код пишется, он экспортируется в пригодный для постинга вид.

    ОтветитьУдалить
  6. virens24 июл. 2008 г., 05:21:00

    2 Yuriy Volkov пишет...
    для автоматической подсветки синтаксиса могу порекомендовать higlight.js от Ивана Сагалаева
    Спасибо, на досуге попробую его приладить в Blogger.

    2 PhoeniX пишет...
    в том-то и прелесть, что прямо из любимого редактора
    Ну да, только любимых редакторов столько же, сколько и пользователей :-)

    ОтветитьУдалить
  7. PhoeniX25 июл. 2008 г., 18:30:00

    Ну скажем так - учитывая специфику вашего и моего блогов, это с (очень) большой долей вероятности Vim или Emacs, и для обоих вариантов в том посте есть решение (для Emacs подсказал в комментах верный ему Павел).

    ОтветитьУдалить
  8. Анонимный31 июл. 2008 г., 00:16:00

    Дело в том, что если вставить код просто так, его начнёт жевать блогодвижок и выдаст результат вместо кода.

    Интересно. Все как-то сразу начали обсуждать редакторы и подсветку синтаксиса, но никто не подумал, что такая "фича" Блоггера просто потенциально опасна!

    ОтветитьУдалить
  9. virens1 авг. 2008 г., 16:00:00

    2 PhoeniX пишет...
    Ну скажем так - учитывая специфику вашего и моего блогов, это с (очень) большой долей вероятности Vim или Emacs
    Не угадали - это Kate :-) Ибо привык и прикипел.

    Vim пользую для конфигов.

    2 seoprogrammer пишет...
    Вот посмотри еще мой вариант, тоже базируется на SyntaxHighlighter
    Гляну. Мне бы даже не подсвечивать синтаксис, а чтобы блоггеровский движок его хотя бы не жевал.

    2 Анонимный пишет...
    Все как-то сразу начали обсуждать редакторы и подсветку синтаксиса
    Ну почему, вполне логично. Решение, чтобы движок не жевал код, я нашёл и применил. Есть мысль его раскрасить - в общем, достаточно логично.

    ОтветитьУдалить
  10. Вячеслав22 мар. 2009 г., 22:10:00

    Здравствуйте Михаил! Я попробовал сделать так, как вы сказали, но не получилось. Вы допустили одну ошибку:
    Эти стили:

    pre
    {
    background:#efefef;
    border:1px solid #A6B0BF;
    font-size:120%;
    line-height:100%;
    overflow:auto;
    padding:10px;
    color:#000000 }
    pre:hover {
    border:1px solid #efefef;
    }
    code {
    font-size:120%;
    text-align:left;
    margin:0;padding:0;
    color: #000000;}
    .clear { clear:both;
    overflow:hidden;
    }


    нужно ставить перед тегом </head>.

    ОтветитьУдалить
  11. gavenkoa10 авг. 2012 г., 22:30:00

    См. мой путь в http://brain-break-ru.blogspot.com/2009/07/blogger.html

    Замечателен также комент по поводу агрегаторов типа planet...

    ОтветитьУдалить
  12. virens11 авг. 2012 г., 10:33:00

    На дворе дождь и слякоть, и вот - Аллилуя! - автор добрался и до этого поста. О котором уже успел забыть.

    @Вячеслав комментирует...
    Вы допустили одну ошибку:
    Есть такое. Исправил в посте. Сам пост дополнил и расширил.

    @Oleksandr Gavenko комментирует...
    См. мой путь
    Вообще я обычно подобные комментарии удаляю сходу за пиар. Подробнее надо писать, товарищи!


    Да, в пост добавлены и другие вещи. Чтобы новых не плодить, решил отгрузить сюда про раскраску кода и перевод картинок.

    ОтветитьУдалить
  13. gavenkoa12 авг. 2012 г., 03:15:00

    Вообще я обычно подобные комментарии удаляю сходу за пиар. Подробнее надо писать, товарищи!

    Вот напрасно...

    Есть очень существенное ограничение подхода с js и не-inline в случае агрегации блога например в planet (софт такой, думаю понятно).

    Об этом я за экономией времени не писал, не повторялся но ссылку дал...

    Мои посты с кодом на Emacs'овской планете из-за этого поплыли...

    А еще в сорцах планеты имеются фильтры для тегов и атрибутов. Возможно придется связываться с администратором для включения поддержки некоторого их числа...

    Удачи!

    ОтветитьУдалить
  14. gavenkoa12 авг. 2012 г., 03:23:00

    Перевод изображений в Base64


    $ { printf '[img src="data:image/png;base64,'; \

    base64 $FILE.png; \

    printf '/]'; }


    Обобщить код не тяжело. Зачем web сервисы??

    ОтветитьУдалить