niedziela, 26 kwietnia 2009

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ą:

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);
      }
   }

7 komentarzy:

  1. pytanie: podswietlanie działa ale potrzebuje pokolorowac tekst który jest ładowany poprzez ajax niestety ponowne wywołanie SyntaxHighlighter.all(); nie koloruje juz kodu załadowanego za pomocą ajax, jakies sugestie?

    OdpowiedzUsuń
  2. Dobre pytanie, niestety nie mam pomysłu :(, aż tak głęboko w to nie wchodziłem....i chyba trzeba by było pogrzebać coś w źródłach...
    Może zadaj takie pytanie na http://9fingers.pl/ i może ktoś ze społeczności coś wymyśli!!
    powodzenia, jakbyś coś się dowiedział, to może napisz jako komentarz, być może jeszcze komuś się przyda ;)

    OdpowiedzUsuń
  3. niestety to jest ich bug, jedyne rozwiązanie to plugin jquery beautyOfCode

    OdpowiedzUsuń
  4. Ok po testach moge potwierdzić ze plugin jquery beautyOfCode do syntaxhighlighte działa poprawnie dla ajax wywołanie $.beautyOfCode.beautifyAll(); koloruje ponownie kod załadowany przez javascript

    OdpowiedzUsuń
  5. Dzięki, bardzo pomógł ten post

    OdpowiedzUsuń

Posty powiązane / Related posts