highlight.js - лучшая подсветка синтаксиса кода | Wiki | PWODEV
, 09.08.2019 14:25

highlight.js — лучшая подсветка синтаксиса кода


Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Хотя….

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Подсветка кода с помошью скрипта highlight.js
Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в <head> это:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

<pre><code class="html">...</code></pre>

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

Всем удачи в вашем не простом, но очень интересном деле. Не забывайте регистрироваться и писать комментарии.


Добавить комментарий