środa, 17 marca 2010

Uruchomienie SyntaxHighlighter na Bloggerze

Po ostatnim poście o nowościach w JDK7 stwierdziłem, że konieczne jest dodanie jakiegokolwiek formatowania dla wklejanego kodu. Najbardziej popularnym rozwiązaniem chyba w tej chwili jest SyntaxHighlighterhttp://alexgorbatchev.com/wiki/SyntaxHighlighter. Rozwiązanie całkowicie oparte na JavaScripcie i css.
Jak go jednak uruchomić na platformie Blogger?
Tutaj znalazłem rozwiązanie: http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html

1. W Ustawieniach wybierz Edytuj kod HTML
2. W okienku z kodem zjedź na dół i przed sekcją zamykającą </body> dodaj:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3. Podjedź na górę i przed zamknięciem </head> dodaj css:
<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'/> 

I gotowe ;)
Teraz aby tego używać przy edycji postów należy wejść w "Edytuj kod HTML" i tam otoczyć swój kod znacznikami pre.
<pre class="brush:html">
To jest jakis kod html z tagami skonwertowanymi 
</pre>
UWAGA: Kod musi być zeskejpowany (jakiś polski odpowiednik?) czyli wszystkie znaki np ">" zamienione na & gt; Jedno z narzędzi do tego dostępnych online to np:
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

Klasa css oznacza nam w jaki sposób biblioteka będzie kolorowała składnię. Dostępne są składnie dla większości języków programowania (java, jscript, ruby, groovy, c, c#, delphi, etc.) jak i innych przydatnych formatów (xml, sql, etc.).

Jeżeli chcemy pominąć konieczność konwertowania znaków specjalnych to możemy zamiast tagu pre użyć tagu script:
<script type="syntaxhighlighter" class="brush: java"><![CDATA[
//java kod nie skonwertowany
]]></script>

Można trochę przyśpieszyć ładowanie całej strony kasując nie potrzebne skrypty do języków których nie zamierzamy używać. Jeżeli dysponujemy też w miarę szybkim serwerem www warto pliki biblioteki zgrać na swój serwer i podmienić w kodzie templatki.

Brak komentarzy:

Prześlij komentarz