Wie kann ich Code-Listings mit CSS formatieren?

Lesezeit: 4 Minuten

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

Benutzer-Avatar
Maytham Fahmi

Wenn ich ein Beispiel teile, das ich auf einer Website verwende, verwende ich Folgendes pre in meinem stylesheet:

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

Dies ergibt folgende Ergebnisse:

Geben Sie hier die Bildbeschreibung ein

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

Benutzer-Avatar
Daniel C

Diese Javascript-Bibliothek scheint ausgezeichnet zu sein:

https://highlightjs.org/

UPDATE: Ich habe dies auch in meinem Tumblr-basierten Blog verwendet, weil es am einfachsten bereitzustellen war:

https://github.com/google/code-prettify

und ich habe dieses auch verwendet (einige zusätzliche Funktionen):

http://alexgorbatchev.com/SyntaxHighlighter/

  • 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

Benutzer-Avatar
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

Benutzer-Avatar
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:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://stackoverflow.com/questions/4000792/themes/prism.css" rel="stylesheet" />
  </head>
  <body>
    ...
    <script src="prism.js"></script>
  </body>
</html>

Sobald die obige Einrichtung abgeschlossen ist, können Sie sie wie folgt verwenden:

<pre><code class="language-css">p { color: red }</code></pre>

Benutzer-Avatar
Vater Sturm

Zuerst würde ich den Code in a zeigen <pre> </pre> element Geben Sie dem pre-Element einen schönen Stil in Ihrem CSS und machen Sie Schluss damit.

1311330cookie-checkWie kann ich Code-Listings mit CSS formatieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy