Formatowanie kodu źródłowego na blogu

Założyłem konto, a w zasadzie zalogowałem się, bo konto na Google już miałem. Pierwsza próba posta i pytanie, no gdzie jest to formatowanie kodu, które widziałem na wielu blogach. Spojrzenie w źródła stron, gdzie takie formatowanie jest i znajdujemy na początku coś takiego: <script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js%27" type="'text/javascript'"></script> <script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js%27" type="'text/javascript'"></script> Po krótkim śledztwie jesteśmy na SyntaxHighlighter. W dalszej treści wykorzystuje informacje tam zawarte, każdemu kto chce wiedzieć więcej polecam poczytanie zawartych tam informacji. Sam SyntaxHighlighter to skrypt JavaScript, który możemy zastosować na każdej stronie o ile możemy zmodyfikować jej nagłówek. Tak więc co zrobić żeby formatowanie zaczęło działać ? Edytujemy szablon naszego bloga dodając do niego (Układ/Edytuj kod HTML): <link href='http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js' type='text/javascript'></script> Edytując nagłówek warto zwrócić uwagę, czy linki są w apostrofach, a nie w cudzysłowach, jeśli kopiujecie kod z innych źródeł. Tutaj na przykład macie cudzysłowy. Styl formatowanie jak i wybór brush-ów możemy zmienić zgodnie ze swoimi preferencjami, ich lista dostępna jest tutaj. Brush xml-owy służy także do formatowania html-a. Jak widać podłączyłem się do wersji 2.0.296, można podłączyć się pod katalog 'current' i tym samym być zawsze na najnowszej wersji. Do nagłówka dorzucamy jeszcze coś takiego:

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Jak widać SyntaxHighlighter w specjalny sposób traktuje Blogger-a. Chodzi o opisaną tutaj automatyczną zamianę znaków zakończenia linii na <br>. Do Blogger-a logujemy się przez przez konto Google. SyntaxHighlighter ma wsparcie dla Bloggera. Do tego dajemy, że Blogger wchodzi w skład oferty Google, zaś SyntaxHighlighter był przez pewien czas hostowany przez Google Code. Być może nawet jakoś wsparty finansowo przez Google - tego nie wiem. I wszystko jasne na temat powiązań. Teraz kiedy nagłówek jest już zmodyfikowany możemy oznaczyć bloki kodu do sformatowania:

<pre class="brush: alias">
/* Kod źródłowy */
</pre>

Dostępne aliasy dla brush-ów można znaleźć tutaj. Jak to działa w skrócie. Całe formatowanie jest robione po stronie klienta. Blok <pre> zachowuje białe znaki podczas wyświetlania zawartości w przeglądarce. Atrybut class wskazuje na styl CSS. Podczas ładowania strony przeglądarka ściąga podane w nagłówku pliki stylów i skryptów JavaScript (tutaj dane w postaci nieosadzonej w kodzie, tylko w postaci linków) i uruchamia formatowanie poprzez SyntaxHighlighter.all(). Skrypt przelatuje po elementach strony jak po strukturze drzewiastej poszukując elementów które są mu znane, bierze tekst pomiedzy znacznikami <pre> i </pre> formatuje go i podmienia w HTML-u. Dlatego możemy czasami zaobserwować, że formatowanie pojawia się po pewnym czasie od załadowania strony. I ostatecznie możemy zrobić coś takiego:

double sum = 0;
foreach (double n in weights)
   sum += n;

Tutaj uwaga: efektów naszej pracy nie uświadczymy w podglądzie. Wszystko pięknie, tylko na toolbarze brakuje mi ikony kopiowania do schowka. Aby się pojawiła musimy uzupełnić konfiguracje o:

Dodatkowo wyłączyłem autolinkowanie za pomocą opcji auto-links: false'. Dzięki temu adres pliku swf nie jest linkiem. Próbowałem to wyłączyć globalnie w konfiguracji ale formatowanie przestaje działać, nie wiem czemu. Dużo większym problem jest to, że toolbar przesłania tekst. Chwilowo nie wiem jak to rozwiązać. Można ręcznie złamać taki tekst, ale nie jest to najskuteczniejsze rozwiązanie. Moża się posiłkować uzupełniając kod o puste linie, tylko, że SyntaxHighlighter skutecznie wycina z przodu wszelkie puste znaki (spacje, nowa linia, <br>). Wydaje się, że w przyszłości ten toolbar powinien zostać jakoś inaczej pozycjonowany (u góry, pionowo z boku. Kolejny problem, w innych starszych wersjach na pewno mogłem to zrobić. Zaznaczając kod, kiedy jest numerowanie linii, zaznaczamy też numerowanie linii. Nie wiem jak to obejść. Chwilowo nie pozostaje nam jak wybrać z toolbara ikonkę, która pokazuje źródła w osobnym oknie i skopiować co trzeba. No można też wyłączyć numerowanie linii. I tu mamy kolejny problem związany z tym, że ustawienia działania SyntaxHighlighter-a, konfiguruje się globalnie w szablonie, czyli jeśli zdecyduje się tam na wyłączenie numerowania linii, to tutaj one też poznikają (no chyba, że wyspecyfikuje tą opcję dla każdego bloku <pre></pre>). Podobnych problemów może też dostarczyć przejście na nowsza wersję skryptu. Kolejny zauważony problemik to taki, że przycisk kopiowania do schowka nie ma podpowiedzi, jak pozostałe. No i jeszcze jeden błąd: dla dużego fragmentu źródła w C# na końcu pojawiły się jakieś śmieci: </int></int></double></double></int></int></double></double> Do ustalenia pozostaje jak sprawić by dla bardzo dużych wstawek kodu pojawił się pionowy pasek przewijania. Sam toolbar jest niekonfigurowalny, z przyjemnością pozbyłbym się ikonki drukowania i ikonki 'O programie'.