Remy Sharps coole Seite für HTML5-Demos hat auf jeder der einzelnen Demo-Seiten einen „Quelltext anzeigen“-Button. Klicke darauf und du siehst den gesamten Quellcode der Seite, die du gerade betrachtest. Es ist kein Popup und keine neue Registerkarte, sondern zeigt den Quelltext direkt auf der Seite an. Ich fand das cool, also habe ich beschlossen, es auf meine eigene Art nachzubilden.
Der schicke Weg
Demo anzeigen Dateien herunterladen
Die erste Idee, die mir in den Sinn kam, war die Verwendung der :target-Pseudoklasse von CSS3. Wir haben vor einiger Zeit darüber gesprochen, als wir CSS3-Tabs exportiert haben. Die Idee ist, einen Link zu haben, der zur Hash-ID #source-code verlinkt. Das fügt #source-code am Ende der URL hinzu und ermöglicht es dem :target-Selektor, Styling abzugleichen und anzuwenden. Die Grundlagen
<a href="#source-code">View Source</a>#source-code { display: none; }
#source-code:target { display: block; }Jetzt geht es nur noch darum, dieses #source-code-Element mit dem tatsächlichen Quellcode zu füllen. Das ist JavaScript-Territorium, da wir diesen Code dynamisch abrufen wollen, anstatt den Quellcode tatsächlich nur zur Anzeige zu wiederholen. So müssen wir nichts anpassen, wenn wir die Seite ändern; unser Quelltext-Button zeigt den aktualisierten Quelltext, wie er geschrieben ist. Wir können uns auf jQuery verlassen, um dies für uns zu erledigen.
var html = $("html").html();Das gibt uns den gesamten HTML-Code der Seite, ausgenommen nur den DOCTYPE und die tatsächlichen <html>-Tags. Du könntest auch über document.documentElement.innerHTML darauf zugreifen, aber hey, wenn wir schon jQuery verwenden, dann nehmen wir es auch. Wir erstellen ein brandneues <pre>-Element, füllen es mit einem „falschen“ DOCTYPE und HTML-Tags und fügen dann das gerade von der Seite gesammelte HTML ein.
Ein paar schnelle Überlegungen zu dem gesammelten HTML: 1) Lassen Sie uns die <-Zeichen maskieren, damit sie korrekt auf der Seite angezeigt werden, ohne als tatsächliches HTML gerendert zu werden. 2) Lassen Sie uns alle Links „verlinken“, damit sie klickbar sind (teilweise von hier übernommen).
Dann platzieren wir dieses neu erstellte <pre>-Element in unserem #source-code Div.
$(function() {
$("<pre />", {
"html": '<!DOCTYPE html>\n<html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n</html>'
}).appendTo("#source-code");
});Das Schließen des Quellcodes ist köstlich einfach. Da der „Quelltext anzeigen“-Button beim Klicken eine Hash-ID zur Seite hinzufügt, bedeutet das, dass der „Zurück“-Button im Browser funktioniert. Das Drücken entfernt die Hash-ID, sodass #source-code nicht mehr :targetet wird und automatisch durch CSS ausgeblendet wird. Das #source-code Div enthält auch eine einfache „X“-Grafik, die zur Hash-ID „#“ verlinkt, was exakt denselben Effekt hat.
Dies verlinkt einfach auf „#“, was unser Quelltext-Anzeigeelement aus :target nimmt, was es sofort ausblendet.
Formatierung des Codes
Eine der einfachsten Möglichkeiten, die Syntax hervorzuheben, ist das google-code-prettify-Projekt. Dies ist ein JavaScript-basierter Highlighter. Im Wesentlichen verlinken Sie die JavaScript-Datei und die CSS-Datei, die mit dem Download geliefert werden.
<link rel='stylesheet' href='css/prettify.css' />
<script src="prettify/prettify.js"></script>Stellen Sie sicher, dass Ihre <pre>-Tags die Klasse „prettyprint“ haben. Ich habe dies zur Elementerstellungssyntax hinzugefügt, die wir verwenden, um das <pre> zu erstellen.
"class": "prettyprint"und rufen Sie die Funktion prettyPrint() auf, wenn die Seite bereit ist. Sie empfehlen, ein onload zur body-Tag hinzuzufügen, aber da wir die jQuery DOM-Ready-Funktion verwenden, können wir sie einfach dort aufrufen.
Ich habe die Farben etwas angepasst, um sie auf dem dunklen Hintergrund gut aussehen zu lassen. Dies ist der obere Teil der prettify.css-Datei.
.str { color: #61ff74; }
.kwd { color: #ea5eff; }
.com { color: white; }
.typ { color: red; }
.lit { color: red; }
.pun { color: white; }
.pln { color: white; }
.tag { color: #ffab58; }
.atn { color: #fabb4e; }
.atv { color: #ffd996; }
.dec { color: red; }
Prettify funktioniert, indem es Teile des Codes in Spans verpackt, die diesen Teil einfärben. Beachten Sie auch die ordnungsgemäß maskierten Zeichen.
Kompatibilität
So ziemlich alles Moderne, solange es CSS3 :target unterstützt. Funktioniert nicht in IE 8 und darunter, aber in IE 9.
Primitive Methode
Firefox und Chrome unterstützen das URL-Protokoll „view-source:“, das ihren nativen Quellcode-Viewer öffnet. Wenn Sie diese Links nur für sich selbst erstellen, könnten Sie Folgendes tun:
<a class="button" onClick='window.location="view-source:" + window.location.href'>View Source</a>Remys Methode
Es stellt sich heraus, dass meine Methode ziemlich anders ist als die auf den HTML5-Demo-Seiten verwendete. Hier ist mein Versuch, seine Technik zu erklären.
- Auf alle Klicks achten
- Wenn der Klick auf einen Link mit der Hash-ID #view-source erfolgte...
- Fügen Sie der body-Klasse einen Klassennamen .view-source hinzu (diese Klasse enthüllt das ansonsten versteckte
<pre>) - Wenn noch keiner vorhanden ist, fügen Sie ein
<pre>mit der ID #view-source zur body hinzu. -
<pre>wird mit HTML ausdocument.documentElement.innerHTMLgefüllt. - Stellen Sie einen Timer ein, der alle 200 Millisekunden prüft, ob die URL immer noch die Hash-ID #view-source enthält.
- Wenn die Hash-ID verschwunden oder geändert wurde, entfernen Sie den Klassennamen von der body (wodurch das
<pre>versteckt wird) und brechen Sie den Timer ab.
(function () {
var pre = document.createElement('pre');
pre.id = "view-source"
// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
if (event.target.hash == '#view-source') {
// event.preventDefault();
if (!document.getElementById('view-source')) {
pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
document.body.appendChild(pre);
}
document.body.className = 'view-source';
var sourceTimer = setInterval(function () {
if (window.location.hash != '#view-source') {
clearInterval(sourceTimer);
document.body.className = '';
}
}, 200);
}
});
})();Und dann das clevere CSS, das den Quellcode normalerweise versteckt und den Bildschirm übernimmt, wenn die body die .view-source-Klasse erhält.
#view-source {
display: none;
}
body.view-source > * {
display: none;
}
body.view-source #view-source {
display: block !important;
}Große Vorteile
Das Coole an Remys Methode ist, dass sie viel besser mit verschiedenen Browsern kompatibel ist als meine Idee. Sie verwendet reines JavaScript, ist also nicht von Bibliotheken abhängig und verwendet keine „schicken“ Techniken, die in älteren Browsern nicht funktionieren würden. Er hätte zum Beispiel das hashchange-Ereignis verwenden können, um zu verfolgen, wann #view-source verschwindet, aber das wird in einigen älteren Browsern nicht unterstützt, daher war selbst das gut gelöst.
Verwendung
Selbstverständlich können Sie dies nach Belieben verwenden.
Demo anzeigen Dateien herunterladen
In seiner jetzigen Form setzt dieser Code bestimmte Markup-Elemente auf der Seite voraus, nämlich den Button selbst und das #view-source Div. Dies könnte definitiv in ein Plugin umgewandelt werden, das diese Elemente automatisch hinzufügt, was die Implementierung deutlich erleichtern würde. Das werde ich vielleicht irgendwann tun.
Das bringt mich auch dazu, dass 1) ich wirklich die Syntaxhervorhebung wieder in das Blog-Design hier auf CSS-Tricks einbauen muss und 2) ich dieses View Source-Ding auf allen Demo-Seiten machen sollte. Beides wird mit der Zeit erledigt werden.
Eine weitere coole Sache wäre, dies als Bookmarklet zu ermöglichen. Das wäre besonders cool für Safari, das ein mieses Quelltext-Anzeige-Tool hat (obwohl es eine Erweiterung gibt, die das behebt). Dennoch bietet keiner der Browser die Quelltextanzeige in einem modalen Fenster, was ich manchmal schöner finde als das Öffnen eines neuen Fensters oder Tabs.
Das ist tatsächlich eine großartige Lösung. Oft finde ich, dass Quellcode, der in Tutorials oder Beiträgen geschrieben wurde, etwas unordentlich oder fehlerhaft aussehen kann. Dies ist eine so gute Alternative, danke Kumpel.
In FF wird der Text beim Scrollen im Modal unscharf. Nur meine erste Vermutung, aber ich glaube, es liegt an der Transparenz.
Tolle Sache! Ich werde das definitiv bei Perishable Press verwenden. Danke fürs Teilen!
Überprüfen Sie auch den Download-Link – ich erhielt eine 404.
Wow, sehr gute Arbeit, Chris, vielen Dank.
Das ist großartig, weitere wirklich nützliche Dinge. Besonders die Tatsache, dass Sie mehrere Methoden vorgestellt haben, um ein ähnliches Ziel zu erreichen. Ihre „schicke“ Methode scheint jedoch Probleme zu haben, wenn Modenizr ebenfalls verwendet wird; Modenizr scheint zu einem Zeitpunkt eine ganze Menge hässlichen Codes (hauptsächlich ein @fontface-Daten-String) am Anfang der Seite hinzuzufügen. Durch die Verwendung von jQuery zum Anhängen des HTML beim DOM ready wird dies erfasst. Kein großes Problem, aber ich dachte, ich erwähne es für den Fall, dass sich jemand anderes fragt, woher der große hässliche Codeblock stammt.
Hallo Chris, schön, meine eigene Arbeit dekompiliert zu sehen (zur Abwechslung).
Sie haben absolut Recht, was dies betrifft: „Er hätte das hashchange-Ereignis verwenden können“ – ich wollte das *wirklich* verwenden (und werde es vielleicht immer noch verwenden und auf einen Timer zurückgreifen), aber Sie hatten wieder Recht, indem ich mehr Browser unterstützen wollte – und da die Anzeige des Quelltextes wahrscheinlich nur für wenige Benutzer relevant war und sie nach der Anzeige des Quelltextes nicht viel tun würden, dachte ich, ein Timer sei für die Aufgabe geeignet.
Aber ein schöner Artikel :)
Ein interessanter Nebeneffekt dieser Methode wäre, dass sie Ihnen tatsächlich den aktuellen Zustand des DOM und nicht nur den Seitenquelltext anzeigt. Es könnte in einigen Situationen nützlich sein, Links sowohl zum Original (mittels „view-source“-Link oder Speichern in einer JS-Variable beim Laden der Seite) als auch zum DOM nach der JavaScript-Änderung zu haben.
Bearbeitung: Tatsächlich sehe ich nach dem Lesen, dass es beim Laden der Seite gespeichert wird. Aber Sie könnten es nach Bedarf tun und einen Quelltext-Button haben, der den aktuellen Zustand der Seite anzeigt.
Gute Arbeit, Chris. Gefällt mir sehr.
Das ist unglaublich nützlich, Chris. Danke!
Tolle Idee! Sehr nützlich für ein PSD-zu-HTML-Portfolio :)
Sehr coole Dekonstruktion – beides sehr valide Methoden. Zeigt einfach, dass es oft mehr als einen richtigen Weg gibt, etwas zu tun.
Das ist wirklich eine coole Idee, bedenkt man, dass Safari keine Farbcodes anzeigt. Aber nur damit Sie es wissen, diese Demo funktioniert nicht in IE8 und Beta IE9.
Schnickschnack. Warum das Rad neu erfinden? Jeder Browser hat bereits die Möglichkeit, die Quelle anzuzeigen. Abgesehen von unerwünschtem Code-Ballast und dem „Oh, schau, glänzend!“-Effekt, was ist der Sinn? Wenn Sie dies als Demo für die :target-Pseudoklasse verwenden, ist das in Ordnung, aber ich würde nicht empfehlen, dass jemand dies tatsächlich verwendet.
Wow! Sehr gute Arbeit, Chris, vielen Dank :-)
Habe vergessen, dies von vorher zu teilen. Hier ist das Bookmarklet, das ich zum Anzeigen der Quelle geschrieben habe. „Warum?“, könnten Sie fragen (wie Tully oben tat), weil mein iPhone keinen Quelltext-Button hat – und die meisten Nicht-Desktop-Browser auch nicht.
View Source
Ich hoffe, das ist jemandem von Nutzen.
Ich würde argumentieren, dass es *sehr* wenig Bedarf gibt, die Quelle von einem iPhone oder einem anderen „Nicht-Desktop“-Browser aus anzeigen zu können. Entwickeln Sie auf Ihrem iPhone? Wenn ja, sollten wir vielleicht einen Fonds einrichten, um Ihnen eine bessere Arbeitsumgebung zu verschaffen ;)
In Wirklichkeit sollte diese Funktionalität Teil des Browsers sein und die Lösung für das Problem eines Browsers, dem grundlegende Funktionalität fehlt, sollte nicht bei den Webentwicklern, sondern bei den Browserentwicklern liegen.
> die Lösung für das Problem eines Browsers, dem grundlegende Funktionalität fehlt, sollte nicht bei den Webentwicklern liegen
Richtig. Wie der PNG-Fix für IE. Oder der Web Sockets Flash Shim. Oder all die anderen Techniken, bei denen Webentwickler Lösungen für Browser mit fehlender Funktionalität geschaffen haben.
(Entschuldigung, Regel Nr. 1 gebrochen)
Dies ist ein wirklich nützliches und schönes Werkzeug, danke, dass Sie uns gezeigt haben, wie es geht :)
Wirklich großartiges Tutorial, danke fürs Teilen!
Dies ist eine großartige Möglichkeit, Ihren Quellcode anzuzeigen. Toller Artikel, Chris!
Das ist wirklich, wirklich cool! Danke fürs Teilen.
Sehr schön! Danke fürs Teilen!
Das wird perfekt sein für diejenigen, die meinen Code überprüfen möchten, ohne die Browser-Funktion „Quelltext anzeigen“ zu verwenden. Ich plane, dies in meinem Portfolio meiner Website bei meiner nächsten Aktualisierungsrunde einzubauen.
Na gut. Ich klaue das so schnell wie möglich für meine Demo-Seiten. Guter Artikel, Chris.
Ausgezeichnete Idee von Remy, und es ist viel schöner, den Quelltext mit etwas Formatierung anzuzeigen, exzellentes Tutorial und es wäre schön, zusätzliche Funktionen für den CSS-Tricks-Blog zu haben, wie Syntaxhervorhebung und Quelltextanzeige für alle Demo-Seiten. LT
Die Skripte sind verständlich
außer dem
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,’$1‘) +
Ich habe immer noch keine Ahnung
Es ist an der Zeit, sich mit regulären Ausdrücken zu beschäftigen, denke ich. Dieser konvertiert URLs im Quelltext in klickbare Links. Verdammt mächtige Dinge, wenn sie richtig verwendet werden!
Gibt es eine Möglichkeit, einen externen Link hinzuzufügen, um die Quelle anzuzeigen?
Sehr gut
Gibt es eine Möglichkeit, lange Zeilen umzubrechen, um horizontales Scrollen zu verhindern? Vielleicht mit einem Zeilenfortsetzungszeichen am Anfang der umgebrochenen Zeilen…
Wirklich gut. Weiter so. Großartige Inspirationsquelle.
Alter Trick, aber mit neuen Funktionen, COOL.
Das ist wirklich ein großartiger Trick. Ich werde ihn versuchen und verwenden. Danke..
Hallo,
Ihr Code ist gut und lässt auch einige Anpassungen zu…
Aber der einfache Weg ist, ihn direkt in einen href-Link zu setzen
„view-source:http://example.com/mypage.html“ und fertig ;)
http://en.wikipedia.org/wiki/View-source_URI_scheme
Lieber Chris,
WELCHE SCHRIFTART HABEN SIE IN DEN BILDERN VERWENDET!?! Ich suche überall danach, aber ich finde die Schriftart nicht!
Gutes Tutorial, danke fürs Teilen, ich werde diesen Code auch auf meiner Website ausprobieren. Hoffentlich funktioniert es.
Gute Lösung. Danke fürs Teilen mit uns.
Danke für das coole Skript. Ich kann es an vielen Stellen verwenden.
Obwohl Wissen nie schadet und es Spaß gemacht hat, etwas Neues zu lernen, bin ich immer noch altmodisch. Außerdem habe ich beim Download keine 404 erhalten. :)
Wirklich schöner Trick, ich könnte ihn definitiv auf einem meiner Blogs verwenden! Danke, Chris.
Ich benutze Mozilla Firefox 3.6.3 und schreibe es einfach so, wir können einen einfachen Quellcode-Link erstellen.
Quellcode anzeigen
Hihihi :D
Hier gibt es viele tolle Tutorials \m/
Wirklich sehr tolle Informationen… und sehr tolle Lösung, danke fürs Teilen!!!
Ich mag den schicken Quelltext-Button, aber ich habe eine nicht-antagonistische Kritik.
Ich mag es nicht, dass, wenn ich den Quelltext anzeige, dann das Popup schließe, dann auf den Zurück-Button klicke (um tatsächlich zur vorherigen Seite zu gelangen), das Popup wieder erscheint. Ich verstehe, dass es am Hashtag und dem :target-Pseudoelement liegt; ich sage nur, diese eine Ärgernis hindert mich daran, es zu genießen. Wenn es eine Lösung dafür gibt, wäre ich interessiert.
Kann mir bitte jemand erklären, wie man einen Quelltext-Button wie einen Syntax-Highlighter für <pre>-Tags erstellt?
Ähnlich könnte eine neue Version eines Betriebssystems neue Technologien nutzen, während die Unterstützung
für alte Technologien oder Systemspezifikationen aus früheren Jahren entfällt.
Wie man dann eine DVD mit Mac rippt – X DVD Ripper Free Edition.
Siehe den Abschnitt unten für weitere Informationen, warum einige Discs fehlschlagen.