04.03.2015

Подсветка кода. Установка syntaxhighlighter в blogspot (Setup syntax highlighter on blogger)

 Начинающий программист, которому стукнуло в голову захотелось поделиться набросками кода или новыми идеями для чего либо захочет чтобы то подобие кода, которое он публикует имело хоть какую то структуру и было заметно!
 Есть очень неплохая JavaScript  библиотека для подсветки синтаксиса исходных кодов на веб-страницах. 
 На данный момент включена в дистрибутив поддержка следующих языков: Java, C++, XML, CSS, HTML, JavaScript, Bash, C#, Delphi, PHP, Python, Ruby, Scala, SQL, Visual Basic. Дальше мне откровенно лень писать у меня нет времени расписывать все плюшки. Детали смотреть тут.

Приступим к установке Syntaxhighlighter:
Устанавливать будем конкретно на наш блог (blogspot), как ставить на другие сайты будем думать потом.
 1) Делаем бекап нашего блога.
 2) Открываем наш шаблон в режиме HTML, ищем тег: </b:skin> и копируем перед ним все, что найдете вот тут. Это стили для отображения. 
      Примечание: ставить до ]]>
3) Ищем тег: </head> и вставляем перед ним вот это:
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4) Ищем тег: </body> и вставляем перед ним вот это:
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5) Сохраняем злосчастный наш супер шаблон и радуемся если все сохранилось без ошибок. (писаться от счастья пока не надо)

6) Для вставки кода пользуемся вот такой структурой(опять таки в режиме HTML):
<pre name="code">
...Наш супер-пупер код...
</pre>
Этот код будет высвечиваться и все будет ОК, однако давайте немножко подумаем над минусами: Библиотеке потребуется какое то время, чтобы распознать тип кода, а потом чтобы подсветить. Что врятли будет убыстрять полную прогрузку страницы.
Проще говоря - пользуем это:
<pre name="code" class="php">
    echo "I like PHP";
</pre>
Мы явно указали язык, поэтому скорость загрузки страницы выросла.
Идем брать с полки пирожок.

Список всех языков и атрибутов для тега class="..." тут.

    echo "I like PHP";