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.

Benötigst du lediglich proportionale Schrift, so kannst du dies durch eine CSS-Klasse erreichen (siehe Abschnitt "CSS").

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"

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