Для удобного восприятия информации на сайтах посвящённых веб-разработке, необходима подсветка публикуемого кода. Самым простым вариантом реализации подсветки(которым пользуюсь я) является использование javascript библиотеки highlight.js, поддерживающей огромное количество языков программирования и стилей подсветки.
Конкретно на этом сайте установлен движок GetSimple CMS c расширенным редактором CKEditor, который по умолчанию поддерживается библиотекой.
При добавлении сниппета с кодом CKEditor выдаёт следующий html:
<pre><code class="language-php">тут соответственно ваш добавленный код</code></pre>class определяет какой язык программирования подсвечивать.
Если CMS вашего сайта выдаёт что-то другое, то можно либо копать движок либо подправить скипт:
var e=document.querySelectorAll("pre code");pre и code можно заменить на любые теги
Для добавления подсветки подключаем highlight.js:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>Лучше скрипт и файл стилей скачать на свой сервер, чтобы уменьшить время загрузки страниц. Выбрать желаемый стиль можно на оф. сайте,а скачать его можно тут.
P.S. на этом сайте используется a11y-light.min.css.
