Так как в блоге планируется публиковать в основном посты посвященные программированию и разработке, то в них в большинстве случаев будет содержаться исходный код. Для лучшей читабельности и в блогах, и на форумах, и т.д. используют подсветки исходного кода. Как правило это набор скриптов, которые позволяют выделить в тексте необходимый участок и подсветить его по всем правилом выбранного языка. Пересмотрел много вариантов "хайлайта" и остановился наверно на одном из самых популярных - SyntaxHighlighter, который поддерживает много языков, предоставляет возможность нумерации строк кода, и еще пару приятных функций. Поначалу думал, что с установкой яваскрипта в блог возникнут проблемы, но в итоге всё оказалось намного проще:
1. Заходим в Дизайн - Изменить HTML
2. В код страницы перед закрывающемся тегом </head> вставить следующий код:
<link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shCore.js' type='text/javascript'/> <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushXml.js' type='text/javascript'/> <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushCSharp.js' type='text/javascript'/> <script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
Этот год подключает скрипт для подсветки и указывает какие языки необходимо подключить - строки 4-7 подключают shBrushDelphi.js, shBrushXml.js, shBrushSql.js,shBrushCSharp.js - соответственно подсветку для Delphi, XML, SQL, C#.
3. Сохраняем шаблон.
Теперь, чтобы исходники в блоге отображались с помощью SyntaxHighlighter, тебе необходимо заключать куски кода в тэги <pre class="brush: delphi"> исходник </pre>, заменяя значение свойства brush на алиас языка, синтаксис которого необходимо подсвечивать.Список всех поддерживаемых языков тут: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Надо обратить внимание на одну особенность - во всех исходников, которые публикуются, символ "<" был заменён на "<"
07.12.2010
(c) DoVe
No Response to "Подключаем подсветку кода в блоге"
Отправить комментарий