Sławomir Czerwiński

Formatowanie kodu źródłowego w Bloggerze opisane jest już dość dokładnie na wielu blogach. Jednak miałem pewne problemy z poprawnym formatowaniem, więc postanowiłem napisać, w jaki sposób rozwiązałem tę kwestię.

Podczas dodawania skryptów aplikacji Google SyntaxHighlighter, korzystałem z informacji zawartych na blogach:

• Yet Another Coding Blog,
• Useful and interesting web sites.

Cała operacja dodawania obsługi podświetlania składni ogranicza się do dodania kilku fragmentów kodu w szablonie bloga. Podczas edycji ustawień należy otworzyć Układ, a następnie wybrać Edytuj kod HTML. Na obszarze edycji trzeba wyszukać komentarz <!-- end outer-wrapper -->, za którym należy dodać fragment kodu:

<script language='javascript'
  src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shCore.js'/>
<script language='javascript'
  src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushXml.js'/>
<script language='javascript'
  src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushJava.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Aby nie tworzyć własnej strony ze skryptami, odwołuję się do repozytorium projektu SyntaxHighlighter – do ostatniej rewizji (w tej chwili jest to rewizja 92). Dodałem główny skrypt (shCore.js), a także skrypty obsługujące pliki XML oraz Java (shBrushXml.js, shBrushJava.js). W repozytorium znajduje się więcej skryptów, przeznaczonych do składni innych języków.

Na koniec dopisałem dwie linijki konwertujące wybrane znaczniki pre oraz textarea na kod z podświetloną składnią. Parametr 'code' oznacza, że tylko znaczniki z atrybutem name="code" będą brane pod uwagę przez skrypt.

Aby rozwiązać problem z formatowaniem, nie dodałem odwołania do arkusza stylów, ale skopiowałem całą zawartość pliku SyntaxHighlighter.css do szablonu bloga – tuż przed fragmentem:

]]></b:skin>
  </head>

Teraz już pozostało mi tylko dostosować wystąpienia znacznika pre na moim blogu. Dla formatu XML:

<pre name="code" class="xml">

Dla formatu Java:

<pre name="code" class="java">

Pełna lista wartości atrybutu class dla poszczególnych języków znajduje się tutaj.