Code-Blöcke in HTML schreiben
-
Fügen Sie das Tag
<code>
und seinen Inhalt in das Tag<pre>
ein, um den Codeblock in HTML zu schreiben -
Verwenden Sie das Tag
<code>
und die CSS-Eigenschaftwhite-space
, um Codeblöcke in HTML zu schreiben
In diesem Artikel werden einige Methoden zum Schreiben von Blöcken von Codeausschnitten in HTML vorgestellt.
Fügen Sie das Tag <code>
und seinen Inhalt in das Tag <pre>
ein, um den Codeblock in HTML zu schreiben
Das Tag <code>
definiert einen Computercode. Der darin enthaltene Inhalt wird in der Standardschrift monospace
des Browsers angezeigt.
Das Tag wird verwendet, um Codeblöcke in HTML darzustellen. Das Tag ist ein inline
-Tag.
Das bedeutet, dass, wenn wir Codeschnipsel in das <code>
-Tag schreiben, der Inhalt des Tags in einer Zeile angezeigt wird. Zeilenumbrüche oder Leerzeichen werden nicht beibehalten.
Das Tag <pre>
definiert vorformatierten Text. Jeder Text in einem <pre>
-Element wird in einer Schriftart mit fester Breite angezeigt, und der Text behält sowohl Leerzeichen als auch Zeilenumbrüche bei.
Der Text oder Inhalt innerhalb des <pre>
-Tags wird genau so angezeigt, wie er im HTML-Quellcode geschrieben ist. Das <pre>
-Tag ist ein Element auf Blockebene.
Wenn wir das Tag <code>
und seinen Inhalt in das Tag <pre>
einschließen, verhält sich der Inhalt im Tag <code>
wie ein Element auf Blockebene. Die Inhalte haben die Schriftart monospace
, und auch die Zeilenumbrüche und Leerzeichen der Codeschnipsel bleiben erhalten.
Schreiben Sie zum Beispiel etwas JavaScript-Code und packen Sie den Code in das <code>
-Tag. Umschließen Sie als Nächstes das Element <code>
mit einem <pre>
-Tag.
Beispielcode:
<p>Code snippet for addition of two numbers in javascript</p>
<pre>
<code>
function add (a,b) {
sum = a + b;
return sum;
}
</code>
</pre>
Das obige Beispiel zeigt den JavaScript-Codeblock an.
Verwenden Sie das Tag <code>
und die CSS-Eigenschaft white-space
, um Codeblöcke in HTML zu schreiben
Bei dieser Methode suchen wir mithilfe einiger CSS-Stile nach einem Ersatz für das Tag <pre>
. Zuvor wussten wir, dass das Element <code>
ein Inline-Element ist.
Wir haben das Tag <pre>
verwendet, um es zu einem Element auf Blockebene zu machen. Wir können das Tag <code>
aber auch zu einem Element auf Blockebene machen, indem wir seine Eigenschaft display
auf block
setzen.
Und wir können die Zeilenumbrüche und Leerzeichen des code
-Tags beibehalten, indem wir seine white-space
-Eigenschaft auf pre-wrap
setzen. Als Ergebnis werden Codeschnipsel angezeigt, wie sie im HTML-Quellcode geschrieben sind.
Somit können wir Codeblöcke in HTML erstellen.
Erstellen Sie beispielsweise ein <code>
-Tag und schreiben Sie ein JavaScript-Code-Snippet hinein. Geben Sie dem <code>
-Tag einen Klassennamen der sum
.
Wählen Sie in CSS die Klasse sum
und setzen Sie die Eigenschaft display
auf block
und die Eigenschaft white-space
auf pre-wrap
.
Beispielcode:
<code class="sum">
function (a, b) {
sum = a + b;
return sum;
}
</code>
.sum {
display: block;
white-space: pre-wrap;
}
Die obigen Codebeispiele erzeugen einen JavaScript-Codeblock.