SyntaxHighlighter na Blogger'rze (jak uruchomić?)

Chyba każdy programista, który kiedykolwiek chciał opublikować fragmenty kodu źródłowego na jakiejś stronie stanął przed problemem jak to zrobić, by było to możliwie czytelnie (łatwo do skopiowania itp...). Oczywiście przeklejanie kodu np.z Visual Studio i próba odwojowania tamtej kolorystyki nie koniecznie przynosi pożądane efekty. Jak więc to zrobić? Rozwiązaniem może być SyntaxHighlighter.

Ten artykuł poświęcony jest właśnie sposobowi publikowania fragmentów kodu źródłowego na blogu przy użyciu SyntaxHighlighter i opisuje ja to zrobić na platformie blogowej tego bloga, czyli na na Blogger'rze.

SyntaxHighlighter, skąd wziąć, jak znaleźć informacje na jego temat.

Miejscami skąd można pobrać SyntaxHighlighter lub znaleźć informacje na jego temat są:

• http://code.google.com/p/syntaxhighlighter/
• http://alexgorbatchev.com/wiki/SyntaxHighlighter

Dodatkowo polecam post:

http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

który opisuje jak wdrożyć to na Blogger’rze (właśnie z tego posta zaczerpnąłem część informacji tutaj podawanych).

Jak wdrożyć SyntaxHighlighter na Bloger’rze?

To dość proste, chociaż trzeba sobie odpowiedzieć na ważne pytanie: gdzie będzie hosting wykorzystanych skryptów i styli? Oczywiście można wykorzystać ten sam hosting co strona, ale w przypadku omawianego tutaj przykładu (Blog na Blogger'rze) nie można tutaj wgrać, żadnych dodatkowych skryptów, czy styli. Dlatego sensownym wydaje się hosting oferowany przez autora SyntaxHighlighter (opis tutaj: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting) , w moim przypadku będzie wykorzystany SyntaxHighlighter w wersji 2.0.296, dostępny tutaj: http://alexgorbatchev.com/pub/sh/2.0.296/.

Trzeba więc wykonać kilka kroków:

1. Edycja kodu HTML strony (Edycja -> układ -> edytuj kod HTML). Tutaj wklejamy następujące linie przed </head>:

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCpp.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJava.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushScala.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css"/>
<script type="text/javascript">
 SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
 if(window.isBloggerMode == true)
    SyntaxHighlighter.BloggerMode();
 SyntaxHighlighter.all();
</script>

2. Kod który chcemy umieścić na stronie kodujemy tak, by nadawał się do publikacji w HTML’u (np. znaki < zamieniamy na &lt;). Można to zrobić ręcznie lub wykorzystać: http://www.string-functions.com/htmlencode.aspx.

3. na stronie gdzie chcemy opublikować kod wklejamy:

<pre name="code" class="brush: c-sharp;">
….My encoded code here…
</pre>

Dostępne typy formatowania to:

• bash, shell
• c-sharp, csharp
• cpp, c
• css
• delphi, pas, pascal
• diff, patch
• groovy
• js, jscript, javascript
• java
• perl, pl
• php
• plain, text
• py, python
• rails, ror, ruby
• scala
• sql
• vb, vbnet
• xml, xhtml, xslt, html, xhtml

Efekt

Po tych trzech krokach możemy już się cieszyć formatowaniem takim jak:

    private void button1_Click(object sender, EventArgs e)
    {
      for (int i = 0; i < 10; i++)
      {
        Console.Write(" {0} ", i);
      }
   }