2 августа 2010 г.

Как сделать подсветку синтаксиса в блоге

Можно найти статический он-лайн подсветчик, но он не очень удобный -- неудобно править текст итд итп. Имхо, удобнее динамическая подсветка, производимая на стороне клиента. В тексте поста это выглядит как обычное форматирование html-элементами, типа
<!-- код -->
<pre class="brush: js">
function foo()
{
}
</pre>

Для подобного поведения я использую в этом блоге http://alexgorbatchev.com/wiki/SyntaxHighlighter.

Могут подсвечиваться разные языки, это делается указанием в атрибуте class нужного шаблона (см. в примере выше): class="brush: js". Все шаблоны можно увидеть тут: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes. Заранее надо выбрать какие именно языки должны подсвечиваться и именно эти скрипты подключить. Мне были нужны:
1) js, jscript, javascript
2) bash, shell
3) sql
4) xml, xhtml, xslt, html, xhtml
5) cpp, c
6) java
7) php
8) plain, text

Итак, на странице (например, в шаблоне блога) перед </head> у меня находится следующий код:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- тут другие brushes -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.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/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<!-- тут стили -->
<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'/>


В самом конце страницы, перед </body> стоит следующее:

<script type='text/javascript'>
<!-- если это на blogger.com, то надо установить флаг -->
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>


Надо отметить, что угловые скобки < и > в коде надо использовать как &lt; и &gt;

1 комментарий:


  1. Я согласен, что использование SyntaxHighlighter, описанного в статье, - хорошее решение для выделения синтаксиса программных языков прямо на веб-странице. Интеграция различных языков и легкая настройка через скрипты и CSS очень удобны для пользователей, особенно владельцев технических блогов. Это полезный инструмент, который помогает выделить и сделать понятными фрагменты кода, улучшая тем самым опыт чтения и общее визуальное восприятие статьи.
    Easy Arabic mehndi design

    ОтветитьУдалить