kolorowanie składni kodu - syntax highlighter & blogger



Aby prezentować kod źródłowy na blogu w sposób bardziej czytelny postanowiłem wykorzystać narzędzie Syntax Highlighter. Problemem jest to, że blogger nie umożliwia hostingu plików takich jak skrypty i style. Rozwiązaniem może być hosting oferowany przez autora SyntaxHighlighter (opis tutaj) lub hosting na innych serwerach. Można też stworzyć własną witrynę na serwerach google (google sites) i tam przetrzymywać pliki.

Następnie należy wykonać kilka kroków:
Edycja kodu HTML strony (Dostosuj -> Układ -> Edytuj kod HTML). Tutaj dołączamy odpowiednie skrypty i style, wklejamy następujące linie przed </head>:



Zgodnie ze wskazówkami autora SyntaxHighlighter dołączamy:
-skrypt shCore.js
-skrypty dla języków, które chcemy kolorować np shBrushXml.js
-style shCore.css oraz shThemeDefault.css

oraz zgodnie ze wskazówkami dotyczącymi konfiguracji linie kodu 6-10.

Należy pamiętać o tym, żeby w miejscu gdzie przetrzymujemy style dodać również ikonki:
YOUR_SITE/styles/help.png
YOUR_SITE/styles/page_white_code.png
YOUR_SITE/styles/page_white_copy.png
YOUR_SITE/styles/printer.png

Kolejnym etapem jest umieszczenie w kodzie naszego posta:
<pre name="code" class="brush: xml;">
...
kod źródłowy
....
</pre>

Ponieważ w SyntaxHighlighter nie ma skryptu dla środowiska Processing/Arduino IDE należy go zaimplementować. Z pomocą przychodzi blog Sebastiana Korczaka. Udostępnia on gotowy skrypt dla składni języka Processing - shBrushProcessing.js. Osobiście napotkałem jednak problemy z tym plikiem, musiałem zamienić znaki nowej linii LF (line feed) na znaki CRLF (carriage return+line feed). Dodatkowo zgodnie z sugestią autora zmodyfikowałem defaultowy plik stylu shThemeDefault.css doklejając na końcu kilka linijek kodu:
.syntaxhighlighter .color4,
.syntaxhighlighter .color4 a
{ 
 color: #006699 !important; 
}

.syntaxhighlighter .color5,
.syntaxhighlighter .color5 a
{ 
 color: #CC6600 !important; 
}

Tak zmodyfikowany plik pod nazwą shThemeDefault2.css umieściłem w źródłach bloga.

Komentarze

  1. A jak Ty rozwiązałeś ten problem? Utworzyłeś stronę na Google Sites? Jak później to przekierowałeś na adres bloga?

    OdpowiedzUsuń
  2. Utowrzyłem stronę na Google Sites. Wrzuciłem tam odpowiednie pliki. Następnie zgodnie z powyższym opisem, wkleiłem odpowiednie linie kodu przed znacznikiem </head>.

    <script src='https://sites.google.com/site/sebastiansobotka/js/shCore.js' type='text/javascript'/>
    itd...

    OdpowiedzUsuń

Prześlij komentarz