Jak łatwo wyświetlić fragment kodu pod WordPressem?

Każdy programista, który kiedyś pisał jakąkolwiek pisemną pracę związaną ze swoim zawodem spotkał się z pozornie banalnym, jednak nieoczywistym problemem – jak wyświetlić fragment kodu na naszym blogu WordPress?

Niegdyś problem ten był bardzo prosty do rozwiązania – wystarczyło po prostu wkleić fragment kodu jako cytat i sprawa załatwiona. Dzisiaj nie jest to jednak takie proste. Nowoczesne edytory kodu zdobią wyświetlany tekst na przeróżne sposoby — zmieniając kolory słów kluczowych czy podkreślając błędne fragmenty. Jest to wyraźne udogodnienie, które pomaga m.in w zrozumieniu danego fragmentu tekstu czy też sprawia, że jest on o wiele mniej męczący dla oczu. To właśnie do takich innowacji przyzwyczajeni są programiści tej dekady – w jaki sposób możemy sprostać ich oczekiwaniom, gdy będą czytali naszego bloga?

Fragment kodu
Fragment programu w edytorze

Dla osób, które wykorzystują WordPress jako swój CMS, odpowiedzią na to pytanie może okazać się darmowa wtyczka SyntaxHighlighter. Jej instalacja jest banalna — wystarczy pobrać ją w zakładce wtyczek, a następnie aktywować. Wtyczka pozwala nam na wykorzystywanie w naszych postach tagów klamrowych, aby wyznaczyć sekcję, która zostanie automatycznie ostylowana. Przykładowy fragment kodu w języku JavaScript ostylowany zostanie następująco:

let onDamage = Game_Battler.prototype.onDamage;
Game_Battler.prototype.onDamage = function(value) {
    if(this.isStateAffected(42)) {
        let regen = Math.ceil(14 * this.hp / this.mhp);
        BattleManager._subject.regenerate(regen);
        $gameActors._data[5].regenerate(Math.ceil(regen / 3));
        $gameTemp.requestAnimation([this], 124);
    }
    onDamage.apply(this, arguments);
}

Jak widać jest to dość duża zmiana w porównaniu do zwykłego, niesformatowanego tekstu — nie kosztowała nas ona wiele, a każdy programista, który będzie czytał nasz post, na pewno to doceni. Warto wspomnieć, że zachowana została tutaj również forma tekstowa naszego kodu, dlatego czytelnik może w łatwy sposób skopiować go, aby przetestować jego działanie. W przypadku obrazka byłoby to po prostu niemożliwe. Jeżeli chcesz dodać swój własny skrypt na stronę WordPress, przeczytaj mój artykuł na ten temat.

Jeżeli wtyczka spodobała Ci się, możesz już teraz pobrać ją za darmo i wykorzystać na swoim blogu. Znasz podobne wtyczki, które pomagają w poprawieniu czytelności tekstu na stronie? Pochwal się nimi w komentarzu 😉

Published
Categorized as BLOG

Leave a comment

Twój adres e-mail nie zostanie opublikowany.