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.