Код подсветки синтаксиса с помощью Javascript [закрыто]

109

Какие библиотеки Javascript вы можете порекомендовать для подсветки синтаксиса блоков <code> в HTML?

(Одно предложение на ответ, пожалуйста).

javascript html syntax syntax-highlighting mlambie
источник
shjs.sourceforge.net
Фироз Хан

Ответы:

103

StackOverflow использует библиотеку Prettify .

Аарон Сиб
источник
Я поддерживаю это. Google Code использует его для выделения собственного репо (поскольку они его написали) и автоматически определяет язык.
Каран
Безусловно, использование того, который «автоматически» определяет язык, просто увеличивает вес клиентской машины / браузера ...
Джеймс
2
Вы можете передать язык для Prettify, если знаете его, это улучшит производительность. Это просто не используется в StackOverflow из-за большой языковой аудитории.
Винсент Роберт
Просто добавил это на свой веб-сайт, и это здорово и так просто в использовании!
Лоуренс Дол,
@Vincent: это улучшает не только производительность ;-)
SamB
44

Недавно я разработал одну под названием «радуга».

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

См. Http://rainbowco.de .

Craig
источник
2
Я только что наткнулся на Rainbow сегодня - мне кажется, что он может различать более точно, чем Prettify (например, способность определять, когда rdf:typeиспользуется как элемент, а когда это атрибут).
Roger_S 09
3
Это должно быть наверху, Крейг. Я пробовал все другие решения, и только Rainbow правильно обрабатывала Python и имела удобочитаемые таблицы стилей тем. Замечательный плагин!
Blender
15

jQuery Syntax Highlighter - это новый инструмент, основанный на Google Prettify - действительно, очень популярном простом выделителе синтаксиса javascript.

Он поддерживает такие вещи, как codeи preблоки, может использовать language-javascriptимена классов, например, чтобы указать, что мы хотим, чтобы он выделялся, а также перенос слов. Вы можете скопировать и вставить код, выбрав его как обычно, вместо того, чтобы открывать необработанное представление, как многие другие. Его можно дополнительно настроить, используя атрибут данных HTML5 data-shили задав параметры при инициализации. Отличный стабильный выбор, который регулярно обновляется.

balupton
источник
Автор на самом деле говорит, что он основан на Prettify от Google, а не на SyntaxHighlighter. Выглядит так же, как SyntaxHighlighter 3, но, похоже, требует гораздо меньше работы для настройки. Спасибо за ссылку!
Tieson T.
15

А как насчет Prism от Lea Verou.

Из ее сообщения в блоге в июне (2012 г.):

  • Он крошечный. Ядро уменьшено и сжато с помощью gzip только 1,5 КБ.
  • Это невероятно расширяемое. Не только легко добавлять новые языки (в наши дни это предусмотрено каждым инструментом выделения синтаксиса), но и расширять существующие.
  • Он поддерживает параллелизм через Web Workers для повышения производительности в некоторых случаях.
  • Это не заставляет вас использовать какую-либо разметку, специфичную для Prism, даже имя класса, специфичное для Prism, только стандартную разметку, которую вы все равно должны использовать. Итак, вы можете просто попробовать его на некоторое время, удалить его, если он вам не нравится, и не оставить следов.
Илья Тувщев
источник
В итоге для меня это был лучший вариант из всех ответов из-за простоты добавления новых определений языка.
Майк Грейс
5

Если вы используете jQuery, есть Chilli:

http://code.google.com/p/jquery-chili-js/

Все, что вам нужно сделать, это включить jquery-chili.js и recipes.js и выделить с помощью 

$("code").chili();

Он должен сам определить язык.

Эду Фелипе
источник
Все ссылки на примеры на этой странице ведут к домену с истекшим сроком действия, заполненному рекламой, поэтому немного сложно понять, как выглядит этот маркер.
Натан Осман
5

Я очень доволен SHJS . Он поддерживает множество языков и кажется довольно быстрым и точным.

Вот пример, когда я использую его в своем блоге . Я использую свой собственный файл CSS, который имитирует подсветку синтаксиса Coda . Напишите мне, если хотите его использовать.

Эндрю Хеджес
источник
4

jQuery.Syntax - чрезвычайно быстрый и легкий инструмент для выделения синтаксиса. Он имеет динамическую загрузку исходных файлов синтаксиса и легко интегрируется с использованием CSS или моделей.

Он был разработан специально, чтобы заполнить пробел, а именно: быстрый, чистый, синтаксический анализатор на стороне клиента.

ioquatix
источник
к сожалению, стандартное сообщение FpML считалось СПАМом :)
ehosca 08
@ehosca, ты можешь прояснить проблему, с которой ты столкнулся?
ioquatix
когда я вставляю xml в goo.gl/PPcDx в goo.gl/qSqm9, он говорит, что недействительный контент, кажется, спам. надеюсь это поможет.
ehosca
Вам необходимо включить в текст несколько разрывов строк, иначе это будет похоже на ссылочный спам. Я не могу вспомнить точные формулы, которые я использовал, но я думаю, что если у вас есть более одного URL-адреса в строке, текст считается спамом - это потому, что множество ботов рассылали спам в систему ( syntax-highlighing.com ).
ioquatix
3

Если вы ищете подсветку синтаксиса в редакторе в браузере, попробуйте CodeMirror .

rplevy
источник
3

Я не спорю, но подумал, что стоит упомянуть, что если вы используете CMS или платформу блога, то использование backend-подсветки лучше по очевидным причинам - взгляните на Geshi ( http://qbnz.com/highlighter/ ) если тебе интересно. На самом деле вы можете настроить свой сервер для анализа HTML-содержимого с помощью серверной технологии, так что выделители JS вообще не нужны. (Единственная добавленная ими функция - это возможность печати / копирования [с использованием SWF].)

Джеймс
источник
2
Для меня это не очевидно. Почему лучше использовать backend-маркер?
Эван П.
1
Да, мне тоже очень хотелось бы знать, что является «очевидным» в том, что я предпочитаю посылать больший ответ клиенту ...
ZenMaster
1
Я предпочитаю, чтобы подсветка синтаксиса по-прежнему присутствовала на устройствах, на которых не включен JS. Кроме того, выделители на стороне клиента требуют затрат времени выполнения, которые могут быть довольно значительными, если вам нужно выделить много кода. Тем не менее, это зависит от вашего конкретного сценария использования :)
Джеймс
На каких устройствах не включен JS?
Джек Гиффин