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

Kategoria wpisu Pluginy do WordPress Tagi: , , , , on przez .



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.

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ć.

Panel zarządzania crayon

Do wyboru mamy kilka motywów.

Inny przykładowy motyw

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:

wstawianie do wpisu w trybie Wizualnym

 

wstawianie w tekstowym

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

Wstawianie kodu

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

Kod HTML przykładu:

13

 

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?

Przeczytaj również

Jak umieścić widget lub sidebar w wpisie (Widget o... Jakiś czas temu zastanawiałam się jak w treści strony opartej o WordPress umieścić zainstalowany wcześniej plugin. Dodanie pluginu do panelu bocznego...
Jaki wybrać formularz kontaktowy na bloga: przeglą... Bardzo istotną rolę podczas budowy strony internetowej odgrywa formularz kontaktowy. W przypadku statycznych stron internetowych (nie posiadających s...
Dodawanie znaku wodnego do zdjęć w WordPress wtycz... Jedną z popularniejszych metod zabezpieczania zdjęcia przed nie autoryzowanym użyciem (czyli bez zgody właściciela) jest naniesienie na niego znalu wo...
Przydatne wtyczki, pluginy do WordPress WordPress podobnie jak inne systemy do zarządzania treścią swoją popularność zawdzięcza możliwości dodawania do niego różnych przydatnych wtyczek. Jes...