Share
In diesem Lernprogramm erstellen wir eine Code-Snippet-Box, die Beispielcode auf Webseiten in ansprechend formatierter und leicht lesbarer Form anzeigt, ähnlich wie bei Nettuts. Code-Snippet-Vorschaufenster wie dieses werden oft als Wordpress-Plugins erstellt, aber wir werden sehen, wie wir mit ein wenig jQuery und CSS dasselbe tun können.
Wir können alle erwarteten Funktionen hinzufügen, z. B. Zeilennummerierung und Linienstreifen sowie alle üblichen Werkzeuge, z. B. das Anzeigen des Codes als Text und den druckerfreundlichen Ausdruck. Der folgende Screenshot zeigt die Dinge, mit denen wir am Ende des Tutorials enden werden:
Die Code-Snippet-Box wird aus einem Basiswert erstellt Element; Dies ist das perfekte Element, das verwendet werden kann, da alles, was Sie darin einfügen, als Text in einer Schriftart mit fester Breite wie Monospace dargestellt wird. Dies ist ideal, um Codebeispiele übersichtlich und übersichtlich darzustellen. Außerdem werden Zeilenumbrüche beibehalten. Diese Funktion können wir nutzen, um die Zeilennummerierungs- und Striping-Funktionen hinzuzufügen.
Ein weiterer Grund, warum wir das verwenden tag ist, weil es die ideale Grundlage für unsere Code-Box bildet. In Browsern mit deaktiviertem JavaScript oder solchen, die es einfach nicht unterstützen, wird der Code dennoch akzeptabel dargestellt. Es hebt sich vom Rest des Textes auf der Seite ab und wird nicht zu etwas völlig Nutzlosem und Lächerlichem ausarten.
Beginnen Sie mit der folgenden Seite in Ihrem Texteditor:
jQuery Code-Snippet Box CSS-Code:
#selector color: # 000000; .ein anderer Selektor font-size: 20px; Grenze: 1px fest # 000000; Polsterung: 20px; tagname width: 100%;
Speichern Sie die Seite als code-snippet.html in einem Verzeichnis, in dem sich bereits die aktuelle Version von jQuery befindet. Ohne Styling und ohne Skriptintervention sollte die Seite so aussehen:
Als Standardfall ist es akzeptabel. Wenn die Seite einen anderen Haupttext enthält, wird der element würde sich als separater Textblock herausstellen und erscheint immer noch etwas codeartig.
Beginnen wir mit dem Streifeneffekt, der jede Linie von den darüber und darunter abhebt, und die Zeilennummerierung, die anzeigt, wenn eine unterbrochene Linie (die auf zwei oder mehr Zeilen überläuft) Teil einer Zeile von ist Beispielcode.
Im leeren >
Accentsconagua
$ (function () // verarbeitet den Inhalt der Snippets $ ("pre.snippet"). each (function () // holt den Inhalt von und Liste und Container erstellen var currentItem = $ (this), currentContents = currentItem.text (), contents = (currentItem.text (). indexOf ("\ n")! = -1)? currentItem.text (). split ("\ n"): currentItem.text (). split ("\ r"), list = $ (""), container = $ ("") .addClass (" snippet-container "). insertBefore (currentItem.prev ()); // Entfernen Sie den Originalinhalt und hüllen Sie ihn in den Container currentItem.text (" "). prev (). andSelf (). appendTo (container) ein. // normalize height (currentItem.height ()> 0)? list.css ("marginTop", -16): null; // Listenelement $ .each erstellen (Inhalt, Funktion (i, val) // create Listenelement und inneres p var li = $ ("- ") .appendTo (Liste), p = $ ("
") .text (val) .appendTo (li); // Stripe-Klasse hinzufügen (i% 2 === 0)? li.addClass (" stripe "): li.addClass (" unstripe ");); list .appendTo (currentItem);););
Lassen Sie uns durch jeden Teil des Codes gehen, um zu sehen, was er tut. Zuerst wählen wir jeden aus Element, das den Namen der Snippet-Klasse hat, und für jedes gefundene Element führen wir eine anonyme Funktion aus. Innerhalb dieser Funktion setzen wir zunächst fünf Variablen. Die erste Variable ist der Selektor für den Strom Element, das wir aus Leistungsgründen zwischenspeichern. Wir werden die verwenden $ (das) Verweisen Sie wiederholt in unserem Code, sodass es sinnvoll ist, ihn in einer Variablen zu speichern, um schnell darauf zugreifen zu können.
Die nächste Variable speichert den gesamten Textinhalt des aktuellen Im nächsten wird ein Array gespeichert, in dem jedes Element im Array eine einzelne Textzeile aus der Zeile enthält Element. Die Länge des Arrays entspricht der Anzahl der Textzeilen in Element. Weil Zeilenumbrüche drin sind Wenn Elemente erhalten bleiben, können wir diese leicht erkennen und basierend auf ihnen einen Split durchführen.
Die meisten Browser erkennen Zeilenumbrüche in JavaScript mithilfe von \ n Newline-Zeichen, so sehen wir zuerst, ob der innere Text der Element enthält eines dieser Elemente und verwendet es, wenn dies der Fall ist. IE erkennt Zeilenumbrüche anders als andere Browser, wenn nicht \ n Zeichen gefunden, führen wir die Aufteilung mit der \ r Wagenrücklauf-Zeichen stattdessen.
Die nächste Variable enthält ein neues Element mit geordneter Liste. mit einem
element ist perfekt, da es die Zeilennummerierung des Code-Snippets automatisch für uns erledigt. Die letzte Variable zeigt auf einen neuen Container dem geben wir einen Klassennamen an und hängen ihn direkt vor der Seite an Element, das vor der Snippet-Box steht. Erstellen des Arrays der Der Inhalt des Elements ist keine destruktive Operation. Daher müssen wir den ursprünglichen Inhalt entfernen, um eine Duplizierung zu vermeiden. Dies kann durch die Verwendung einer leeren Zeichenfolge mit jQuery's erreicht werden Text() Methode. Wir bewegen auch die und das Element in unser neu erstelltes Containerelement.
Firefox scheint einen Zeilenumbruch in die Element, das das Element gibt Höhe wenn es überhaupt keine Höhe haben sollte (da wir den Inhalt entfernt haben). Um dem entgegenzuwirken, erkennen wir, ob das leer ist Element hat eine Höhe größer als 0, und wenn ja, setzen wir die Rand oben von unserem neuen
Element, um es oben an das Element zu ziehen. Dies ist nur Firefox, aber es ist besser nachzusehen Höhe anstatt nach Firefox zu suchen. Die Erkennung von Funktionen über das Browser-Sniffing gewinnt jedes Mal.
Striping
Der nächste Abschnitt des Codes befasst sich mit dem Hinzufügen der Klassen, die wir für den Striping-Effekt verwenden können. wie wir den inhalt des Element in ein Array und nicht in ein jQuery-Objekt. Wir können den Standard nicht wie bei der Methode verwenden Elemente auf der Seite.
Stattdessen können wir die jQuery verwenden jeder Dienstprogrammmethode, die direkt in der jQuery aufgerufen wird $ Objekt. Die Methode akzeptiert 2 Argumente, das erste ist das zu iterierende Objekt, in diesem Fall unser Inhalt array, und die zweite ist eine anonyme Funktion, die für jedes Element im Array ausgeführt werden soll. Unsere Funktion erhält automatisch zwei Argumente. ich ist der Index des Artikels, der gerade wiederholt wird, und val ist der Inhalt des Feldelements.
In unserer Funktion erstellen wir zunächst einen neuen Listenpunkt für unsere
und fügen Sie ein neues Absatzelement ein, das den Inhalt des aktuellen Arrayelements enthält. Das neue Element wird an das angehängt
Element, das wir zuvor erstellt haben. Dann fügen wir die Striping-Klassen hinzu. Dazu verwenden wir den JavaScript-Moduloperator, um festzustellen, ob der aktuelle Array-Index gerade oder ungerade ist. Für jeden geraden Index fügen wir die Klasse hinzu Streifen und für jeden ungeraden Index fügen wir die Klasse hinzu streifen. Wenn Sie zwei Klassen für das Striping verwenden, können Sie einfach beide Streifenfarben festlegen, anstatt darauf zu bestehen, dass eine der Farben weiß ist.
Zu diesem Zeitpunkt sollte unsere Beispielseite jetzt so aussehen:
Schnipsel-Styling
Jetzt können wir das Styling für das Code-Snippet-Widget und das Striping hinzufügen. Fügen Sie in einer neuen Datei in Ihrem Texteditor den folgenden Code hinzu:
.Snippet-Container Breite: 630px; Polsterung: 10px 10px 30px; Grenze: 1px fest # 999999; Hintergrundfarbe: # e1e1e1; Rand unten: 10px; Position: relativ; .snippet-container h2 margin: 0 0 10px; Polsterung links: 10px; Schriftfamilie: Georgia; Schriftgewicht: normal; Schriftstil: kursiv; .snippet border: 1px fest # 999999; Marge: 0; .snippet ol margin: 0; Polsterung links: 34px; Hintergrundfarbe: # 8dd397; Farbe: #ffffff; Schriftdicke: fett; Schriftstil: kursiv; .snippet ol li padding-left: 10px; .snippet ol p margin: 0; Farbe: # 000000; Schriftgewicht: normal; font-style: normal; Leerraum: Pre-Wrap; Polsterung: 3px 0; .snippet .stripe background-color: # f5f5f5; .snippet .unstripe background-color: #ffffff;
Speichern Sie dies als code-snippet.css im selben Verzeichnis wie die Beispielseite. Die meisten dieser CSS-Dateien dienen ausschließlich der Dekoration und wurden willkürlich nach meinen eigenen Vorlieben ausgewählt. Sie können die Schriftarten, Farben, die Breite oder alles andere ändern. Das wichtigste funktionale CSS, das wir setzen, ist die relative Positionierung auf jeder Snippet-Box und der Leerraum auf das innere regieren Elemente in jedem Listenelement; wenn wir das nicht einstellen Pre-Wrap Der Text für jede Zeile wird den Snippet-Container überfluten, wenn er zu lang ist, anstatt in die nächste Zeile zu springen.
Mit dem Hinzufügen unseres Stylesheets sieht die Snippet-Box jetzt folgendermaßen aus:
Andere Arten von Code
In diesem Beispiel haben wir bisher sehr einfaches CSS als Beispielcode verwendet, der im Snippet-Feld angezeigt wird. Können wir einen anderen Code hinzufügen, den wir wollen? Lass uns einen Blick darauf werfen. Direkt nach dem ersten Element auf der Seite füge folgenden Code hinzu: [/ sourcecode]
[sourcecode language = "snippet" originalClass = "snippet"] Eine Beispiel-Webseite Dies ist eine einfache Webseite
Alles ist so ziemlich das, was wir zuvor hatten, mit einem großen Unterschied. wir können das nicht benutzen < Zeichen bei der Anzeige von HTML-Tags in unserem Beispielcode. Wenn wir setzen würden in unserer Tag würde es als interpretiert werden Element und verursachen eine HTML-Warnung. Um dies zu umgehen, können wir die HTML-Entität angeben
<
das wird in a umgewandelt Zeichen durch den Browser, ohne dass der Browser es für ein tatsächliches Element hält. Es ist wahrscheinlich am besten, den verwendeten Code anzuzeigen Zeichen auf diese Weise, um eine versehentliche Interpretation durch den Browser zu verhindern. So sollte der zweite Ausschnitt aussehen:
Ich habe mich an die Einrückungskonvention gehalten, die ich normalerweise verwende. Dies sind 2 Standardbereiche für verschachtelte Elemente. Dies ist eine Angewohnheit, die ich als Ergebnis der Notwendigkeit bekam, viele potenziell breite Codezeilen in Dokumenten mit fester Breite anzuzeigen. Dies ist nicht die Standardkonvention, bei der es sich um vier einzelne Leerzeichen oder eine Tabulatorfläche handelt. Sie können die von Ihnen bevorzugte Konvention verwenden, wenn Sie das Snippet-Feld auf Ihrer eigenen Site bereitstellen, da sowohl Einzel- als auch Tabulatorbereiche vom beibehalten werden Vor Etikett.
Snippet-Tools
Eine weitere Funktion von Code-Snippet-Boxen, die wir problemlos hinzufügen können, sind eine Reihe von Tools, die dem Besucher die Verwendung des Codes erleichtern. Wenn Sie versuchen, den Code aus einem der Snippet-Boxen in einen Texteditor zu kopieren und einzufügen, werden die Zeilennummern aus der geordneten Liste ebenfalls auf die neue Seite kopiert. Dies ist bedauerlich, da das Beibehalten dieser Zahlen möglicherweise dazu führt, dass der Beispielcode nicht mehr funktioniert. Wir können einen Mechanismus bereitstellen, bei dem der Code ohne die Zeilennummern angezeigt werden kann.
Direkt nach der Codezeile, die liest list.appendTo (currentItem); Fügen Sie den folgenden Code hinzu:
// Werkzeuge erstellen var toolContainer = $ ("") .addClass (" tools-container "), toolList = $ ("") .addClass (" tool-list "). appendTo (toolContainer), listItem1 = $ ("- ") .addClass (" tool-item "). text (" | "). appendTo (toolList), listItem2 = $ ("
- ") .addClass (" tool-item "). appendTo (toolList), plain = $ ("") .addClass (" tool "). attr (id:" plain ", href:" # ", title:" Code als Nur-Text anzeigen "). text (" Show Plain "). prependTo (listItem1). click (function (e) // stop event e.preventDefault (); // Container für einfachen Code erstellen, wenn ($ (this) .closest (". snippet-container"). find (". snippet"). children (".display-box"). length === 0) var displayBox = $ ("
