Darstellung von Quellcode auf Inf-Schule.de

HTML-eigene Zeichen

Inf-Schule.de maskiert in Abschnitten von Quellcode HTML-eigene Zeichen (siehe SelfHTML.org » HTML-eigene Zeichen) bei der Auslieferung einer Seite automatisch. Dazu musst du folgenden HTML-Code verwenden:

<pre class="quelltext">
<code>

</code>
</pre>

Manchmal möchtest du Programmausschnitte auch innerhalb einer Zeile im Text verwenden. Die oben angesprochenen Zeichen werden von Inf-Schule.de auch innerhalb von folgendem Element maskiert:

<code> </code>

Dieses Element (ohne das umgebende <pre></pre>) bietet den Vorteil, dass es kein Block-Element darstellt und somit im Fließtext Verwendung finden kann.

Hinweis: Maskierst du HTML-eigene Zeichen außerhalb dieser beiden Elemente nicht, so kann das zu fehlerhafter Darstellung oder gar zu fehlendem Inhalt führen.

Syntax-Highlighting

Wie du auf den Seiten dieses Kapitels schon gesehen hast, bietet Inf-Schule.de die Möglichkeit, Programmcode farblich hervorzuheben. Hier ein Beispiel für Quelltext in der Programmiersprache Python:

def schaltjahr(jahr):
    if (jahr % 400 == 0) or ((jahr % 4 == 0) and not (jahr % 100 == 0)):
        return True
    else:
        return False

Um das Syntax-Highlighting zu aktivieren, musst du folgenden HTML-Code verwenden:

<pre class="quelltext"><code class="language-python">
    Programmcode
</code></pre>

Entscheidend ist hierbei, dass das Element <code> </code> die Klasse language-python erhält. Für Blöcke aus Quelltext sollte immer das umgebende <pre class="quelltext"></pre> verwendet werden, damit das Aussehen stimmt.

Zeilennummern

Im Rahmen des Syntax-Highlighting ist es ebenfalls möglich Zeilennummern anzuzeigen, um zum Beispiel im Fließtext auf eine bestimmte Stelle zu verweisen. Dazu muss lediglich die CSS-Klasse line-numbers im Element

<pre>

hinzugefügt werden.

Beispiel:

<pre class="quelltext line-numbers"><code class="language-python">
    Programmcode
</code></pre>

Ansicht gerendert:

def schaltjahr(jahr):
    if (jahr % 400 == 0) or ((jahr % 4 == 0) and not (jahr % 100 == 0)):
        return True
    else:
        return False

Aktuell unterstützte Sprachen der Syntaxhervorhebung

C

class="language-c"

C++

class="language-cpp"

C-ähnlich

class="language-c-like"

CSS

class="language-css"

Java

class="language-java"

Javascript

class="language-javascript"

Markup (z.B. HTML, XML)

class="language-markup"

Python

class="language-python"

SQL

class="language-sql"

Prolog

class="language-prolog"

Treeview

class="language-treeview"

Yaml

class="language-yaml"

Hinweis: Falls du eine Programmiersprache verwenden möchtest, die nicht aufgelistet ist, wende dich per Mail kurz an OS.