Kod podświetlania składni w Javascript [zamknięty]

109

Jakie biblioteki Javascript możesz polecić do podświetlania składni bloków <code> w HTML?

(Jedna sugestia na odpowiedź).

javascript html syntax syntax-highlighting mlambie
źródło
shjs.sourceforge.net
Firoz Khan

Odpowiedzi:

103

StackOverflow używa biblioteki Prettify .

AaronSieb
źródło
Popieram to. Google Code używa go do własnego podświetlania repozytorium (od czasu, gdy go napisali) i automatycznie wykrywa język.
Karan
Z pewnością użycie takiego, który „automatycznie” wykrywa język, po prostu zwiększa wagę komputera / przeglądarki klienta ...
James
2
Możesz podać język Prettify, jeśli go znasz, poprawi to wydajność. To po prostu nie jest używane w StackOverflow ze względu na dużą liczbę użytkowników językowych.
Vincent Robert
Właśnie dodałem to do mojej strony internetowej i jest świetny i prosty w użyciu!
Lawrence Dol
@Vincent: poprawia więcej niż tylko wydajność ;-)
SamB
44

Niedawno opracowałem taki, który nazywa się tęcza.

Głównym celem projektu było uczynienie podstawowej biblioteki naprawdę niewielką i naprawdę łatwe rozszerzanie dla programistów.

Zobacz http://rainbowco.de .

Craig
źródło
2
Właśnie dzisiaj natknąłem się na Rainbow - wydaje mi się, że może on lepiej rozróżniać niż Prettify (na przykład, będąc w stanie powiedzieć, kiedy rdf:typejest używany jako element, a kiedy jest atrybutem).
Roger_S,
3
To musi iść na górę, Craig. Wypróbowałem wszystkie inne rozwiązania i tylko Rainbow poprawnie obsługiwał Pythona i miał czytelne arkusze stylów motywów. Niesamowita wtyczka!
Blender
15

jQuery Syntax Highlighter to nowy, oparty na Google Prettify - naprawdę bardzo popularny, zwykły podświetlacz składni javascript.

Obsługuje takie rzeczy jak codei prebloki, może używać language-javascriptnazw klas, takich jak wskazanie, że chcemy je podświetlać, a także zawijanie słów. Możesz skopiować i wkleić kod, wybierając go normalnie, zamiast otwierania widoku surowego, jak wiele innych. Można go dodatkowo dostosować za pomocą atrybutu danych HTML5 data-shlub przez określenie opcji podczas inicjalizacji. Świetny, stabilny wybór, który jest regularnie aktualizowany.

balupton
źródło
Autor tak naprawdę twierdzi, że jest oparty na Google Prettify, a nie SyntaxHighlighter. Wygląda jednak tak samo jak SyntaxHighlighter 3, ale wydaje się, że wymaga dużo mniej pracy do skonfigurowania. Dzięki za link!
Tieson T.
15

Co o Prism przez Lea Verou.

Z jej ogłoszenia na blogu w czerwcu (2012):

  • Jest malutki. Rdzeń jest zminimalizowany i spakowany gzipem tylko 1,5 KB.
  • Jest niesamowicie rozszerzalny. Nie tylko łatwo jest dodawać nowe języki (jest to obecnie podane przy każdym podświetlaniu składni), ale także rozszerzać istniejące.
  • Obsługuje równoległość poprzez Web Workers, aby w niektórych przypadkach uzyskać lepszą wydajność.
  • Nie zmusza cię to do używania jakichkolwiek znaczników specyficznych dla Prism, nawet nazwy klasy specyficznej dla Prism, tylko standardowe znaczniki, których i tak powinieneś używać. Możesz więc po prostu spróbować przez chwilę, usunąć, jeśli ci się nie podoba i nie zostawiać śladów.
Ilya Tuvschev
źródło
To okazało się dla mnie najlepszą opcją spośród wszystkich odpowiedzi ze względu na łatwość dodawania nowych definicji językowych.
Mike Grace
5

Jeśli używasz jQuery, to jest Chilli:

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

Wszystko, co musisz zrobić, to dołączyć pliki jquery-chili.js i recipes.js, a następnie zaznaczyć 

$("code").chili();

Powinien sam zrozumieć język.

Edu Felipe
źródło
Linki do przykładów na tej stronie prowadzą do wygasłej domeny pełnej reklam, więc trochę trudno jest zorientować się, jak wygląda ten zakreślacz.
Nathan Osman
5

Jestem bardzo zadowolony z SHJS . Obsługuje wiele języków i wydaje się dość szybki i dokładny.

Oto przykład, w którym używam go na moim blogu . Używam własnego niestandardowego pliku CSS, który symuluje podświetlanie składni Cody . Napisz do mnie, jeśli chcesz go użyć.

Andrew Hedges
źródło
4

jQuery.Syntax to niezwykle szybkie i lekkie wyróżnienie składni. Ma dynamiczne ładowanie plików źródłowych składni i integruje się czysto za pomocą CSS lub modeli.

Został opracowany specjalnie w celu wypełnienia luki - to jest: szybki, czysty parser składni po stronie klienta.

ioquatix
źródło
niestety pomyślał, że standardowa wiadomość FpML to SPAM :)
ehosca
@ehosca, czy możesz wyjaśnić mi problem, który masz?
ioquatix,
kiedy wklejam xml z goo.gl/PPcDx do goo.gl/qSqm9 , pojawia się komunikat Nieprawidłowa zawartość, wygląda na spam. mam nadzieję że to pomoże.
ehosca
Musisz wstawić kilka znaków końca wiersza w tekście, w przeciwnym razie będzie to wyglądało na spamowanie linków. Nie pamiętam dokładnych formuł, których użyłem, ale myślę, że jeśli masz więcej niż jeden adres URL w wierszu, tekst jest uważany za spam - dzieje się tak, ponieważ mnóstwo botów spamowało system ( syntax-highlighing.com ).
ioquatix
3

Jeśli szukasz podświetlania składni w edytorze w przeglądarce, wypróbuj CodeMirror .

rplevy
źródło
3

Nie kłócę się, ale po prostu pomyślałem, że warto wspomnieć, że jeśli korzystasz z platformy CMS lub blogu, użycie podświetlacza zaplecza jest lepsze z oczywistych powodów - spójrz na Geshi ( http://qbnz.com/highlighter/ ) Jeśli jesteś zainteresowany. Właściwie możesz skonfigurować serwer tak, aby analizował zawartość HTML za pomocą technologii zaplecza - więc w ogóle nie ma potrzeby używania podświetlaczy JS. (Jedyną funkcjonalnością, jaką dodają, jest możliwość drukowania / kopiowania [przy użyciu swf].)

James
źródło
2
Nie jest to dla mnie oczywiste. Dlaczego lepiej używać zakreślacza zaplecza?
Evan P.
1
Tak, ja też bardzo chciałbym wiedzieć, co jest „oczywiste” w tym, że wolę wysłać większą odpowiedź do klienta ...
ZenMaster,
1
Wolę, aby podświetlanie składni nadal było obecne na urządzeniach, które nie mają włączonego JS. Dodatkowo zakreślacze po stronie klienta mają koszty działania, które mogą być dość wysokie, jeśli masz dużo kodu do wyróżnienia. To powiedziawszy, zależy to od konkretnego przypadku użycia :)
James
Które urządzenia nie mają włączonego JS?
Jack Giffin,