вторник, 9 декабря 2014 г.

Подсветка синтаксиса программного кода в Blogger ( blogspot )

#include<iostream>

int main()
{
    std::cout << "Hello World!" << std::endl;
    std::cin.get();
    return 0;
}
Дошли руки разобраться с подсветкой синтаксиса для блога, сразу пилю заметку (в сети много копипасты, пусть будет альтернативное изложение). Итак, чтобы исходники стали такими же читаемыми, как и в твоем любимом IDE, превратившись из унылого черного текста в стройные ряды дифференцированных по цвету
штановлитералов, нужно подцепить к шаблону блога js-парсер, анализирующий некоторые теги в соответствии с синтаксисом выбранного языка и раскрашивающего, собс-но, слова. Для этого нам нужно найти в настройках шаблона его html-текст, куда перед закрывающим тегом </head>
<header>
...

<!--======================-->
<!-- Подсветка синтаксиса -->
<!--======================-->

<!-- Базовые компоненты (парсер, классы стилей и цветовая тема) -->
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>

<!-- Синтаксисы языков для парсера (внимание на окончания имен файлов) -->
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script>

<!-- Глобальные настройки хайлайтера -->
<script type="text/javascript">
     SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.defaults['toolbar'] = false;
     SyntaxHighlighter.all()
</script>

<!--======================-->

...
</header>
По комментариям, должно быть, многое о модулях хайлайтера должно стать понятным. Кроме того, много занятной информации можно найти на следующих страничках (официального сайта проекта):

Теперь, заключая свой крутой сниппет в волшебные теги и указывая синтаксис в атрибуте brush, можно подсвечивать код
<pre class='brush: cpp'>
    #include <iostream>

    using namespace std;

    int main()
    {
        return 0;
    }
</pre>

P.S.

Ах, да! Спец-символы (вроде "<" и ">") должны быть перекодированы в html!

Комментариев нет:

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