Подсветка синтаксиса кода на сайте с помощью JS | RUDEBOXНедавно мы натолкнулись на просьбы, объяснить, рассказать и реализовать возможность подсветки кода на сайте, зачастую это необходимо, чтобы выделить код на сайте, та придать ему максимум внимания. Реализовать такую возможность достаточно просто, для этого можно использовать сторонний плагин, или написать самостоятельно стилизацию. В данном уроке мы рассмотрим как можно все это организовать заложив при этом минимум усилий. Все это мы выполним в минималистическом стиле, основной уклон будет на дизайн в стиле OSX.

Начинка контейнера будет схожа с редактором Notepa++, но ее с легкостью можно изменить на свой вкус. И так, давайте приступим.

Шаг 1. HTML

У нас будет контейнер, в котором будет содержаться классы, кроме этого сам код у нас будет обвернут в класс с идентификатором кода:

Для красочного интерфейса мы добавили плашку вверху который будет придавать эффект окна, по сути у нас окно, оформленное под редактор. Идем дальше.

Подсветка синтаксиса кода на сайте с помощью JS | RUDEBOX

Шаг 2. CSS

Теперь над надо оформить все, указать фон, заливку и градиенты для окантовки и шапки, кроме этого для шапки будет три визуализации кнопок:

Шаг 3. JS

Теперь нам необходимо подсвечивать каждый код различным цветом, для этого нам понадобится немного магии которая будет реализована:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: