суббота, 27 июля 2013 г.

Прикручиваем вставку кода в blogger-post

И так вы свежеприготовленный блоггер, еще корочка дымится. Но если иногда нужно вставить куски кода, настроек или прочей фигни, которое не хочется вставлять болдом или чем либо еще, то выход есть.

Решение на все случаи жизни

Так вот, идем в "Шаблон" → "Настроить" → "Дополнительно" → "Добавить CS" и добавляем
pre {
background: #faf8f0;
border: 1px solid #bebab0;
font-size: 105%;
line-height: 100%;
overflow: auto;
padding: 0.5em 1em;
color: auto;
}
pre: hover {
border: 3px solid #efefef;
}
Получается не плохо для любой темы, будь то светлая или темная. Когда надо вставить что-нибудь "эдакое", то переходим в режим html, вставляем и  оборачиваем тэгами вставляем и оборачиваем тэгами < pre > и < /pre > .

Скрипты с раскаской на JS

Это все здорово, но если, надо запостить когфиги или что то еще, то надо пользоваться сторонними ресурсами. Есть отличная либа от Алексея Горбачева, с множеством плюшек.
Опять же идем в "Шаблон"→ "Изменить HTML" и перед закрытием тэга head вставляем следующий код.
<!-- code highlighting -->
    <link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shAutoloader.js" type="text/javascript"></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript' />
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript' />
    <script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all()
    </script>
<!-- end highlighting -->
Так как у меня тема серая, то и оформление, я выбрал соответствующее. Для себя можете выбрать что нибудь из этого.Отлично, а как этом пользоваться?
Так как у нас в head прописаны языки, которые мы скрипт будет парсить раскрашивать, то в теле html сообщения нужно указать, на каком языке предоставлен листинг. То есть как то так:
<pre class="brush: plain">Hello word!
</pre>
Так же, хочется выделить вкусные плюшки для оформления текста. Например, выделение строк (1 и 3): 
1
2
3
Правда есть одна особенность, что бы на до прогнать текст на предмет запрещенных символов, нарпимер через всервисы: html encode string

Для скриптов на gist

если вы храните скрипты  в gist, и вам надо вытягивать их сюда, то воспользуйтесь прекрасным сервисом http://www.gistfy.com/index.html
Скармливате ему ссылку до гиста, выбираете тему и вставляете код. Главное, между тэгами скрипта вставить ссылку на исходник - если сервис помрет останется артефакт на странице в виде ссылки на гист
Ярлыки: ,