2.1 Tag <pre>
Die Tags <code> und <pre> werden in HTML verwendet, um Codeabschnitte und vorformatierten Text darzustellen. Sie verbessern die Lesbarkeit und bewahren die Formatierung des Originaltexts, was besonders nützlich für die Darstellung von Codebeispielen und anderen technischen Materialien ist.
Der Tag <pre> (Kurzform für "preformatted text") wird verwendet, um Text in HTML so darzustellen, wie er geschrieben ist, wobei alle Leerzeichen, Zeilenumbrüche und Tabulatoren erhalten bleiben. Das ist besonders nützlich für die Darstellung großer Codeabschnitte oder anderer vorformatierter Texte.
Syntax:
<pre>
Text
</pre>
Beispiel:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
In diesem Beispiel wird der Text innerhalb des <pre>-Tags mit allen Leerzeichen und Zeilenumbrüchen so angezeigt, wie er im Quellcode geschrieben ist.
Besonderheiten des <pre>-Tags:
- Der Tag
<pre>bewahrt alle Leerzeichen und Zeilenumbrüche im Text - Er zeigt den Text in einer Monospace-Schriftart an
- Wird oft zusammen mit dem
<code>-Tag verwendet, um Code hervorzuheben
2.2 Tag <code>
Der Tag <code> wird verwendet, um Codeabschnitte oder andere maschinenlesbare Daten im Text zu kennzeichnen. Er wird normalerweise verwendet, um Codezeilen, Variablen, Funktionen und andere Programmelemente hervorzuheben.
<code>Code</code>
Beispiel:
<p>Um eine Nachricht in der Konsole auszugeben, verwende die Funktion <code>console.log()</code>.</p>
In diesem Beispiel wird der Text "console.log()" als Code hervorgehoben.
Besonderheiten des <code>-Tags:
- Der Tag
<code>zeigt den Text in einer Monospace-Schriftart an (normalerweise Courier oder Consolas) - Er bewahrt keine Formatierungen wie Zeilenumbrüche oder Einrückungen
- Der
<code>-Tag wird oft innerhalb anderer Tags verwendet, wie<p>,<li>oder<pre>
2.3 Verwendung von <pre> und <code>
Um große Codeblöcke hervorzuheben und zu formatieren, werden oft die Tags <pre> und <code> zusammen verwendet. Dies ermöglicht es, die Formatierung beizubehalten und den Text als Code hervorzuheben.
Beispiel:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Dadurch wird der Text im Browser mit beibehaltener Formatierung und Codehervorhebung angezeigt.
2.4 Syntax-Highlighting
Für Syntax-Highlighting können Bibliotheken wie Prism.js oder Highlight.js verwendet werden, die automatisch den Syntax von Code auf der Webseite erkennen und hervorheben.
Beispiel für die Verwendung von Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
Dadurch wird der Codeblock automatisch entsprechend der JavaScript-Syntax hervorgehoben.
Die Tags <code> und <pre> in HTML sind mächtige Werkzeuge zur Darstellung und Formatierung von Code und anderen Texten unter Beibehaltung der Originalformatierung. Viel Spaß beim Ausprobieren.
GO TO FULL VERSION