Код виділення синтаксису з Javascript [закрито]


109

Які бібліотеки Javascript ви можете порекомендувати для виділення синтаксису блоків <code> у HTML?

(Одна пропозиція на відповідь, будь ласка).


Відповіді:


103

StackOverflow використовує бібліотеку Prettify .


Я другий це. Google Code використовує його для власного виділення репо (з моменту написання) та автоматично визначає мову.
Каран

Безумовно, що використання мови, яка "автоматично" виявляє мову, просто додає більше ваги на машину / браузер клієнта ...
Джеймс,

2
Ви можете дати мові Prettify, якщо ви знаєте її, це покращить продуктивність. Це просто не використовується в StackOverflow через велику мовну аудиторію.
Вінсент Роберт

Просто додав це на свій веб-сайт, і це чудово і настільки просто у використанні!
Лоуренс Дол,

@Vincent: це покращує більше, ніж просто продуктивність ;-)
SamB

44

Нещодавно я розробив один під назвою веселка.

Основна мета дизайну полягала в тому, щоб зробити основну бібліотеку по-справжньому маленькою і зробити розробників справді простим.

Дивіться http://rainbowco.de .


2
Я щойно перебіг Радугу - мені здається, що вона може відрізнятись більш тонко, ніж Prettify (як, наприклад, вміння визначати, коли rdf:typeвона використовується як елемент і коли це атрибут).
Roger_S

3
Це потрібно піднятися до вершини, Крейг. Я спробував усі інші рішення, і тільки Rainbow правильно обробляв Python і мав читабельні таблиці стилів. Дивовижний плагін!
Блендер


15

jQuery Syntax Highlighter - це новий, заснований на Google Prettify - дійсно дуже популярний звичайний підсвічування синтаксису JavaScript.

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


Автор фактично каже, що це засноване на Google Prettify, а не на SyntaxHighlighter. Схоже, SyntaxHighlighter 3, хоча, але, схоже, вимагає набагато менше роботи для налаштування. Дякуємо за посилання!
Тієсон Т.

15

Що з призмою по Лі Вірі.

З повідомлення про її блог у червні (2012 р.):

  • Це крихітні. Ядро є лише 1,5 КБ мінімізованим та gzipped.
  • Це неймовірно розширюється. Не тільки легко додати нові мови (це дано з кожним виділенням синтаксису в наші дні), але і розширити існуючі.
  • Він підтримує паралелізм через Web Workers, для кращої роботи в певних випадках.
  • Це не змушує вас використовувати будь-яку розмітку, специфічну для призми, навіть навіть не специфічне для призми ім'я класу, а лише стандартну розмітку, яку ви повинні використовувати. Отже, ви можете просто спробувати його на деякий час, видалити, якщо він вам не сподобається, і не залишайте слідів позаду.

Це виявилося найкращим варіантом для всіх відповідей для мене через простоту додавання нових мовних визначень.
Майк Грейс


5

Якщо ви використовуєте jQuery, є Chilli:

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

Все, що вам потрібно зробити, це включити jquery-chili.js і рецепти.js, і зробити виділення за допомогою

$("code").chili();

Він повинен сам з'ясувати мову.


Посилання на приклади на цій сторінці призводять до того, що термін дії домену з повним рекламним ресурсом закінчився, тому скласти уявлення про те, як виглядає цей маркер.
Натан Осман

5

Я дуже задоволений SHJS . Він підтримує безліч мов і здається досить швидким і акуратним.

Ось приклад, коли я використовую це у своєму блозі . Я використовую власний спеціальний файл CSS, який імітує виділення синтаксису Coda . Надішліть мені електронний лист, якщо ви хочете ним скористатися.


4

jQuery.Syntax - надзвичайно швидкий і легкий підсвічування синтаксису. Він має динамічне завантаження вихідних файлів синтаксису та інтегрується з використанням CSS чи моделей.

Він був розроблений спеціально для заповнення прогалини - тобто швидкого, чистого синтаксичного аналізатора на стороні клієнта.


на жаль, стандартне повідомлення FpML вважалося СПАМ :)
ehosca

@ehosca, чи ти можеш дати мені пояснення щодо проблеми, що виникає?
ioquatix

коли я вставляю xml у goo.gl/PPcDx до goo.gl/qSqm9, він каже, що недійсний вміст, схоже, є спамом. сподіваюся, що це допомагає.
ehosca

Потрібно включити до тексту кілька розривів рядків, інакше це виглядає як спам-посилання. Я не можу пригадати точні формули, які я використав, але я думаю, якщо у вас є більше однієї URL-адреси на рядок, текст вважається спамом - це тому, що купи ботів спамували систему ( syntax-highlighing.com ).
ioquatix

3

Якщо ви шукаєте виділення синтаксису в редакторі браузера, спробуйте CodeMirror .


3

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


2
Мені це не очевидно. Чому краще використовувати маркер підкреслення?
Еван П.

1
Так, я теж би дуже хотілося знати , що «очевидно» про вважаючи за краще посилати більший відповідь клієнту ...
ZenMaster

1
Я вважаю за краще, щоб підсвічування синтаксису все ще була присутня на пристроях, на яких не ввімкнено JS. Крім того, у маркера на стороні клієнта є витрати на виконання, які можуть бути досить значними, якщо у вас є багато коду для виділення. Однак це залежить від конкретного випадку використання :)
Джеймс

На яких пристроях не ввімкнено JS?
Джек Гіффін


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.