Wir werden immer wieder Terminal-Befehle oder sonstige Code-Zeilen veröffentlichen. Dazu bietet HTML das Element "<code>". Das muss natürlich entsprechend designed werden. Es geht im folgenden nicht um den Programmcode, sondern nur um das Design

<pre>
  <code class="language-php">
    <?php echo "Hallo, Welt\n"; ?>
  </code>
</pre>

Das HTML-Element <code> ist im Normalfall ein Inline Element.  Also Teil des Fließtextes. So auch in Contao.

Markiere ich einen Teil des Fließtextes als "code", wird der Bereich mit <code>....</code> umschlossen und als Teil des Fließtextes betrachtet.

Also ist "<code>" alleine für einen Block wie oben, nicht ganz korrekt.

Contao verwendet für das Content-Element "text" und dem Teil des Fließtextes natürlich das Blockelement "<p>". Als Absatzmarkierung. Ich möchte aber ein Codeelement nicht im Design als Fließtext darstellen. Selfhtml schlägt vor, das Blockelement "<pre> zu verwenden. Wie oben im Beispiel.

Dann kann man mit SCSS die Formatierung übernehmen.

 .rte {
     pre {
      border: 1px solid #cacaca;
      line-height: 1.2em;
      font: 1.2em Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
      color: black;
      background-color: #dcdcdc;
      padding: 10px;
      overflow:auto;
      -webkit-border-radius: 0.5em;
      -moz-border-radius: 0.5em;
      border-radius: 0.5em;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      //color: #393939;
      margin: 0px;
      margin-bottom: 0.5em;
     }
 }

Oder, man verwendet ein neues Contentelement, dass es in Contao gibt. Das Content-Element nennt sich: "code"

Eine Extension ist nicht notwendig, auch wenn es diese gibt.