WordPress: Визуализиране на код в уебстраница без изпълняването му

8 юни 2014 | Без плъгини
wordpress-display-code-on-webpage-without-executing

Някога може да ви се наложи да покажете в сайта си даден код, било то HTML, CSS, PHP, JavaScript…

Използването на WordPress плъгин за подчертаване (plugin for highlighting syntax) е много удобно, тъй като освен че даденият код ще се визуализира, той ще бъде и оцветен, което ще улесни читателите ви да се ориентират в него. Но добавянето заедно с плъгина на JavaScript и CSS файлове, малко или много води до намаляване на скоростта на зареждане (Load speed) на сайта ви.

Съвсем спокойно можете да покажете код и без да използвате плъгини. Е, няма да е цветно, но съвсем достатъчно е да си зададете някакъв стил – фон, рамка, цвят, шрифт (желателно да е моноспейс), за да може кодът да изпъква спрямо останалия текст.

Как обаче да визуализирате кода без той да се изпълни. Нека вземем за пример базовия „Hello, World!“:

<?php 
echo "Hello, World!";
?>

Елементарно – просто заместете знаците < и > с техните HTML еквиваленти (HTML entities), съответно &lt; (less than, по-малко) и &gt; (greater than, по-голямо).

В случая тези знаци имаме само в отварящия и затварящия PHP тагове. Но ако кодът е голям и вътре в него и на други места присъстват знаците по-малко и по-голямо, те също трябва да бъдат заместени с еквивалентите им.

Все пак да не забравяме, че админ панелът на системата WordPress е направен така, че с него да могат да работят и хора без умения в писането на код. Най-лесният вариант за заместването на знаците < и > съответно с &lt; и &gt; е като пейстнете кода във визуалния редактор за писане на публикация. Ако превключите след това на текстовия редактор ще видите, че те са заменени автоматично.