Ci którzy prowadzili blog na http://www.blogger.com (http://www.blogspot.com/)na pewno zetknęli się z problemem formatowania kodu. Otóż blogger nie daje żadnego wsparcie dla tego typu formatowania i jedynym sensownym rozwiązaniem są znaczniki <pre>. Oczywiście można napisać artykuł w Wordzie (2007), wkleić kod prosto z Visual Studio/Eclipse i poprzez opcję publikuj -> blog, umieścić cały artykuł wraz z ładnie sformatowanym kodem bezpośrednio na blog, jednak rozwiązanie to nie pozostaje bez wad. Opublikowany kod rozjeżdża się, tworzą się ekstra linie pomiędzy wierszami, a sama czcionka wygląda inaczej. To co zyskujemy tą metodą, to tylko kolorowanie składni.
Taką też metodą radziłem sobie od ponad 9 miesięcy, pisanie artykułu w Wordzie, opcja publikuj -> blog i później ładowanie grafiki i ręczne poprawianie formatowania kodu. Dużo roboty, a efekt i tak mógłby być lepszy.
Google-Code-Prettify (Pretty Printing Styles)
No ale na szczęście pojawił się projekt Google Code Prettify (http://code.google.com/p/google-code-prettify/). Projekt ten dostarcza nam dwa pliki:
- prettify.css – spis kolorów do styli
- prettify.js – plik z kodem javascript, który zapewnia nam odpowiednie kolory oraz ładną ramkę w około kodu
Aby podłączyć Google-Code-Prettify, należy w ustawieniach bloggera, w kodzie html, podłączyć w/w pliki. Normalnie kod podłączenia wygląda tak:
<head>
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint()">
<!-- content -->
Aby użyć go w bloggerze, należy przejść do ustawień bloga -> Układ -> "Edytuj kod html" oraz odnaleźć wpis <body> i zastąpić go kodem:
<script src='http://<adres>/prettify.js' type='text/javascript'/>
<link href='http://<adres>/prettify.css' rel='stylesheet' type='text/css'/>
</head>
<body onload='prettyPrint()'>
Uwaga adres (<adres>) do plików należy zastąpić swoim własnym lub (niepolecane) skorzystać z czyjegoś, o ile ktoś pozwoli. Taki czyjś można łatwo znaleźć w Google, wpisując nazwę plików. Opcjonalnie można skorzystać z plików w projekcie, choć wydaje mi się że najlepiej hostować je samemu.
http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.jshttp://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css
Teraz można już używać formatowania. Formatowanie kodu można włączyć na 2 sposoby. Umieszczając kod w znacznikach <pre class="prettyprint">...</pre> oraz w znacznikach <code class="prettyprint">...</code>.
Języki wspierane przez projekt to:
- odmiany C
- Java
- Python
- Bash
- SQL
- HTML
- XML
- CSS
- Javascript
- Makefiles
- Ruby
- PHP
- Awk
- Perl
Program sam rozpoznaje w jakim języku napisany jest kod i dopasowuje odpowiednie formatowanie.
Przykłady
Kod formatowany ręcznie
public void OnHtmlButtonClick(object sender, HtmlEventArgs args)
{HtmlElementCollection htmlElements = _htmlDocument.GetElementsByTagName("p");
foreach (HtmlElement h1Element in htmlElements)
{
h1Element.SetStyleAttribute("color", "#FFFF00");
}
}
Kod formatowanych przy użyciu Google Code Prettify
public void OnHtmlButtonClick(object sender, HtmlEventArgs args)
{
HtmlElementCollection htmlElements = _htmlDocument.GetElementsByTagName("p");
foreach (HtmlElement h1Element in htmlElements)
{
h1Element.SetStyleAttribute("color", "#FFFF00");
}
}
Istnieje także opcja ręcznego wybrania języka w którym ma być wyświetlany kod ("prettyprint lang-*") oraz dodania numeracji linii (<span class="nocode">).
<pre class="prettyprint lang-html">
<span class="nocode">1:</span> <body>
<span class="nocode">2:</span> Kod html
<span class="nocode">3:</span> </body>
</pre>
1: <body>
2: Kod html
3: </body>
Więcej przykładów można znaleźć na stronie projektu link.
Resources
- Człowiek od którego dowiedziałem się o istnieniu google-code-prettify - Łukasz Gorgol link
- Strona główna projektu link
- Opis użycia, przykłady, FAQu itd. link
Pozdrawiam,
Jacek Ciereszko
.png)
3 komentarze:
Właśnie kończę dwutygodniowe przygotowania do publikacji artykułu na podobny temat wraz z rozwiązaniem tego problemu w bardziej "spersonalizowany" sposób. Takie koincydencje można ochrzcić "synchronized JIT blogging":).
co bym nie wpisał w Google związanego z .NET to zawsze Jacek Ciereszko na pierwszej lub drugiej stronie ;p czyżby to jakiś satanistyczne praktyki hakowania Googla ? ;>
To przyzwyczajenia z pozycjonowania żeby pchać swoje bezsensowne linki gdzie się da :P
// a miałem ruszyć z kopyta z artykułami, a tu znowu "kupa".. nowe mieszkanie, brak internetu do końca tygodnia.. same kłody pod nogami ;)
Prześlij komentarz