Топ 5: Лучшие плагины кода подсветки кода JavaScript

Полезно для тех, кто любит кодировать, вам может понадобиться такой плагин, чтобы выделить любой пример кода на вашем сайте или в блоге. Следующая коллекция плагинов подсветки синтаксиса содержит только те, которые предлагают лучшие функции, простую инициализацию и тематические элементы. Ни одному из них не требуется jQuery для работы, поскольку они независимы и используют только VanillaJS.

5. SHJS

SHJS — это скрипт JavaScript, который выделяет фрагменты исходного кода в документах HTML. Документы, использующие SHJS, выделяются на стороне клиента веб-браузером. SHJS использует определения языка из GNU Source-highlight. Это дает SHJS возможность выделять исходный код, написанный на разных языках. SHJS должен работать в любом браузере, который соответствует стандартам HTML 4, ECMA-262 и DOM Level 2 (я знаю, он слишком старый, но предоставляет запасной вариант для слишком старых браузеров, и это может пригодиться).

Чтобы использовать SHJS, вам нужно как минимум 3 файла:

• Основной скрипт или минимизированная версия
• Файл определения языка
• Таблица стилей

Этот плагин имеет старую школу, поэтому вам нужно загрузить файл .js с определением языка, который вы хотите выделить. Однако вы можете обернуть их все в один файл.

4. SyntaxHighlighter

SyntaxHighlighter — это полнофункциональная автономная программа подсветки синтаксиса кода на стороне клиента, разработанная в JavaScript.

Чтобы заставить SyntaxHighlighter работать на вашей странице, вам нужно сделать следующее:

• Следуя инструкциям по сборке, соберите свой собственный syntaxhighlighter.js
• Перетащите его на страницу, используя пометить или следовать инструкциям по использованию CommonJS

Чтобы инициализировать код JavaScript, вы можете использовать:

function foo()
{
}
К сожалению, SyntaxHighlighter не поддерживает какой-либо стандарт, поэтому ваша разметка будет выделена этим плагином и не будет так легко обслуживаться.
3. радуга
Rainbow — библиотека подсветки синтаксиса кода, написанная на Javascript. Он был разработан, чтобы быть легким (1,4 КБ), простым в использовании и расширяемым. Это полностью настраиваемый с помощью CSS. Радуга сама по себе очень проста. Он проходит через блоки кода, обрабатывает шаблоны регулярных выражений и переносит соответствующие шаблоны в  теги. Все темы оставлены на усмотрение CSS.
В вашей разметке атрибут data-language используется для указания того, какой язык использовать для выделения:
var testing = true;
[/ NOEDIT]
Используйте метод Rainbow.color, чтобы выделить код:
Rainbow.color();
2. highlight.js
Highlight — это супер-подсветка кода DOM. Он пытается автоматически определить язык. Если автоматическое определение не работает для вас, вы можете указать язык в атрибуте класса:
152 языка и 72 стиля
автоматическое определение языка
многоязычная подсветка кода
доступно для node.js
работает с любой разметкой
совместим с любой JS Framework
Чтобы использовать highlight.js в вашем проекте, просто включите файлы css (1) и js (1) и инициализируйте их initHighlightingOnLoad() метод:

hljs.initHighlightingOnLoad();
Требуемая разметка должна выглядеть так:
Some escaped code to highlight here
[/ NOEDIT]
1. Prism.js
Prism — это легковесная расширяемая подсветка синтаксиса, созданная с учетом современных веб-стандартов. Он используется на тысячах веб-сайтов, включая некоторые из тех, которые вы посещаете ежедневно.
Все стилизация выполняется с помощью CSS с разумными именами классов, такими как .comment, .string, .property и т.д. Вы можете выбрать одну из семи доступных тем. Призма не поддерживает IE 6-8.
Только 2KB минимизировано  сжатый (ядро). Каждое определение языка добавляет примерно 300-500 байт.
Поощряет хорошие авторские практики. Другие маркеры поощряют или даже заставляют вас использовать элементы, которые семантически неверны, такие как
 (самостоятельно) или. Prism заставляет вас использовать правильный элемент для разметки кода: , Сам по себе для встроенного кода или внутри 
 для блоков кода. Кроме того, язык определяется способом, рекомендованным в проекте HTML5: классом language-xxxx.

Определение языка наследуется. Это означает, что если несколько фрагментов кода имеют один и тот же язык, вы можете просто определить его один раз в одном из их общих предков.
Ты можешь использовать плагины как выделение строк или номера строк (все необязательно).
отзывчивый

Для установки просто включите файл prism.css (выберите нужную тему) и выберите языки, которые нужно выделить на домашней странице плагина (или выберите все), и включите их в свой документ.
Согласно Спецификация HTML5, рекомендуемый способ определения языка кода - это класс language-xxxx, который использует Prism. Чтобы упростить задачу, подсветка будет автоматически активирована, если элемент кода уже имеет класс с указанным языком, т.е.

Some code
Some code
[/ NOEDIT]
Наш Code World использует призму, чтобы выделить примеры кода
дополнительный
Microlight.js
Github | демонстрация
microlight.js - это микробиблиотека с открытым исходным кодом, которая улучшает читаемость фрагментов кода, выделяя для любого языка программирования без добавления дополнительных языковых пакетов или стилей.
В отличие от других решений для подсветки кода, microlight.js не поддерживает набор правил для многих языков. Вместо этого он использует общую стратегию выделения, обеспечивающую разумное выделение для большинства языков программирования. В результате:
Размер библиотеки очень компактный 2.2k.
Вам не нужно указывать, какой это язык, и вам не нужно беспокоить пользователей этим.
Фактически, microlight.js не заботится о том, на каком языке написан код, и не заботится о структуре кода. Он просто просматривает код и выделяет его.
EnlighterJS
EnlighterJS - это бесплатный, простой в использовании плагин для подсветки синтаксиса, разработанный для MooTools. Использовать его можно так же просто, как добавить на ваш сайт один сценарий и стиль, выбрать элементы, которые вы хотите выделить, а EnlighterJS позаботится обо всем остальном. Просто добавьте data-enlighter-language атрибут для указания языка программирования:
Element.implement({
...some js code to highlight..
});
EnlighterJS требует MooTools.Core> = 1.4.5.
Google Prettyprint
Google Prettyprint - это встраиваемый скрипт, который делает фрагменты исходного кода в HTML красивее.
Работает на HTML-страницах.
Работает, даже если код содержит встроенные ссылки, номера строк и т. Д.
Простой API: включите немного JS  CSS и добавить обработчик загрузки.
Lightweights: небольшая загрузка и не блокирует загрузку страницы во время работы.
Настраиваемые стили с помощью CSS. Увидеть галерея тем.
Поддерживает все C-подобные, Bash-подобные и XML-подобные языки. Не нужно указывать язык.
Расширяемые языковые обработчики для других языков. Вы можете указать язык.
Поместите фрагменты кода в 
...
 или же ...[/ NOEDIT] и он будет автоматически напечатан:
class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded tags.
}
Если вы знаете еще один замечательный плагин для подсветки синтаксиса, поделитесь им с нами в поле для комментариев. Повеселись