Accentsconagua

Schnelltipp Hinzufügen von Syntaxhervorhebungen zu einem Projekt

Code
Share

In dieser Lektion verwenden wir einen JavaScript-basierten Syntax-Highlighter, um jedem Webprojekt schnell eine Syntaxhervorhebungsfunktion hinzuzufügen - sogar auf einer einfachen HTML-Seite!

Schritt 1 - Laden Sie den Quellcode herunter

Sie können die Syntax-Highlighter-Quelldateien hier herunterladen.

Schritt 2 - Ziehen Sie die src Verzeichnis in Ihr Projekt

Ich benenne diesen Ordner im Allgemeinen in um Textmarker. Löschen Sie nichts in diesem Bereich, es sei denn, Sie erwarten nicht, einige der sprachspezifischen JavaScript-Dateien zu verwenden.

Schritt 3 - Importieren Sie die notwendigen Dateien

Importieren Sie in Ihre HTML-Datei (oder welche Seite für die Anzeige Ihrer Ansicht verantwortlich ist) prettify.css und prettify.js Dateien.

     ohne Titel

Beachten Sie, wie wir unser Skript direkt vor dem Schließen am Ende der Seite platziert haben Karosserie Etikett. Dies ist immer ein kluger Schachzug, da es die Leistung verbessert.

Als nächstes brauchen wir etwas, mit dem wir arbeiten können! Der Syntax-Highlighter sucht entweder nach a Vor oder Code Element, das eine Klasse von hat hübscher Druck. Lass uns das jetzt hinzufügen. 

 
 (function () var jsSyntaxHighlighting = 'rocks';) ();

Schritt 4 - Anrufen der prettyPrint () Funktion

Der letzte Schritt ist das Ausführen von prettyPrint () Funktion. Wir können dieses Bit auch am Ende der Seite platzieren. 

     ohne Titel    
 (function () var jsSyntaxHighlighting = 'rocks';) ();

Wenn wir jetzt die Seite im Browser anzeigen?

Nun, das war einfach! Aber als letzten Bonusschritt, was ist, wenn wir das Highlighter-Thema ändern möchten? In diesem Fall müssen Sie das Stylesheet so bearbeiten, wie Sie es für richtig halten. Besser noch, es gibt eine Handvoll Stylesheets in der Designgalerie, die Sie kostenlos verwenden können. Ich persönlich mag das Desert-Thema. Um es anzuwenden, kopieren Sie das CSS aus dem obigen Link, erstellen Sie ein neues Stylesheet in Ihrem Projekt und fügen Sie das CSS ein. Aktualisieren Sie anschließend das Stylesheet-Include aus dem Kopf Abschnitt Ihres Dokuments. 

   ohne Titel

Im Ernst - kann es einfacher als das werden?

Code
×