Code-Blöcke in HTML 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.