Прикрутил к блогу подсветку синтаксиса кода. Некоторое время я провел за поисковиком, все примеры были не очень и в основном старые. Нашел кое-что подходящее на
heisencoder.net. В итоге и использовал эту компоненту
syntaxhighlighter. Еще есть старый репозиторий на
гугл-коде. Жалко что пример на том блоге устарел и почему-то у меня не заработал. Благо у автора компоненты очень подробная док-ция
Компонента представляет собой набор javascript-ов и css шаблонов, заходим на http://alexgorbatchev.com/pub/sh/ выбираем нужную версию и качаем. Можно и не качать, а использовать прямые ссылки на хостящиеся файлы. В общем внутри head-а странички вставляем следующий код:
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<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 src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['gutter'] = true;
SyntaxHighlighter.all();
</script>
Тем самым мы добавили нужные стили (у меня используется дефолтный, но вообще доступно несколько) и скрипты (здесь я добавил html, cpp, c#), настроили компоненту должным образом. За подробными комментариями по назначению, списку всех параметров и всех возможных скриптов - на
сайт производителя. Потом в html-код сообщения добавляем
<pre class="brush: cpp; toolbar: true;">
#include <iostream>
int main() {
std::cout << "hello" << std::endl;
}
</pre>
P.S. Главное не забывать ескейпить символы...
Комментариев нет:
Отправить комментарий