Wyświetlanie kodu źródłowego we wpisach. Wtyczka SyntaxHighlighter Evolved.
Na moim blogu, jak również na każdym innym dotyczącym programowania, ważnym elementem jest prezentacja kodu źródłowego. Kod ten, powinien się wyróżniać oraz być pozbawiony dodatkowego formatowania, powodującego problemy przy kopiowaniu go z naszej witryny. Wstawiając np. kod HTML zamiast zobaczyć jego treść, kod zostanie wykonany i zobaczymy tylko efekt końcowy.
Problem można rozwiązać, korzystając ze znaczników <code> i <pre> przy wstawianiu kodu, wtedy wygląda on tak: (oczywiście po wcześniejszym ostylowaniu wspomnianych znaczników).
function helloWorld() {
alert('Hello World!');
}SyntaxHighlighter Evolved
Powyższe rozwiązanie nie jest najgorsze, jednak dużo lepsze moim zdaniem jest wykorzystanie wtyczki, np. SyntaxHighlighter Evolved, po zainstalowaniu tej wtyczki nasz kod źródłowy prezentuję się w następujący sposób:
function helloWorld() {
alert('Hello World!');
}
Wtyczka służy do kolorowania składni kodu, numerowania wierszy, posiada też kilka dodatkowych funkcji. Używanie wtyczki jest bardzo proste. Kod źródłowy należy dodać po tagu [language], na przykład
Przykład użycia wtyczki SyntaxHighlighter Evolved
Obsługiwana jest zdecydowana większość powszechnie używanych języków programowania. Do wyboru mamy 7 styli kolorystycznych wyświetlanego kodu. Poza kilkoma opcjami, które możemy zmienić w ustawieniach pluginu, zaletą SyntaxHighlighter Evolved jest możliwość dostosowania wyglądu wyświetlania danego (pojedynczego) fragmentu kodu, dodając wspierane atrybuty, uzyskując wygląd odmienny od globalnego.
- lang or language — rodzaj języka, można równiez używać bezpośrednio, np. php, css
- autolinks — zmiana automatycznego linkowania URLi.
- classname — dodanie dodatkowej klasy do danego bloku kodu
- collapse — zwijanie kodu, przydatne przy długich fragmentach
- firstline — numer dla pierwszego wiersza kodu, przydatne przy kolejnym fragmencie kodu z tego samego pliku
- gutter — numerowanie wierszy.
- highlight —linie kodu, które powinny zostać podświetloe, rozdzielone przecinkami, np. 2,5-10,12
- htmlscript — dodatkowe podświetlenie zagnieżdzonego kodu, np. HTML w PHP.
- light — pasek narzędzi oraz numerowanie
- padlinenumbers — margines dla numerowania.
- title (v3 only) — tytuł dla danego fragmenut kodu.
- toolbar — włącza/wyłącza pasek narzędzi.
- wraplines (v2 only) — włącza/wyłącza zawijanie wierszy.
Po użyciu kilku atrybutów, nasz fragment kodu może wyglądać tak:
<!DOCTYPE html> <html lang="pl-PL" prefix="og: http://ogp.me/ns#"> <head> <title>WordPress Informacje i porady » WP-info</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="description" content="Ciekawe informacje i porady dotyczące WordPressa. Blog skierowany do średnio zaawansowanych użytkowników. " /> <meta name="keywords" content="WordPress, porady, informacje, blog" />
WordPress 3.9 i BuddyPress 2.0 wydane! Wyświetlanie wpisów WordPressa w dwóch lub trzech kolumnach.
