Ich möchte Ausschnitte aus Programmiersprachencode und auch HTML-Code in einem HTML-Dokument mit CSS anzeigen. Ich möchte, dass es eingerückt und in Schriftart mit fester Breite ist … Ich denke an so etwas wie:
<blockquote style="some_style">
my code here
my code here also
</blockquote>
und lassen Sie es schön formatiert erscheinen (Bonus, wenn es farbcodiert ist, aber nicht sein muss.
Wie kann ich das mit CSS erreichen?
Für die Farbcodierung ist einer der verschiedenen verfügbaren Syntax-Highlighter erforderlich. Dies sind reine JavaScript-Lösungen, wenn Sie keinen Zugriff auf PHP haben.
– Plackerei
22. Oktober 2010 um 20:48 Uhr
Maytham Fahmi
Wenn ich ein Beispiel teile, das ich auf einer Website verwende, verwende ich Folgendes pre in meinem stylesheet:
Haftungsausschluss: In meiner Freizeit habe ich einige Stunden damit verbracht, dieses CSS mit ein paar zusätzlichen Funktionen wie Codezeilen und Code-Kopieren-Schaltfläche unter Verwendung von CSS mit JavaScript für meinen persönlichen Gebrauch zu aktualisieren, den ich gerne teile. Bitte verwenden Sie, wie Sie möchten github Quellcode. Um ein Codebeispiel in der realen Welt zu sehen, überprüfen Sie dies Artikel aus meinem Blog, die zeigen, wie ich das Codebeispiel verwende.
Haben Sie etwas dagegen, ein HTML-Code-Snippet zu teilen, in dem tatsächlicher Code vorhanden ist?
– Suman sein
10. Januar 2020 um 8:48 Uhr
@BeingSuman nein, es macht mir nichts aus, nur verstehe ich dich richtig, du suchst nach einem vollständigen Codebeispiel für das obige Beispiel, wenn ja, lass es mich wissen, damit ich es später tun kann, ich bin zu Hause. Andernfalls, wenn Sie sich das Git-Repo ansehen, gibt es einige Beispiele, die Sie sich ansehen können, lassen Sie es mich auch wissen, wenn das hilft.
– Maytham Fahmi
10. Januar 2020 um 9:10 Uhr
Vielen Dank, Sie haben ein Muster erhalten, indem Sie das Element auf Ihrer Website untersucht haben.
– Suman sein
10. Januar 2020 um 9:31 Uhr
Schönes Design, aber es reagiert nicht.
– Schiwko Zhelev
2. April 2020 um 7:44 Uhr
@JivkoJelev, wenn es die Zeit erlaubt, werde ich es responsiv machen 🙂
– Maytham Fahmi
2. April 2020 um 8:28 Uhr
Daniel C
Diese Javascript-Bibliothek scheint ausgezeichnet zu sein:
Definitiv das Kraftpaket der Wahl in dieser Liste, um die Arbeit zu reduzieren und die besten Ausgaben von Codeblöcken zu erzielen.
– Esos
7. Februar 2015 um 8:58 Uhr
Schulsänger
<pre> würde Ihre Tabulatoren und Zeilenumbrüche automatisch innerhalb der Begrenzung beibehalten pre Stichworte. Die meisten Browser verwenden automatisch eine monospaced Schriftart im Inneren pre aber wenn Sie es erzwingen möchten (was eine gute Idee ist), können Sie das folgende CSS verwenden:
pre { font-family: monospace; }
Das würde ich dir empfehlen nicht Platzieren Sie den Code direkt in a <blockquote> Element. Es ist semantisch falsch.
Wenn Sie möchten, dass Ihr Code semantisch korrekt ist, sollten Sie ihn wie folgt auszeichnen:
<pre><code>
My pre-formatted code
here.
</code></pre>
Wenn Sie tatsächlich einen Codeblock “zitieren”, wäre das Markup:
<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>
Wenn Sie einen noch besser aussehenden Code wünschen, können Sie Google Code verwenden Verschönern welches ist Wird von StackOverflow verwendet zu Farbcode-Schnipseln. Es hat seine eigenen Stylesheets, die es automatisch importiert, basierend auf der Sprache, für die es den Code hält, und färbt den Code entsprechend ein. Sie können ihm einen Hinweis geben, von welcher Sprache der Code stammt eine Klasse anhängen.
(zur Info)
-Tags werden in Tumblr nicht mehr unterstützt.
– Michael Schalop
16. Juni um 18:27 Uhr
Gopherkhan
Nun, Sie könnten versuchen, ein
-Tag in Ihrem Blockquote zu verwenden, um zuerst die Formatierung beizubehalten, und dann eine monospaced Schriftart wie Courier für den CSS-Stil verwenden.
So etwas würde in CSS funktionieren:
pre {
font-family: "Courier New"
Courier
monospace;
}
Sie können einen Blick auf die werfen prismjs um den Code hervorzuheben.
Sie können das Paket nach Ihren Wünschen anpassen hier und der Fußabdruck dieses Pakets wird immer noch minimal sein.
Sobald Sie ein Paket haben, können Sie es wie folgt verwenden:
Für die Farbcodierung ist einer der verschiedenen verfügbaren Syntax-Highlighter erforderlich. Dies sind reine JavaScript-Lösungen, wenn Sie keinen Zugriff auf PHP haben.
– Plackerei
22. Oktober 2010 um 20:48 Uhr