WordPress: wstawianie kodu źródłowego do wpisów

Umieszczanie kodu źródłowego języków programowania we wpisach nie jest takim prostym zadaniem. Sam miałem okazję się o tym przekonać, gdy przenosiłem treść z forum MyBB na blog. Po skopiowaniu niektórych fragmentów kodu PHP / skryptów, kod zamiast się wyświetlać po prostu bezpośrednio się wykonywał! I nie pomogło otaczanie kodu znacznikami code czy blockquote. Dodatkowo z tak zamieszczanego kodu usuwane jest formatowanie (spacje, tabulatory), a czytelność też nie jest najlepsza.

Rozwiązanie znalazłem, jak zwykle, u wujka Google. Aby móc zamieszczać kod źródłowy w postach trzeba zainstalować dodatkową wtyczkę obsługującą formatowanie kodu języków programowania. Ja przetestowałem:

• SyntaxHighlighter Evolved
• WP SyntaxHighlighter
• WP-Syntax (używa GeSHi, obsługuje ponad 200 języków)

SyntaxHighlighter Evolved to wtyczka pozwalająca zamieszczać kod źródłowy, jednocześnie z efektem kolorowania składni. Wykorzystuje pakiet JavaScript SyntaxHighlighter Alexa Gorbaczowa.

Lista obsługiwanych języków i aliasów do używania:
ActionScript3 (as3, actionscript3)
Bash/shell (bash, shell)
ColdFusion (cf, coldfusion)
C# (c-sharp, csharp)
C++ (cpp, c)
CSS (css)
Delphi (delphi, pas, pascal)
Diff (diff, patch)
Erlang (erl, erlang)
Groovy (groovy)
JavaScript (js, jscript, javascript)
Java (java)
JavaFX (jfx, javafx)
Perl (perl, pl)
PHP (php)
Zwykły tekst (plain, text)
PowerShell (ps, powershell)
Python (py, python)
Ruby (rails, ror, ruby)
Scala (scala)
SQL (sql)
Visual Basic (vb, vbnet)
XML (xml, xhtml, xslt, html, xhtml)

Zaletą SyntaxHighlighter Evolved jest możliwość dostosowania wyglądu wyświetlania pojedynczego kodu, dobierając wspierane atrybuty. Pozwala to np. zwinąć długi kod lub wyłączyć klikalność linków, mimo, że opcje te są aktywne globalnie.
Składnia (false – wyłączony, true – włączony):

atrybut =”false/0 lub true/1″

lang/language – rodzaj języka (aliasy to wartości w nawiasach na liście wyżej)
autolinks – edycja automatycznej klikalności linków
classname – dodanie dodatkowej klasy do okna z kodem
collapse – pozwala na zwijanie kodu, wymagane jest kliknięcie, aby rozwinąć kod. Przydatne dla dłuższego kodu.
firstline – numer pierwszej linii kodu
gutter — wyświetlanie numeracji wierszy z lewej strony
highlight — rozdzielone przecinkiem linie kodu, które mają być podświetlone. Przykład: 2,5-10,12
htmlscript — umożliwia dodatkowe podświetlenie kodu HTML/XML zagnieżdżonego w innych językach, np. PHP
light — jednocześnie wyłącza pasek narzędzi i numerowania.
padlinenumbers — wartość padding dla numerowania. Można ustawić false (brak), true (automatyczne) i liczba całkowita (konkretna wartość padding).
title tytuł (tylko wersja 3)
tabsize
toolbar — pozwala na wyłączenie paska narzędzi i przycisków.
wraplines — zawijanie linii; działa tylko w wersji 2

Po zainstalowaniu z poziomu kokpitu określamy globalne ustawienia. Wybieramy wersję Highlighter-a, kolor skórki, widoczność numerów linii, zmianę linków na klikalne czy zwinięcie kodu.

Podczas pisania wpisów fragmenty kodu źródłowego otaczamy w tagi wg wzoru na obrazku poniżej, wykorzystując aliasy języków:

Alternatywnie możemy dodać butony do edytora pisania wpisów poprzez instalację wtyczki SyntaxHighlighter TinyMCE Button. Aby to działało w ustawieniach zaznaczamy opcję „Load All Brushes”.

Efekt działania
Jako przykład dam jeden z kodów. Tak wyświetla się po otoczeniu go znacznikiem code:
this.createToolbar('mytoolbar', {
container: 'bottom',
items: [
{type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}
]
});

Tan sam kod w SyntaxHighlighter Evolved:
[code lang=”php” wraplines=”true”]this.createToolbar(’mytoolbar’, {
container: 'bottom’,
items: [
{type: 'button’, name: 'mycode’, sprite: 'mycode’, insert: 'mycode’, title: 'nazwa MyCode’}
]
});[/code]