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.
A jak Ty rozwiązałeś ten problem? Utworzyłeś stronę na Google Sites? Jak później to przekierowałeś na adres bloga?
OdpowiedzUsuń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>.
OdpowiedzUsuń<script src='https://sites.google.com/site/sebastiansobotka/js/shCore.js' type='text/javascript'/>
itd...