Визуализация на HTML код в текст

Макар и рядко понякога се налага в пост или коментар да цитираме част от HTML код. Проблемът е, че ако го препишем или копираме директно, посетителите няма да видят нищо.
Техният браузър автоматично ще превърне кодът във визуална картина. Много хора не се замислят, но всеки сайт, в който влязат в действителност не е поредица от изображения и текст, а някакъв код.
Ето един пример- ако сте с Mozilla , отместете мишката на някое празно място тук, натиснете десен клавиш и долу ще видите опцията –Изходен код на страницата.



Ще ви се отвори нов прозорец, който ви покаже как всъщност представлява страницата.



Браузърите преобразуват този код в красива картинка. Това , обаче е проблем , ако някога ви се наложи да добавите в текст, част от код, както често правя тук. Ако го копирате директно, ще се вижда това, което браузърите превеждат.
Все пак има начин. Това отдолу е част от HTML код, но вие го виждате, като текст:

<div style=' width: 200px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
</div>

Ако го копирате и поставете в пост резултатът ще е следният:

Номерът е лесен, но досаден. Трябва да замените стрелките < и > с поредица от други символи без интервал между тях.
За лявата скоба те са &, l, t и ; , а за дясната &,g,t и ; .
Не зная дали ще ви потрябва някога, но аз доста се изпотих докато открия как става и затова го споделям тук.

.