WordPress wstawianie kodu źródłowego w treści wpisu

Projekt zamknięty 13 Grudnia 2022

Wstawianie do treści wpisu kodu źródłowego języków programowania w brew pozorom jest dosyć trudnym zadaniem. Podczas moich pierwszych prób bardzo często zdarzało się że kod po prostu znikał, albo co gorsza zamiast się wyświetlać był wykonywany przez stronę. Efekty niekiedy były opłakane – raz nawet strona przestała działać 🙂

Najprostszym rozwiązaniem problemu było użycie znaczników code, pre czy blockquote chociaż to nie do końca było dobre rozwiązanie. Korzystając z nich często musiałam się „nagimnastykować” przechodząc pomiędzy trybami (tekstowym a wizualnym). Kod musiałam umieszczać w wersji wizualnej a znaczniki w tekstowym. Efekt końcowy też był nie do końca zadowalający – kod był mało czytelny i rozjechany. Zdałam sobie wtedy sprawę, że potrzebuję czegoś lepszego.

Po kilku próbach i testach zdecydowałam się zainstalować wtyczkę Crayon Syntax Highlighter. Z tej wtyczki korzystam aktualnie efekty jej działania możecie zobaczyć na moim blogu.

Spis treści

Crayon Syntax Highlighter w WordPress

Początki korzystania były trudne. Nie bardzo wiedziałam jak się mam do tego zabrać. Dodatkowo jak się okazało wtyczka zdecydowanie lepiej działa kiedy jestem w trybie tekstowym niż wizualnym (czasami w wizualnym w ogóle nie che zacząć działać). W moim przypadku winowajcą jest inna zainstalowana wtyczka.

Wtyczka potrafi zarządzać kodem w językach:

Default Language (one size fits all, highlights generic code)
C1 (thanks to Oparin Pavel)
ABAP
ActionScript
AmigaDOS (thanks to amigalog.com)
Apache
AppleScript
Arduino
Assembly (x86)
AutoIt
°C
C#
C++
Clojure (thanks to )
CoffeeScript (thanks to Dai Akatsuka)
CSS
Delphi/Pascal (thanks to Chris McClenny)
Delphi Web Script (thanks to smartmobilestudio)
Diff (thanks to omniavin)
Erlang (thanks to Daniel)
Fabric Engine KL (thanks to Andrew Hazelden)
Przejdź na
Haskell
HTML (XML/XHTML)
INI
Lisp
Lua
Maya MEL (thanks to Andrew Hazelden)
Microsoft Registry (thanks to techexplored.com)
MIVA Script
Monkey (thanks to Devolonter)
MS-DOS (thanks to http://www.amigalog.com/?p=334)
MySQL (thanks to AssemblySys.com and ansas-meyer.de)
Java
JavaScript
Objective-C
Papyrus
Perl
PHP
PL/SQL
PostgreSQL (thanks to Bitorchestra)
PowerShell
Python
R
Ruby
Rust (thanks to Stibbons)
Scheme (thanks to Harry75369)
Shell (Unix)
Swift (thanks to weyhan)
Transact-SQL
TeX
Vim
Visual Basic
Visual Basic .NET (thanks to Kevin Gardthausen)
YAML
ZSH (thanks to Stibbons)
Others will be added when requested

Konfiguracja wtyczki

Wtyczkę instalujemy dokładnie tak jak inne pluginy więc nie widzę potrzeby opisywania tego procesu.

Po instalacji i aktywacji wtyczki trzeba ją skonfigurować. W tym celu wchodzimy w ustawienia (settings) i odnajdujemy tam Crayon.

Lokalizacja ustawień wtyczki crayon w panelu

W kolejnym kroku warto przyjrzeć się ustawieniom. W tym momencie musicie trochę poeksperymentować.

Wybrać motyw czyli sposób wyświetlania kodu (motywy możemy sobie obejrzeć w podglądzie). W moim przypadku jest to Classic – szare pole z niebieską numeracją linijek. Kolorystyka kodu zależy już od języka w którym będziemy wstawiać.

Do wyboru mamy kilka motywów.

Poniżej mamy także inne ustawienia. Warto przetestować sobie te opcje na spokojnie dostosowując krok po kroku wygląd pola.

Jeśli zamierzamy korzystać w wielu rożnych języków na naszej stronie warto jest przy opcji Języki wybrać Defoult dzięki czemu uniknie się później problemów.

Na koniec wszystko zapisujemy.

Wstawianie kodu do wpisu

Wstawiania kodu do wpisu teraz będzie już łatwe. Wchodzimy w edycję wpisu lub tworzymy nowy. Następne odnajdujemy na belce edytora tekstowego poniższy znaczek:

Klikamy w ten przycisk a w nowo otwartym oknie wklejamy kod.

W nowo otwartym oknie wklejony kod możemy swobodnie oscylować dodając wcięcia i entery. Spokojnie można również wstawiać komentarze.

//komentarz do przykładowego kodu

<?php
    $a = '2'; 
    $b = '4';
    $c = $a + $b;
    echo $c;
?>

Kod HTML przykładu:

<pre class="lang:default decode:true" title="Przykładowy kod">//komentarz do przykładowego kodu

&lt;?php
    $a = '2'; 
    $b = '4';
    $c = $a + $b;
    echo $c;
?&gt;</pre>

Podsumowanie:

Ogólnie na moje potrzeby wtyczka wystarczająca. Powinna też się sprawdzić w większych serwisach – ponieważ efekt końcowy jest w miarę czytelny a wstawianie kodu nie sprawia jakiś tam większych problemów.

A co wy sądzicie o tej wtyczce?