Syntax-Hervorhebungscode mit Javascript [geschlossen]

109

Welche Javascript-Bibliotheken können Sie für die Syntaxhervorhebung von <code> -Blöcken in HTML empfehlen?

(Ein Vorschlag pro Antwort bitte).

javascript html syntax syntax-highlighting mlambie
quelle
shjs.sourceforge.net
Firoz Khan

Antworten:

103

StackOverflow verwendet die Prettify- Bibliothek.

AaronSieb
quelle
Ich unterstütze das. Google Code verwendet es für die eigene Repo-Hervorhebung (seit sie es geschrieben haben) und erkennt die Sprache automatisch.
Karan
Wenn Sie eine verwenden, die die Sprache "automatisch" erkennt, wird der Computer / Browser des Kunden einfach stärker belastet ...
James
2
Sie können Prettify die Sprache geben, wenn Sie sie kennen. Dadurch wird die Leistung verbessert. Dies wird in StackOverflow aufgrund des großen Sprachpublikums einfach nicht verwendet.
Vincent Robert
Ich habe dies gerade zu meiner Website hinzugefügt und es ist großartig und so einfach zu bedienen!
Lawrence Dol
@ Vincent: Es verbessert mehr als nur die Leistung ;-)
SamB
44

Ich habe kürzlich einen namens Regenbogen entwickelt.

Das Hauptziel des Designs war es, die Kernbibliothek wirklich klein zu machen und es Entwicklern wirklich einfach zu machen, sie zu erweitern.

Siehe http://rainbowco.de .

Craig
quelle
2
Ich bin heute gerade auf Rainbow gestoßen - es sieht für mich so aus, als ob es feiner unterscheiden kann als Prettify (wie zum Beispiel zu erkennen, wann rdf:typees als Element verwendet wird und wann es ein Attribut ist).
Roger_S
3
Das muss nach oben gehen, Craig. Ich habe alle anderen Lösungen ausprobiert und nur Rainbow hat Python korrekt gehandhabt und hatte lesbare Themen-Stylesheets. Erstaunliches Plugin!
Blender
15

Der jQuery Syntax Highlighter ist neu und basiert auf Googles Prettify - einem wirklich sehr, sehr beliebten Textmarker für die einfache Javascript-Syntax.

Es unterstützt Dinge wie codeund preBlöcke, die Klassennamen verwenden können, language-javascriptum anzuzeigen, dass es hervorgehoben werden soll, sowie Zeilenumbruch. Sie können Code kopieren und einfügen, indem Sie ihn normal auswählen, anstatt wie viele andere eine Rohansicht öffnen zu müssen. Sie kann mithilfe des HTML5-Datenattributs data-shoder durch Angabe von Optionen bei der Initialisierung weiter angepasst werden . Eine großartige stabile Wahl, die regelmäßig aktualisiert wird.

Balupton
quelle
Der Autor sagt tatsächlich, dass es auf Googles Prettify basiert, nicht auf SyntaxHighlighter. Sieht zwar genauso aus wie SyntaxHighlighter 3, scheint aber viel weniger Arbeit für die Einrichtung zu erfordern. Danke für den Link!
Tieson T.
15

Was ist mit Prisma von Lea Verou?

Aus ihrer Blogpost- Ankündigung im Juni (2012):

  • Es ist winzig. Der Kern ist nur 1,5 KB minimiert und gezippt.
  • Es ist unglaublich erweiterbar. Es ist nicht nur einfach, neue Sprachen hinzuzufügen (das ist heutzutage bei jedem Syntax-Textmarker selbstverständlich), sondern auch vorhandene zu erweitern.
  • Es unterstützt Parallelität durch Web Worker, um in bestimmten Fällen eine bessere Leistung zu erzielen.
  • Es zwingt Sie nicht dazu, ein Prisma-spezifisches Markup zu verwenden, nicht einmal einen Prisma-spezifischen Klassennamen, sondern nur ein Standard-Markup, das Sie sowieso verwenden sollten. Sie können es also einfach eine Weile ausprobieren, es entfernen, wenn es Ihnen nicht gefällt, und keine Spuren hinterlassen.
Ilya Tuvschev
quelle
Dies war für mich die beste Option aller Antworten, da das Hinzufügen neuer Sprachdefinitionen einfach war.
Mike Grace
5

