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"

Elm

class="language-elm"

Java

class="language-java"

Javascript

class="language-javascript"

Markup (z.B. HTML, XML)

class="language-markup"

Python

class="language-python"

Racket

class="language-racket"

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.

Kopieren-Button ohne Syntax-Highlighting

Verwendet man bei einem Quelltext Syntax-Highlighting, so erscheint bei dem Quelltext oben rechts einen kleine Toolbar. Diese Toolbar ist nur dann sichtbar, wenn sich der Mauszeiger über dem Quelltext befindet. In dieser Toolbar steht, welche Programmiersprache verwendet wird. Außerdem gibt es dort einen Button, mit dem man den Quelltext in die Zwischenablage kopieren kann. Für manche Texte (z.B. Klartexte und Geheimtexte im Bereich Kryptographie) ist es sinnvoll, einen Button zum Kopieren anzubieten. Das folgenden Beispiel zeigt, wie man die Toolbar ohne Syntax-Highlighting erzeugt:

    <pre class="quelltext" data-toolbar-order="In-die-Zwischenablage-kopieren">
    <code class="language-none">
    Hier steht ein Text 
    </code>
    </pre>

gerendert:

Hier steht ein Text

class="language-none" sorgt dafür, dass der Syntax-Highlighter für den Text aktiv wird.
data-toolbar-order="In-die-Zwischenablage-kopieren" sorgt dafür, dass nur der Kopieren-Button erscheint.
class="quelltext" erzeugt den blauen Balken an der linken Seite und verändert die Schriftart und Schriftgröße. Diese Klasse kann man auch weglassen oder eine andere Klasse (z.B. aufgabenstellung) verwenden.