Подключение скрипта подсветки кода «SyntaxHighlighter» в Blogger

Подробнее о проекте: http://alexgorbatchev.com/SyntaxHighlighter/
Свежую версию скачать можно здесь: http://alexgorbatchev.com/SyntaxHighlighter/download/

Нам понадобятся следующие файлы:

<link href='styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Первое это стиль разметки, второе – стиль подсветки по умолчанию. Другие темы можно выбрать на странице: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
Добавляем скрипт ядра:

<script src='scripts/shCore.js' type='text/javascript'/>

Далее добавляем скрипты для необходимых нам файлов. Например, для C++ это будет shBrushCpp.js, а AppleScript - shBrushAppleScript.js. Если нужно подсвечивать несколько языков на странице, просто добавляете строки с нужными скриптами.

<script src='scripts/shBrushCpp.js' type='text/javascript'/>
<script src='current/scripts/shBrushAppleScript.js' type='text/javascript'/>

Ну и остаётся включить подсветку:

<script type='text/javascript'>
SyntaxHighlighter.all();
</script>

Для Blogger весь этот код нужно добавить перед тегом </head> в шаблоне блога (Шаблон – Изменить HTML).
Вот что получилось в итоге:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/>

<script type='text/javascript'>
SyntaxHighlighter.all();
</script>

Как можно заметить, в путях до подключаемых файлов используется адрес сайта разработчика. Это позволяет не задумываться о том, где размещать скрипты. По адресу http://alexgorbatchev.com/pub/sh/current всегда будет свежая версия проекта.
Как же теперь указать, какой текст необходимо подсвечивать и как различать языки?
Для этого нужно заключить код в теги <pre></pre>, а для указания конкретного языка дописать, к примеру, class="brush: cpp".
Так, для кода на CPP

#include <iostream>

int main()
{
std::cout << "Hello, world!" << std::endl;
return 0;
}

у меня получился следующий HTML-код:

<pre class="cpp"><br />
#include &lt;iostream&gt;<br />
<br />
int main()<br />
{<br />
std::cout &lt;&lt; "Hello, world!" &lt;&lt; std::endl;<br />
return 0;<br />
}<br />
</pre>

Нужно помнить о замене символа "<" на его код "&lt", если вы набираете текст прямо в режиме HTML. Или же можно набрать исходный код как есть, затем перейти в режим HTML и дописать <pre></pre>

Не стало Михаила Донского

13 января скончался замечательный отечественный программист, публицист Михаил Владимирович Донской, отметивший совсем недавно — 8 августа прошлого года — свое шестидесятилетие.

Читать дальше...

С днём рождения, Линус!

ДЕНЬ ПОБЕДЫ: ПЕРЕЗАГРУЗКА

Дню Сисадмина посвящается.

Любочка

Очередная фантазия на тему переселения душ.

Рассмешило :)

"Я ж почему злой был, потому что у меня велосипеда не было.., а теперь, когда и самокат украли, я вообще убивать начну".

http://casta.ru/