Wie wäre es mit:

Syntaxhighlighter

Highlight.js

JSHighlighter

Chris Pietschmann
quelle
21
Eine einfache Google-Suche würde mir auch diese Liste geben - aber welche bevorzugen Sie und warum?
viam0Zah
5

Wenn Sie jQuery verwenden, gibt es Chilli:

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

Alles, was Sie tun müssen, ist, die jquery-chili.js und die Rezepte.js einzuschließen und das Highlight mit zu machen 

$("code").chili();

Es sollte die Sprache selbst herausfinden.

Edu Felipe
quelle
Die Links zu Beispielen auf dieser Seite führen alle zu einer abgelaufenen Domain voller Anzeigen. Daher ist es etwas schwierig, sich ein Bild davon zu machen, wie dieser Textmarker aussieht.
Nathan Osman
5

Ich bin sehr zufrieden mit SHJS . Es unterstützt eine Vielzahl von Sprachen und scheint ziemlich schnell und genau zu sein.

Hier ist ein Beispiel, wo ich es in meinem Blog verwende . Ich verwende meine eigene benutzerdefinierte CSS-Datei, die die Syntaxhervorhebung von Coda simuliert . Schicken Sie mir eine E-Mail, wenn Sie es verwenden möchten.

Andrew Hedges
quelle
4

jQuery.Syntax ist ein extrem schneller und leichter Syntax- Textmarker . Es verfügt über ein dynamisches Laden von Syntaxquelldateien und lässt sich mithilfe von CSS oder Modelines sauber integrieren.

Es wurde speziell entwickelt, um eine Lücke zu schließen - das heißt: ein schneller, sauberer, clientseitiger Syntaxparser.

ioquatix
quelle
Leider dachte es, eine Standard-FpML-Nachricht sei SPAM :)
ehosca
@ehosca, kannst du mir etwas Klarheit über das Problem geben, das du hast?
Ioquatix
Wenn ich die XML- Datei in goo.gl/PPcDx in goo.gl/qSqm9 einfüge , heißt es, dass ungültiger Inhalt Spam zu sein scheint. hoffe das hilft.
Ehosca
Sie müssen einige Zeilenumbrüche in den Text einfügen, andernfalls sieht es wie Link-Spam aus. Ich kann mich nicht an die genauen Formeln erinnern, die ich verwendet habe, aber ich denke, wenn Sie mehr als eine URL pro Zeile haben, wird der Text als Spam betrachtet - dies liegt daran, dass viele Bots das System spammen ( syntax-highlighing.com ).
Ioquatix
3

Wenn Sie in einem Browser-Editor nach Syntaxhervorhebungen suchen, versuchen Sie es mit CodeMirror .

rplevy
quelle
3

Ich bin nicht argumentativ, dachte aber nur, dass es aus offensichtlichen Gründen besser ist, einen Backend- Textmarker zu verwenden, wenn Sie ein CMS oder eine Blog-Plattform verwenden. Schauen Sie sich Geshi an ( http://qbnz.com/highlighter/). ) wenn Sie interessiert sind. Tatsächlich können Sie Ihren Server so einrichten, dass HTML-Inhalte über eine Backend-Technologie analysiert werden. Daher sind die JS-Textmarker überhaupt nicht erforderlich. (Die einzige Funktion, die sie hinzufügen, ist die Möglichkeit zum Drucken / Kopieren [mit swf].)

James
quelle
2
Es ist mir nicht klar. Warum ist die Verwendung eines Backend-Textmarkers besser?
Evan P.
1
Ja, auch ich würde wirklich gerne wissen, was "offensichtlich" daran ist, eine größere Antwort an den Kunden zu senden ...
ZenMaster
1
Ich bevorzuge, dass die Syntaxhervorhebung auf Geräten, auf denen JS nicht aktiviert ist, weiterhin vorhanden ist. Darüber hinaus haben clientseitige Textmarker Laufzeitkosten, die sehr hoch sein können, wenn Sie viel Code zum Hervorheben haben. Das heißt, es hängt von Ihrem spezifischen Anwendungsfall ab :)
James
Auf welchen Geräten ist JS nicht aktiviert?
Jack Giffin