Ten blog nie jest już rozwijany. Wraz ze wszystkimi artykułami zostały przeniesiony pod adres wmroczkowski.pl

Czy chcesz przejść pod nowy adres?

czwartek, 23 lipca 2009

Instalacja i konfiguracja SyntaxHighlighter na bloggerze (blogspot), czyli jak pokolorować swój kod

SyntaxHighlighter zyskał ostatnio ogromną popularność ze względu na przyjazny interfejs oraz łatwość konfiguracji. Jednak instalacja tego narzędzia na takich serwisach jak blogger ciągle przysparza użytkownikom sporo kłopotów. Postaram się w jasny sposób opisać sposób instalacji SyntaxHighlighter na bloggerze.

Poniżej kroki, które należy wykonać:
1. Logujemy się na nasze konto na blogger.com.
2. Wchodzimy w zakładkę Układ
a następnie Edytuj kod HTML.
3. W sekcji <head> umieszczamy następujący kod:

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>

4. Następnie pod powyższym kodem dodajemy wpis odpowiedni za kolorowanie danego języka. Jeżeli chcesz możesz wpisać wszystkie wiersze poniżej. Będziesz miał wtedy do dyspozycji wszystkie składni. Jednak jeżeli będzie używał np. tylko PHP to wklej tylko wiersz odpowiedzialny za tą składnie:

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushBash.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushGroovy.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushScala.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js'/>

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>

5. Ostatni już wpis należy dodać na końcu ciała strony, czyli przed tagiem </body>:

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

6. Zapisujemy szablon strony i gotowe.

Teraz, za pomocą tagów pre lub textarea możesz dodawać swój kod. Poniżej przykład:

<pre name="code" class="php">Twój kod</pre>


Pamiętaj, że podczas pisania kodu należy zamienić znak < wpisem "&lt;" a znak > "&gt;"
W przeciwnym wypadku interpreter bloggera będzie próbował uruchomić Twój kod.

Jeżeli chcesz żeby to działało również na Firefoxie 3.0.5 który błędnie interpretuje ten kod, należy w szablonie strony na blogerze usunąć na samej górze tag DOCTYPE.

1 komentarz:

yahuto pisze...

nie trzeba zamieniac znacznikow "<" i ">" zreszta jest to bardzo nie wygodne. wystarczy podczas pisania posta kliknac w opcje posta i zaznaczyc "pokaz dokladnie kod html". i po napisaniu posta z kodem udajemy sie do zajkladki "edytuj kod html" i wstawiamy tylko znaczki pre ... wsio i dziala ;-)