i

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.

Suche

v
13.5.3.2.4
schuljahr.inf-schule.de/2020-21/infschule/dokumentation/kapitel-erstellen/textbereich/quelltext
schuljahr.inf-schule.de/2020-21/13.5.3.2.4

Rückmeldung geben