петък, 28 декември 2012 г.

Syntax Highlighter за Blogger

Syntax Highlighter е много полезен инструмент, който се интегрира в Blogger и с помощта на който публикуването на код става много по прегледно и четливо. За да може да се използва този инструмент той трябва да бъде предварително интегриран в избрания Template на блога ви. За целта се отива в менюто Template и там се натиска Edit HTML. След като вече се вижда HTML кода над </head> тага се слага следния код:

<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/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.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/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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/shBrushVb.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/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Syntax Highlighter може да форматира кода на доста езици. Ако в блога ви ще се публикува код само на един или няколко от изброените езици може да се изберат само желаните езици, а останалите да не се добавят.
След като инструмента вече е добавен има два начина за задаване на формата на публикувания код. Първият начин е  чрез използване на script тага. Когато се публикува кода се отива в HTML таба на публикацията и преди публикувания код се слага следното:
<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>
След края на кода се слага:
</script>
След като това се направи при визуализация на публикацията кода вече ще е форматиран в избрания език. В конкретния пример форматирането е за езика C#.
Вторият начин по който може да се зададе форматиране е чрез тага pre. Нещата са идентични като при първия начин, само че в началото преди кода се слага следното:
<pre class="brush: csharp">
След края на кода се слага:
</pre>
И в този пример е показано форматиране за езика C#. На мен лично втория начин повече ми допада, тъй като е с по-кратък запис.
Ако трябва да се публикува HTML код той предварително трябва да бъде минат през HTML енкодер. Такъв може да бъде на мерен тук. След като HTML кода бъде минат през енкодера той вече може да бъде поставен и форматиран чрез изброените по-горе начини.
Форматирането на кода беше едно от нещата, заради което не публикувах домашните веднага когато ги написах. Сега когато вече съм интегрирал този инструмент ще мога много по-четливо да публикувам всички минали и предстоящи домашни. Единствен минус на този инструмент, който съм видял досега е че при разглеждането на блога във формат за мобилни устройства форматирането липсва. Тествал съм на вградения браузър на Android 4.2 и на Doplhin и при двата браузъра кода не е коректно форматиран. При Opera Mobile и визуализация на десктоп версията всичко си се вижда както трябва да бъде.