|
|
| Zeile 1: |
Zeile 1: |
| ==Verwendungszweck== | | ==Verwendungszweck== |
|
| |
|
| Diese Vorlage dient dazu, (Code-)Beispiele in eine einheitliche Form zu bringen. Bei Bedarf kann die Vorlage geändert werden, so dass sich alle Beispiele mit einem Handgriff in ihrer Form ändern lassen. | | Diese Vorlage dient dazu, Beispiele in eine einheitliche Form zu bringen. |
| | |
| Bei Beispielen, für die eine „So sieht's aus“-Ansicht verfügbar sein soll, kann der optionale Parameter zeige=… eingefügt werden. Derzeit sollte als Parameterwert ein Dummy-Wert eingetragen werden (zeige=dummy). Das Erstellen des eigentlichen Anzeige-Beispiels ist, um Missbrauch zu verhindern, den Beispiele-Administratoren vorbehalten.
| |
|
| |
|
| ==Anwendung== | | ==Anwendung== |
|
| |
| Diese Vorlage ist modular aufgebaut. Zu ihr gehören weitere Vorlagen, mit der sich in beliebiger Reihenfolge Beispiel-Text- und Erläuterungsmodule zusammenfügen lassen.
| |
|
| |
|
| <pre><nowiki>{{Beispiel| | | <pre><nowiki>{{Beispiel| |
| Module | | Module |
| }}</nowiki></pre> | | }}</nowiki></pre> |
|
| |
| Verfügbare Module sind:
| |
| * <code><nowiki>{{BeispielCode|…}}</nowiki></code> für Code aller Art
| |
| * <code><nowiki>{{BeispielWiki|…}}</nowiki></code> für alles was sich mit Wiki-Syntax erstellen lässt
| |
| * <code><nowiki>{{BeispielText|…}}</nowiki></code> für Erläuterungstext
| |
|
| |
| Es gibt drei optionale Parameter:
| |
| * <code>titel=…</code> für eine Ergänzung der Überschrift
| |
| * <code>zeige=…</code> für den Verweis auf ein anklickbares "So sieht's aus"
| |
| ** <code>viewport-emulator</code> für die Möglichkeit, das Beispiel im Viewport-Emulator anzuschauen
| |
|
| |
| === Beispiele für die Parameter ===
| |
| ==== mit erweiterter Überschrift ====
| |
| <pre>{{Beispiel|titel=mit erweiterter Überschrift|
| |
| {{BeispielCode|…}}
| |
| }}
| |
| </pre>
| |
|
| |
| {{Beispiel|titel=mit erweiterter Überschrift|
| |
| {{BeispielCode|…}}
| |
| }}
| |
|
| |
| ==== anklickbar ====
| |
|
| |
| Um ein Beispiel anklickbar zu gestalten ist die Berechtigung ''Beispiele-Administratoren'' notwendig. Wer diese Berechtigung nicht hat, und (s)ein Beispiel anklickbar gestaltet haben möchte, sollte <code>zeige=dummy</code> setzen – '''bitte nicht''' vorgreifend einen <code>Beispiel:</code>-Dateinamen selbständig vergeben. Derzeit ist vorgesehen, dass sich dann die ''Beispiele-Administratoren'' manuell um die Anklickbarkeit kümmern. Siehe auch [[Hilfe:Artikel/Beispiele]].
| |
|
| |
| <pre>{{Beispiel|zeige=Beispiel:Beispiel.txt|
| |
| {{BeispielCode|…}}
| |
| }}
| |
| </pre>
| |
|
| |
| {{Beispiel|zeige=Beispiel:Beispiel.txt|
| |
| {{BeispielCode|…}}
| |
| }}
| |
|
| |
| ==== mit erweiterter Überschrift, anklickbar ====
| |
| <pre>{{Beispiel|
| |
| titel = mit erweiterter Überschrift|
| |
| zeige = Beispiel:Beispiel.txt|
| |
|
| |
|
| |
| {{BeispielCode|…}}
| |
| }}
| |
| </pre>
| |
|
| |
| {{Beispiel|
| |
| titel = mit erweiterter Überschrift|
| |
| zeige = Beispiel:Beispiel.txt|
| |
|
| |
|
| |
| {{BeispielCode|…}}
| |
| }}
| |
|
| |
| ==== anklickbar und mit Link zum Viewport-Emulator ====
| |
| Ein HTML-Dokument kann auch in unserem Viewport-Emulator angezeigt werden, insbesondere um die Darstellung von Layout-Rgeln bei verschiedenen Viewport-Breiten zu testen. Nicht immer ist ein Link zum Viewport-Emulator sinnvoll, daher erscheint er im Gegensatz zum Frickl-Link nicht automatisch, sondern benötigt den Parameter '''viewport-emulator''', welcher natürlich nur in Verbindung mit dem Parameter '''zeige''' einen Sinn hat:
| |
| <pre>{{Beispiel|
| |
| zeige = Beispiel:HTML5-Grundstruktur.html|
| |
| viewport-emulator|
| |
|
| |
|
| |
| {{BeispielCode|…}}
| |
| }}
| |
| </pre>
| |
|
| |
| {{Beispiel|
| |
| zeige = Beispiel:HTML5-Grundstruktur.html|
| |
| viewport-emulator|
| |
|
| |
|
| |
| {{BeispielCode|…}}
| |
| }}
| |
| {{Beachten|Die Angabe '''viewport-emulator''' hat nur dann einen Sinn, wenn Sie auch eine '''zeige'''-Angabe mit einem HTML-Dokument als Referenz verwenden.}}
| |
| {{Beachten|Mit der Angabe '''viewport-emulator''' erscheint der Link zum Viewport-Emulator nur bei verlinkten HTML-Beispieldokumenten, da der Emulator nur bei diesen einen Sinn hat.}}
| |
|
| |
| === Beispiele für die Module ===
| |
| ==== Code-Modul ====
| |
| Der anzuzeigende Code sollte entweder in <pre>, <nowiki> oder <source> eingefasst werden.
| |
|
| |
| Wenn das Beispiel im SELFHTML-Design dargestellt werden soll, kann das Grundlayout einfach eingebunden werden.
| |
|
| |
| {{Beispiel|zeige=Beispiel:grundlayout.html|
| |
| {{BeispielCode|<source lang="nowiki"><!doctype html>
| |
| <html>
| |
| <head>
| |
| <meta charset="utf-8">
| |
| <title>…</title>
| |
|
| |
| <style>
| |
| /* Styleangaben für das Beispiel */
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <h1>Überschrift</h1>
| |
| <main role="main">
| |
| <p>Inhalt</p>
| |
| </main>
| |
| </body>
| |
| </html></source>}}
| |
| }}
| |
|
| |
|
| |
| ===== <pre> =====
| |
| Es kann nur einfacher Text eingegeben werden. Alle HTML-eigenen Zeichen können normal geschrieben werden. Wenn ein </pre> Bestandteil des anzuzeigenden Codes ist, so ist es als <code>&lt;/pre></code> zu notieren.
| |
|
| |
| <pre>{{Beispiel|titel = mit <pre>|
| |
| {{BeispielCode|
| |
|
| |
| <pre>
| |
| <!-- Quelltext -->
| |
| <p class="foo">bar baz</p>
| |
| <pre> … &lt;/pre>
| |
| </pre>
| |
|
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel = mit <pre>|
| |
| {{BeispielCode|
| |
|
| |
| <pre>
| |
| <!-- Quelltext -->
| |
| <p class="foo">bar baz</p>
| |
| <pre> … </pre>
| |
| </pre>
| |
|
| |
| }}
| |
| }}
| |
|
| |
| ===== <nowiki> =====
| |
| Im Gegensatz zu <pre> kann man <nowiki> problemlos verlassen, um Wiki-Formatierungen einzubauen.
| |
|
| |
| <pre>{{Beispiel|titel = mit <nowiki>|
| |
| {{BeispielCode|
| |
|
| |
| <nowiki><!-- Quelltext -->
| |
| <p class="foo">bar baz </nowiki>'''und ein fett hervorgehobener Teil'''<nowiki></p>
| |
| </nowiki>
| |
|
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel = mit <nowiki>|
| |
| {{BeispielCode|
| |
|
| |
| <nowiki><!-- Quelltext -->
| |
| <p class="foo">bar baz </nowiki>'''und ein fett hervorgehobener Teil'''<nowiki></p>
| |
| </nowiki>
| |
|
| |
| }}
| |
| }}
| |
|
| |
| ===== <source> =====
| |
| Mit diesem Element kann man Code automatisch mit Syntaxhervorhebung anreichern lassen. Verwendbare Parameter:
| |
| * <code>lang="??"</code>: Sprache des Codes. '''Eine Liste der Werte bekommt man bei Eingabe eines falschen Wertes angezeigt''' (Vorschau-Funktion verwenden!)
| |
| * <code>line</code>: schaltet die Zeilennummerierung ein.
| |
| * <code>line start="??"</code>: Zeilennummerierung beginnt ab …
| |
| * <code>highlight="??"</code>: welche Zeilen sollen hervorgehoben werden. Zählung beginnt immer mit 1, auch bei Verwendung von <code>line start=…</code>. Die Zeilennummern können kommagetrennt entweder einzeln oder als Bereich mit Bindestrich angegeben werden.
| |
|
| |
| <pre>{{Beispiel|titel = mit <source>|
| |
| {{BeispielCode|
| |
|
| |
| <source lang="html4strict"><!-- Quelltext -->
| |
| <p class="foo">bar baz</p>
| |
| </source>
| |
|
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel = mit <source>|
| |
| {{BeispielCode|
| |
|
| |
| <source lang="html4strict"><!-- Quelltext -->
| |
| <p class="foo">bar baz</p>
| |
| </source>
| |
|
| |
| }}
| |
| }}
| |
|
| |
| ==== Wiki-Modul ====
| |
| Es kann beliebige Wiki-Syntax verwendet werden. Allerdings sind zwei Besonderheiten zu beachten. Wenn der Inhalt ein Gleichheitszeichen (=) enthält, muss wie beim nachfolgenden Tabellen-Beispiel (wegen border=1) am Anfang ein 1= eingefügt werden. Ansonsten gibt es eine Warnmeldung. Problematisch ist auch das Pipe-Zeichen (|) für das eine Ersatzschreibweise verwendet werden muss: [[Hilfe:MediaWiki/Vorlagen#Problem:_Senkrechter_Strich_in_Parametern]].
| |
|
| |
|
| |
| <pre>{{Beispiel|
| |
| {{BeispielWiki|titel=mit Einrückung|
| |
| vorn
| |
| ein-
| |
| ge-
| |
| rückt
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel=mit Einrückung|
| |
| {{BeispielWiki|
| |
| vorn
| |
| ein-
| |
| ge-
| |
| rückt
| |
| }}
| |
| }}
| |
|
| |
| <pre>{{Beispiel|titel=mit Liste|
| |
| {{BeispielWiki|
| |
| * auf-
| |
| * ge-
| |
| * zählt
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel=mit Liste|
| |
| {{BeispielWiki|
| |
| * auf-
| |
| * ge-
| |
| * zählt
| |
| }}
| |
| }}
| |
|
| |
| <pre>{{Beispiel|titel=mit Tabelle|
| |
| {{BeispielWiki|1=
| |
| <table border="1"><tr>
| |
| <td>Orangen</td>
| |
| <td>Äpfel</td>
| |
| </tr><tr>
| |
| <td>Brot</td>
| |
| <td>Kuchen</td>
| |
| </tr><tr>
| |
| <td>Butter</td>
| |
| <td>Eiskrem</td>
| |
| </tr></table>
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel=mit Tabelle|
| |
| {{BeispielWiki|1=
| |
| <table border="1"><tr>
| |
| <td>Orangen</td>
| |
| <td>Äpfel</td>
| |
| </tr><tr>
| |
| <td>Brot</td>
| |
| <td>Kuchen</td>
| |
| </tr><tr>
| |
| <td>Butter</td>
| |
| <td>Eiskrem</td>
| |
| </tr></table>
| |
| }}
| |
| }}
| |
|
| |
| <pre>{{Beispiel|titel=mit Tabelle in Pipe-Syntax|
| |
| {{BeispielWiki|1=
| |
| {{(!}} border="1"
| |
| {{!}}Orangen
| |
| {{!}}Äpfel
| |
| {{!-}}
| |
| {{!}}Brot
| |
| {{!}}Kuchen
| |
| {{!-}}
| |
| {{!}}Butter
| |
| {{!}}Eiskrem
| |
| {{!)}}
| |
| }}
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel=mit Tabelle in Pipe-Syntax|
| |
| {{BeispielWiki|1=
| |
| {{(!}} border="1"
| |
| {{!}}Orangen
| |
| {{!}}Äpfel
| |
| {{!-}}
| |
| {{!}}Brot
| |
| {{!}}Kuchen
| |
| {{!-}}
| |
| {{!}}Butter
| |
| {{!}}Eiskrem
| |
| {{!)}}
| |
| }}
| |
| }}
| |
|
| |
| ==== Text-Modul ====
| |
| Dient zum Beispiel zur Erläuterung eines Beispiels. Das Modul kann aber auch für allgemeinen Text verwendet werden, ohne dass dieser ein Kommentar zum Beispiel darstellt. Eine Anwendung dafür wäre, es für die Benennung einzelner Abschnitte von mehrteiligen Beispielen zu benutzen. (Deswegen heißt es BeispielText (ist auch etwas kürzer zu tippen) und nicht BeispielKommentar.)
| |
|
| |
| Bezüglich Gleichheitszeichen (=) und Pipe-Symbol (|) gelten die selben Hinweise wie beim [[#Wiki-Modul|Wiki-Modul]].
| |
|
| |
| <pre>{{Beispiel|titel=mit Erklärung|
| |
| {{BeispielCode|…}}
| |
| {{BeispielText|Kommentar zum Code}}
| |
| }}
| |
| </pre>
| |
|
| |
| {{Beispiel|titel=mit Erklärung|
| |
| {{BeispielCode|…}}
| |
| {{BeispielText|Kommentar zum Code}}
| |
| }}
| |
|
| |
| ==== Mehrfache Modulanwendung ====
| |
| Module können in beliebiger Reihenfolge und Anzahl eingefügt werden. Zwischen den Modulen kann eine Leerzeile eingefügt werden, mehr als eine zerreißt allerdings die Box.
| |
|
| |
| <pre>
| |
| {{Beispiel|titel=– mehrteilig|
| |
|
| |
| {{BeispielCode|<pre><!-- erster Code-Teil --></pre>}}
| |
|
| |
| {{BeispielText|Text zum ersten Code-Teil}}
| |
|
| |
| {{BeispielCode|<pre><!-- zweiter Code-Teil --></pre>}}
| |
|
| |
| {{BeispielText|Text zum zweiten Code-Teil}}
| |
|
| |
| {{BeispielWiki|
| |
| * eine
| |
| * Liste
| |
| }}
| |
|
| |
| {{BeispielText|Text zur Liste}}
| |
|
| |
| }}</pre>
| |
|
| |
| {{Beispiel|titel=– mehrteilig|
| |
|
| |
| {{BeispielCode|<pre><!-- erster Code-Teil --></pre>}}
| |
|
| |
| {{BeispielText|Text zum ersten Code-Teil}}
| |
|
| |
| {{BeispielCode|<pre><!-- zweiter Code-Teil --></pre>}}
| |
|
| |
| {{BeispielText|Text zum zweiten Code-Teil}}
| |
|
| |
| {{BeispielWiki|
| |
| * eine
| |
| * Liste
| |
| }}
| |
|
| |
| {{BeispielText|Text zur Liste}}
| |
|
| |
| }}
| |
