JavaScript библиотека Highlight.js для подсветки кода

Подсветка кода на JS с Highlight.js как использовать
Метки: / /

В этой стать мы разберём как использовать JavaScript библиотеку Highlight.js, на которой делается подсветка кода для вашего сайта, особо актуально для тех кто пишет сайт по программированию.

Также если вас интересуют разные библиотеки, то рекомендую посмотреть статью «JS библиотека Tessaract.js получение текста из картинки», там тоже рассказывается об одной очень интересной библиотеки.

Как установить Highlight.js:

Установить её крайне просто, вы можете её загружать через CDN или использовать для установки NPM, или даже установить в ручную, тут как вам удобнее.

CDN:

NPM:

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

Работа с Highlight.js:

Работать с ней так же просто как и установить, после того как вы подключили библиотеку, если вы работаете с обычным HTML то вам достаточно написать тег <pre> и внутри него тег тег <code>, и не забыть для второго тега добавить класс, который будет обозначать для какого языка применять стили.

Вот пример:

Как вы видите первый блок для HTML, второй для JavaScript, третий для PHP, и зависимо от класса вы можете менять стили для конкретного языка.

Но если вы используете Node.js, то вы можете автоматически определять какой код используется в строчки, и соответственно применять стили.

Вот как это делается:

Как видите мы тут подключаем библиотеку highlight.js, и используем метод hljs.highlightAuto(), а внутрь передаём строку которую мы хотим покрасить, и потом используем value, таким образом возвращаем результат.

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

То есть теперь импортируем «highlight.js/lib/common» и тут мы уже не автоматически выбираем, а задаём стиль синтаксиса, как тут видите, у нас XML.

Вывод:

В этой статье вы прочитали как использовать JavaScript библиотеку Highlight.js, благодаря которой делается подсветка кода, думаю вам было интересно и полезно.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии