Wikistile erlauben es dem Autor, die Farbe und andere Merkmale eines Seiteninhalts zu verändern. Ein Wikistil wird von Prozentzeichen eingerahmt wie z. B. bei %red%
oder %bgcolor=lightblue%
.
Wikistil-Attribute
Die erkannten Stilattribute innerhalb eines Wikistils sind:
----------------- CSS ------------------ |
---- HTML ---- | |
---|---|---|
bgcolor background-color border1 color display float clear overflow font-size font-family font-weight font-style |
height* list-style margin1 padding1 text-align text-decoration white-space width* columns column-gap column-span column-rule |
accesskey align class hspace id target rel vspace value reversed |
Sonderattribute: |
define, apply |
Die Attribute in den ersten beiden Spalten entsprechen den Cascading Style Sheet (CSS) Attributen gleichen Namens. Die Attribute in der letzten Spalte sind nur für bestimmte Dinge gültig:
class=
undid=
weisen einem HTML-Element eine CSS-Klasse oder -Kennung (ID) zu,target=name
öffnet Verweise in einem Fenster mit dem Namen "name",rel=name
in einem Verweis gibt die Beziehung zur Zielseite an,accesskey=x
verwendet 'x' als Tastaturkürzel um diesem Verweis zu folgen,value=9
setzt die Ziffer des aktuellen Nummernlisteneintrags.- Die Attribute "width" und "height" sind mit '*' gekennzeichnet, weil sie bei
<img ... />
-Auszeichnungen besonders behandelt werden: Werden sie so für sich benutzt, d. h. ohne dass ein "apply="-Parameter weitere Stile setzt, so setzen sie Breite und Höhe aller folgenden<img ... />
-Tags. Mit einem "apply="-Parameter setzen sie die 'height'- und 'width'-Eigenschaft des Elements, dessen Stil gesetzt wird. - margin, padding, and border können von -left, -right, -top, und -bottom gefolgt werden, Beispiel: margin-left.
- Die Attribute "width" und "height" sind mit '*' gekennzeichnet, weil sie bei
Wikistile contra CSS-Stile
Wikistile, wie sie in die Seitenquelltexte geschrieben werden, sind nicht exakt CSS-Stile oder CSS-Klassen. Wikistile erlauben Autoren, sowohl vom Administrator vordefinierte CSS-Klassen als auch eigenen Klassen zu benutzen und neue Kombinationen von Stilen zu definieren, ohne die lokalen CSS-Dateien auf dem Server zu verändern.
Beachten Sie, dass PmWiki fortgeschrittenen Autoren erlaubt, class=
und style=
in DIV-Bereichen und Tabellen zu benutzen, doch sind dies reine HTML-Attribute und keine Wikistile, Kenntnisse in CSS sind auf jeden Fall erforderlich.
Textfarben und Schriften
Die grundlegenste Anwendung von Wikistilen ist das Ändern von Textattributen wie Farbe, Hintergrundfarbe und Schriftart. PmWiki definiert bereits einige Wikistile für die Veränderung der Farbe vor: %black% (schwarz), %white% (weiß), %red% (rot), %yellow% (gelb), %blue% (blau), %gray% (grau), %silver% (silber), %maroon% (braun), %green% (grün), %navy% (dunkelblau) und %purple% (lila)
.
Der Korb enthält %red% Äpfel, %blue% Blaubeeren, %purple% Auberginen, %green% Limetten %% und noch anderes. | Der Korb enthält Äpfel, Blaubeeren, Auberginen, Limetten und noch anderes. |
Für andere als die vordefinierten Farben verwendet man den %color=...%
Wikistil. (Hinweis: RGB Farben (#rrggbb) sollten immer mit Kleinbuchstaben definiert werden, damit sie nicht versehentlich als WikiWort erkannt werden.)
Ich hätte auch gerne noch %color=#ff7f00% Mandarinen%%! | Ich hätte auch gerne noch Mandarinen! |
Die Hintergrundfarbe kann mit dem Wikistil %bgcolor=...%
verändert werden:
Dieser Satz enthält %bgcolor=green yellow% gelben Text auf grünem Hintergrund. | Dieser Satz enthält gelben Text auf grünem Hintergrund. |
Weitere Farbdefinitionen: Wikistil-Farben
Textausrichtung
WikiStile werden benutzt, um die Textausrichtung zu kontrollieren
%center% Dieser Text ist zentriert. %right% Rechtsbündig. | Dieser Text ist zentriert. Rechtsbündig. |
und den Textfluss zu beeinflussen:
%rfloat% Dieser Text fließt nach rechts %rframe% fließt nach rechts mit einem Rahmen Lorem ipsum dolor sit amet, consectetuer sadipscing elitr | Dieser Text fließt nach rechts fließt nach rechts mit einem Rahmen Lorem ipsum dolor sit amet, consectetuer sadipscing elitr |
Gültigkeitsbereich
Wikistile können auch einen Gültigkeitsbereich angeben; ohne Gültigkeitsbereich wird der Stil dem nachfolgenden Text bis zum nächsten Wikistil oder dem Ende des Absatzes zugewiesen, je nachdem, was zuerst kommt. Das apply=-Attribut und seine Kurzformen erlauben den Gültigkeitsbereich wie folgt zu ändern:
Langform | Kurzform | Der Stil wird angewendet auf ... |
---|---|---|
%apply=img ...% | - | alle folgenden Bilder, bis ein anderer Stil wirkt |
%apply=p ...% | %p ...% | den aktuellen Absatz |
%apply=pre ...% | - | den aktuellen vorformatierten Text |
%apply=list ...% | %list ...% | die aktuelle Liste |
%apply=item ...% | %item ...% | den aktuellen Listenpunkt |
%apply=div ...% | - | den aktuellen DIV-Abschnitt |
%apply=block ...% | %block ...% | den aktuellen Block (Absatz, Liste, Listenpunkt, Überschrift oder DIV-Abschnitt). |
Demnach ist %p color=blue%
das Gleiche wie %apply=p color=blue%
und %list ROMAN%
ist das Gleiche wie %apply=list list-style=upper-roman%
.
Auch einige vordefinierte Stilkurzformen machen Gebrauch von apply=, so ist %right%
eine Kurzform von %text-align=right apply=block%
.
Beispiel:
%p bgcolor=#ffeeee% Der Wikistil am Anfang dieses Absatzes gilt vom Anfang dieser Zeile für den gesamten Absatz, sogar wenn %blue% andere Wikistile %% mitten im Absatz erscheinen. |
Der Wikistil am Anfang dieses Absatzes gilt vom Anfang dieser Zeile für den gesamten Absatz, sogar wenn andere Wikistile mitten im Absatz erscheinen. |
Vorbehalt: Ein angewendeter Wikistil wirkt nur, wenn er in der ersten Zeile dessen steht, was er verändern soll. Mit anderen Worten, ein Wikistil in der dritten Quellkodezeile eines Absatzes kann die Attribute des Absatzes nicht ändern.
Der Wikistil in der folgenden Zeile %apply=p color=blue% ist wirkungslos, weil der Absatz bereits begonnen hat | Der Wikistil in der folgenden Zeile ist wirkungslos, weil der Absatz bereits begonnen hat |
In der ersten Zeile %p color=red% des Absatzes funktioniert die Anweisung | In der ersten Zeile des Absatzes funktioniert die Anweisung |
* Hier ist ein Listenpunkt * %list red% Hoppla - zu spät, um für die Liste zu wirken! |
|
* %list red% Hier ist alles gut. * Aber das Unheil kommt. * %list green% Hier wirkt der Style nicht. * Es handelt sich noch immer um dieselbe Liste. |
|
Wenn Sie eine Liste in zwei Listen teilen wollen, reicht nicht eine leere Zeile, die nichts oder nur Leerzeichen enthält. Diese wird als zum vorigen Listenpunkt gehörend angesehen.
Fügen Sie eine Zeile ein, die ein nicht umbrechendes Leerzeichen (
) oder ein maskieres Nullzeichen ([==]
) enthält.
* %list red% erster Punkt * zweiter Punkt * %apply=list bgcolor=lightgreen% zweite Liste - erster Punkt * zweite Liste - zweiter Punkt [==] * %list class=mambo% dritte Liste - erster Punkt * dritte Liste - zweiter Punkt |
|
Größere Blöcke
Der >>WikiStyle<<
-Block kann für die Zuweisung eines Wikistils für einen größeren Bereich verwendet werden. Der Stil wird bis zum nächsten >><<
verwendet.
>>blue font-style=italic bgcolor=#ffffcc<< Alles nach obiger Zeile ist mit blauem, kursivem Text geschrieben, Das beinhaltet vorformatierten Text * Listen -> eingerückte Zeilen >><< | Alles nach obiger Zeile ist mit blauem, kursivem Text geschrieben, Das beinhaltet vorformatierten Text
eingerückte Zeilen
|
Anmerkung: Die (:div style="..." class="...":)
-Direktive funktioniert nicht in der gleiche Weise wie >>WikiStyle<<
, sie kann nur die regulären HTML-Style- und -Class-Attribute enthalten.
HTML "class" und "style" auf (:div:)
-Bereiche anwenden
(:div style="...":)
funktioniert fast wie >>style<<
,
aber die Stilinformation ist in ein style="..."
Attribut eingebettet. Beachten Sie, dass diese Attribute keine Wikistile sind, Kenntnisse in CSS sind Voraussetzung für ihren Gebrauch. Verschachteln von Blöcken ist möglich.
(:div class="green" style="font-style:italic; border:1px solid blue; color:#00aa00; background-color:#ffffcc":) Alles nach dieser Zeile ist grün und kursiv Das beinhaltet vorformatierten Text * Listen -> eingerückte Zeilen (:divend:) | Alles nach dieser Zeile ist grün und kursiv Das beinhaltet vorformatierten Text
eingerückte Zeilen
|
(:div1 style="font-style:italic; background-color:#ffffcc":) Äußerer Stil (:div2 style="color:red; background-color:lightblue":) verschachtelter Stil (:div2end:) wieder äußerer Stil (:div1end:) | Äußerer Stil verschachtelter Stil wieder äußerer Stil |
HTML "class"- und "style"-Attribute auf Tabellen anwenden
Wikistile sind nur die Kommandos zwischen den Prozentzeichen %...%
.
Tabellen und Tabellendirektiven erlauben fortgeschrittenen Autoren, die HTML/CSS-Attribute class=
und style=
einzubauen. Beachten Sie, dass diese Attribute keine Wikistile sind, Kenntnisse in CSS sind Voraussetzung für ihren Gebrauch.
||border=1 class="beispiel" style="font-style:italic; border:1px solid blue; background-color:#ffffcc" ||Kursiver Text mit gelbem Hintergrund, CSS-Klasse "beispiel" (falls definiert)|| ||für eine einfache Tabelle|| |
|
(:table class="beispiel" style="font-style:italic; border:1px solid blue; background-color:#ffffcc":) (:cellnr:) Kursiver Text mit gelbem Hintergrund, CSS-Klasse "beispiel" (falls definiert) Einschließlich vorformatiertem Text * Listen -> Einrückung (:tableend:) |
|
Eigene Kurznamen für Stile
Mit dem define=
-Attribut können einem Kurznamen verschiedene Wikistile zugewiesen werden. Dieser Kurzname kann für spätere Wikistile verwendet werden.
%define=box block bgcolor=#eeeeee border="2px dotted blue"% %box% [@ $ echo "Hallo Welt" Hallo Welt $ exit @] %box font-weight=bold color=green% [@ $ echo "Ich sagte, HALLO" @] | $ echo "Hallo Welt" Hallo Welt $ exit $ echo "Ich sagte, HALLO" |
%define=warn green%
und verwenden dann %warn%
anstatt %green%
im Dokument. Dann können Sie später immer noch entscheiden, dass Warnungen vielleicht doch anders dargestellt werden sollen. So ist es viel einfacher, die (eine) Definition anstatt vieler (%green%
-)Stile zu ändern.
%pre%
das Gleiche wie %class=pre%
.
Vordefinierte Stilkurznamen
PmWiki definiert einige Stilkurznamen:
- Textfarben: black, white, red, yellow, blue, gray (grey), silver, maroon, green, navy, purple, fuchsia, olive, lime, teal, aqua, orange (Kurznamen für:
%color=...%
) - Ausrichtung:
%center%
und%right%
- Bilder und Rahmen
- Linker oder rechter Textfluss:
%rfloat%
und%lfloat%
- Rahmen:
%frame%
,%rframe%
, und%lframe%
- Vorschaugröße:
%thumb%
- Linker oder rechter Textfluss:
- Verweis in neuem Fenster öffnen:
%newwin%
(Kurzname für%target=_blank%
) - Kommentare:
%comment%
(Abkürzung für%display=none%
), das ist nicht gedacht zum Verbergen von Geheimnissen. Der verdeckte Inhalt wird immer noch in den Quelltext geschrieben und kann von Bots gelesen oder mit Seitentext anzeigen im Browser sichtbar gemacht werden. - Nummerierte Listen:
%decimal%
,%roman%
,%ROMAN%
,%alpha%
,%ALPHA%
,%reversed%
(siehe auch Cookbook:OutlineLists)
Aktivieren der Syntaxhervorhebung per "Kodeverschönerungsbibliothek"
Dieser Abschnitt handelt von der Syntaxhervorhebung in verschiedenen Programmiersprachen unter Benutzung einer externen Bibliothek. Wenn Sie statt dessen – oder zusätzlich – die Syntax von PmWikis Markup-Syntax in der Dokumentation hervorheben möchten, sehen Sie bitte unter $EnablePmSyntax
nach.
Seit Version 2.2.119 macht es PmWiki relativ leicht, Syntaxhervorhebungen für vorformatierte Textblöcke zu aktivieren, umschlossen von [@geschützten@]
Markup-Blöcken.''.
Um die Syntaxhervorhebungen zu aktivieren, fügen Sie Ihrer config.php-Datei das Folgende hinzu:
$EnableHighlight = 1; $HTMLHeaderFmt['Highlight'] = ' <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css" data-theme="light" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/dark.min.css" data-theme="dark" disabled /> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>';
Dies lädt die Highlight.js-Bibliothek von einem globalen Content Delivery Network (CDN), aber Sie können stattdessen diese beiden Dateien auch in Ihr pub
-Verzeichnis kopieren und darauf verweisen.
Siehe auch Cookbook:CodeHighlight.
Dann können Sie – in einer Wikiseite – die Wikistile %highlight%
oder %hlt%
und die Sprache benutzen, um damit Ihre Kodeblöcke zu markieren.
Entweder direkt vor dem Kodeblock:
%hlt php%[@ function SDVA(&$var,$val) { foreach($val as $k=>$v) if (!isset($var[$k])) $var[$k]=$v; } function IsEnabled(&$var,$f=0) { return (isset($var)) ? $var : $f; } @] |
function SDVA(&$var,$val) { foreach($val as $k=>$v) if (!isset($var[$k])) $var[$k]=$v; } function IsEnabled(&$var,$f=0) { return (isset($var)) ? $var : $f; } |
Oder in einem umgebenden DIV-Block:
>>highlight css<< /* Dies justiert die Größen und Abstände von Überschriften */ h1, h2, h3, h4, h5, h6 { margin:1.0em 0 .6em 0; } h1, h2, h3, h6 { font-weight:normal; } h4, h5 { font-weight:bold; } >><< |
/* Dies justiert die Größen und Abstände von Überschriften */
h1, h2, h3, h4, h5, h6 { margin:1.0em 0 .6em 0; }
h1, h2, h3, h6 { font-weight:normal; }
h4, h5 { font-weight:bold; }
|
Wenn Sie die Möglichkeit korrekt aktiviert haben, sehen Sie die Syntaxhervorhebung des obigen Kodes.
Vielleicht möchten Sie auch eine [+]
Kopiere-Kode-Schaltfläche aktivieren, die oben rechts von einem vorformatierten Block erscheint. Fügen Sie zur config.php
-Datei hinzu:
$EnableCopyCode
= 1;
Stile aktivieren
Stile, die oben nicht definiert sind, kann ein Wiki-Administrator aktivieren, indem er die local/config.php-Datei verändert. Um z. B. das "line-height"-Stilattribut zu aktivieren, fügt er die folgende Zeile hinzu:
$WikiStyleCSS[] = 'line-height';
Gültigkeitsbereich für andere HTML-Elemente definieren
Sie können zusätzliche HTML-Elemente zu $WikiStyleApply
hinzufügen, um WikiStyles auf weitere HTML-Elemente anzuwenden, um zum Beispiel Stile für Tabellenzeilen oder Anker-Tags zu erlauben.
Um einen Stil auf Anker-Tags anzuwenden, setzen Sie folgende Zeile in die config.php:
$WikiStyleApply['link'] = 'a';
Dann können Sie eine Klasse oder einen Stil auf einen Anker-Verweis anwenden:
%apply=link red%[[PmWiki.WikiStyles | test link]] |
Oder, um ein ID-Attribut zu einer Tabellenzeile hinzuzufügen, setzen Sie die folgende Zeile in die config.php:
$WikiStyleApply['row'] = 'tr';
und in einer erweiterten Tabelle schreiben Sie:
(:cellnr:) %apply=row id=myid bgcolor=pink% cell content
Das geht auch auch in einer einfachen Tabelle:
|| border=1 || %apply=row id=myrowid% 1 || 2 || 3 || 4 ||
Beachten Sie: Der %apply=row...%
-WikiStil sollte in der gleichen Zeile wie (:cellnr:)
stehen. Dem (:cellnr:)
muss ein Leerzeichen folgen.
Beispiele
Beispiele zu den Wikistilen enthält eine Reihe von Beispielen, wie Wikistile in Seiten eingesetzt werden können.
Bekannte Probleme
- Prozentzeichen funktionieren in den Stildefinitionen (z. B.:
%block width=50% %
) derzeit nicht, da es ein Problem ist, diese von der Endmarkierung der Stildefinition zu unterscheiden. Statt dessen schreibt man%block width=50pct %
. - Denken Sie daran, wenn Sie mehrere Werte für ein Attribut angeben (z. B.
border="2px solid blue"
), diese in Anführungszeichen zu setzen. - Benutzen Sie nur Kleinbuchstaben für Rot-Grün-Blau-Farben, wenn Sie die Werte in Hexadezimalzahlen angeben,
%color=#aa3333%
wird akzeptiert,%color=#AA3333%
möglicherweise nicht.
Siehe auch
- Wikistile anpassen → Anpassen der vordefinierten Wikistile
- Wikistile für Listen → Stile für Aufzählungen und Listen
- WikiStylesPlus → (Viele nützliche Wikistile)
Übersetzung von PmWiki.WikiStyles, Originalseite auf PmWikiDe.WikiStyles — Backlinks
Zuletzt geändert: | PmWikiDe.WikiStyles | am 25.02.2024 |
PmWiki.WikiStyles | am 24.02.2024 |