Решил записать на память рецепт публикации программного кода в 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:- http://www.freeformatter.com/base64-encoder.html
- http://www.dailycoding.com/Utils/Converter/ImageToBase64.aspx
Изображения бывают разными, и стоит учитыавть разницу между фотореалистичными изображениями (подходит формат JPG) и скриншотами программ (лучше бы их сохранять в PNG). Иллюстрация на тему:
14 комментариев: |высказаться!| RSS-лента дискуссии.|
Если вы пользуетесь Vim можете опробовать мой метод
Тоже долго думал как же блин так красиво сделать для вставки кода. Очень люблю чтобы все было красиво и как надо подсвечено. В связи с этим было найдено следующее решение: пишу все посты теперь в 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 постить, а то бы сразу посмотрели бы как это выглядит. Думаю попозже напишу у себя как это все использую по-подробнее.
2 PhoeniX пишет...
Если вы пользуетесь Vim можете опробовать
Я пишу посты в Scribefire, хотя метод в vim интересный.
2 puzan пишет...
Тоже долго думал как же блин так красиво сделать для вставки кода.
Да даже не красиво, а просто чтобы было.
пишу все посты теперь в emacs-muse.
Хорошо бы чтоб метод был не редакторо-зависимый.
Думаю попозже напишу у себя как это все использую по-подробнее.
Пишите, а я ссылку поставлю.
для автоматической подсветки синтаксиса могу порекомендовать higlight.js от Ивана Сагалаева. У себя в блоге использую именно этот скрипт. Единственное - с угловыми скобками проблема при переключении в онлайн редакторе поста из WYSIWYG в html режим. Но с этим вполне можно жить :)
2 virens: в том-то и прелесть, что прямо из любимого редактора, в котором код пишется, он экспортируется в пригодный для постинга вид.
2 Yuriy Volkov пишет...
для автоматической подсветки синтаксиса могу порекомендовать higlight.js от Ивана Сагалаева
Спасибо, на досуге попробую его приладить в Blogger.
2 PhoeniX пишет...
в том-то и прелесть, что прямо из любимого редактора
Ну да, только любимых редакторов столько же, сколько и пользователей :-)
Ну скажем так - учитывая специфику вашего и моего блогов, это с (очень) большой долей вероятности Vim или Emacs, и для обоих вариантов в том посте есть решение (для Emacs подсказал в комментах верный ему Павел).
Дело в том, что если вставить код просто так, его начнёт жевать блогодвижок и выдаст результат вместо кода.
Интересно. Все как-то сразу начали обсуждать редакторы и подсветку синтаксиса, но никто не подумал, что такая "фича" Блоггера просто потенциально опасна!
2 PhoeniX пишет...
Ну скажем так - учитывая специфику вашего и моего блогов, это с (очень) большой долей вероятности Vim или Emacs
Не угадали - это Kate :-) Ибо привык и прикипел.
Vim пользую для конфигов.
2 seoprogrammer пишет...
Вот посмотри еще мой вариант, тоже базируется на SyntaxHighlighter
Гляну. Мне бы даже не подсвечивать синтаксис, а чтобы блоггеровский движок его хотя бы не жевал.
2 Анонимный пишет...
Все как-то сразу начали обсуждать редакторы и подсветку синтаксиса
Ну почему, вполне логично. Решение, чтобы движок не жевал код, я нашёл и применил. Есть мысль его раскрасить - в общем, достаточно логично.
Здравствуйте Михаил! Я попробовал сделать так, как вы сказали, но не получилось. Вы допустили одну ошибку:
Эти стили:
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>.
См. мой путь в http://brain-break-ru.blogspot.com/2009/07/blogger.html
Замечателен также комент по поводу агрегаторов типа planet...
На дворе дождь и слякоть, и вот - Аллилуя! - автор добрался и до этого поста. О котором уже успел забыть.
@Вячеслав комментирует...
Вы допустили одну ошибку:
Есть такое. Исправил в посте. Сам пост дополнил и расширил.
@Oleksandr Gavenko комментирует...
См. мой путь
Вообще я обычно подобные комментарии удаляю сходу за пиар. Подробнее надо писать, товарищи!
Да, в пост добавлены и другие вещи. Чтобы новых не плодить, решил отгрузить сюда про раскраску кода и перевод картинок.
Вообще я обычно подобные комментарии удаляю сходу за пиар. Подробнее надо писать, товарищи!
Вот напрасно...
Есть очень существенное ограничение подхода с js и не-inline в случае агрегации блога например в planet (софт такой, думаю понятно).
Об этом я за экономией времени не писал, не повторялся но ссылку дал...
Мои посты с кодом на Emacs'овской планете из-за этого поплыли...
А еще в сорцах планеты имеются фильтры для тегов и атрибутов. Возможно придется связываться с администратором для включения поддержки некоторого их числа...
Удачи!
Перевод изображений в Base64
$ { printf '[img src="data:image/png;base64,'; \
base64 $FILE.png; \
printf '/]'; }
Обобщить код не тяжело. Зачем web сервисы??
Отправить комментарий
Подписаться на RSS-ленту комментариев к этому посту.