Plugin BBCode

Markdown ist toll, aber beschränkt. Dies kann dann zwar durch html- und/oder css-Einbinden "geändert" werden, ist aber manchmal etwas kompliziert. Daraus wuchs die Idee hier auch bbcode oder wiki-syntax einzubinden. Natürlich gibt es kein Plugin - also bastele ich mir ein eigenes. :ea-smirk:

Das erste Plugin wurde mit A simple PHP BBCode Parser von [url=http://digitcodes.com/create-simple-php-bbcode-parser-function]Afsal Rahim[/url] umgesetzt. Dieser arbeitet mit Regular-Expression und ist entsprechend eingeschränkt. Argumente müssen in einer vorher bestimmten Reihenfolge übergeben werden. Außerdem können diese nicht oder nur begrenzt überprüft werden.

Der zweite Versuch wurde dann mit dem auch in flatpress verwendeten BBCode-Parser von Christian Seiler umgesetzt. Dort wird ein Hierarchiebaum erzeugt und die Ersetzungen können Argumente in beliebiger Reihenfolge haben. Es wird mit einer Klasse und einfachen Ersetzungen gearbeitet.

[notices green] :fa-exclamation-triangle: Alle BBCode-Formatieren sind mit den CSS-Klassen .bbcode indiziert und können dadurch mit CSS angesprochen und zusätzlich formatiert werden. Jede Untergruppe ist dann zusätzlich mit einer zweiten Klasse verbunden. [notices_end]

Standards

Normal 
[ b]Fettschrift[ /b] auch [b]strong[/b]
[ i]Kursiv[ /i] auch [b]em[/b]
[ u]Unterstrichen[ /u] 
[ s]Durchgestrichen[ /s]  auch [b]strike[/b]
[ code]Code[ /code]
[ q]Kapitälchen[ /q] auch [b]smallcaps[/b]

Normal [b]Fettschrift[/b] [i]Kursiv[/i] [u]Unterstrichen[/u] [s]Durchgestrichen[/s] [code]Code[/code] [q]Kapitälchen[/q]

Ergänzend Textformatierung

Farben

[ size=150%]Größe[ /size] [ size=80%](alle CSS-Codes)[ /size]   
[ color=#ff3377]Farbe (alle CSS-Codes)[ /color]   
[ font=monospace]Schreibmaschinen[ /font]

[size=150%]Größe[/size] [size=80%](alle CSS-Codes)[/size]
[color=#ff3377]Farbe (alle CSS-Codes)[/color]
[font=monospace]Schreibmaschinen[/font]

[mycss ".notices li" "font-weight:bold;"] [notices dark]

Größe als

  • Namen ([size=xx-large]xx-large[/size], [size=x-small]x-small[/size], [size=larger]larger[/size]...)
  • Längenmaße (Länge in Pixeln 10px, Relative Einheit em (mittlere Größe), Relative Einheit ex (maximale Größe), aber auch cm, mm, in (Zoll/inch), Punkte pt...)
  • Prozent von der aktuellen Einheit ([size=160%]160%[/size], [size=60%]60%[/size]...)

Farbe als

  • Farbname ([color=red]red[/color], [color=blue]blue[/color], [color=yellow]yellow[/color], [color=chocolate]chocolate[/color]...)
  • RGB als Hexadezimal ([color=#f00]#f00 = Rot ff, Grün = 00, Blau = 00[/color], [color=#800080]#800080 = purple[/color], [color=#0ff]#00ffff = aqua[/color]...)
  • RGB als Funktion ([color=rgb(100%,50%,50%)]rgb(100%,50%,50%)[/color], [color=rgb(0,0,0)]rgb(0,0,0)[/color], [color=rgb(20%,100%,20%)]rgb(20%,100%,20%)[/color]...)

[notices_end]

Vgl. auch [a syntax/test-neue-bbcode]

[notices green] :fa-exclamation-triangle: Alle BBCode-Textformatieren sind mit den CSS-Klassen .bbcode und .bbctext indiziert. [notices_end]

Überschriften

[ h1]Überschrift 1[ /h1]
[ h2]Überschrift 2[ /h2]
[ h3]Überschrift 3[ /h3]
[ h4]Überschrift 4[ /h4]
[ h5]Überschrift 5[ /h5]
[ h6]Überschrift 6[ /h6]

BBCode-Überschriften sind mittig/zentriert ausgerichtet.

[h1]Überschrift 1[/h1] [h2]Überschrift 2[/h2] [h3]Überschrift 3[/h3] [h4]Überschrift 4[/h4] [h5]Überschrift 5[/h5] [h6]Überschrift 6[/h6]

[notices green] :fa-exclamation-triangle: Alle BBCode-Headerformatieren sind mit den CSS-Klassen .bbcode und .bbcheader indiziert. [notices_end]

Textausrichtung

[justify][ justify]Blocksatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[ /justify][/justify]

[left][ left]Linksbündig[ /left][/left] [center][ center]Zentriert[ /center][/center] [right][ right]Rechtsbündig[ /right][/right]

Alternativ kann [ c]zentriert[ /c], [ j]Blocksatz[ /j], [ r]rechts-[ /r] oder [ l]links-bündig[ /l] verwendet werden. [notices green] :fa-exclamation-triangle: Alle BBCode-Textausrichtungen sind mit den CSS-Klassen .bbcode und .bbcalign indiziert. [notices_end]

Floating Textbox

[ float=left|right moreStyle]Inhalt[ /float]
[ float=center moreStyle]Inhalt[ /float]

Grundstil = width:50%; margin:10px; padding:10px; border:1px solid grey;

:fa-exclamation-triangle: Bei Center kein margin-right bzw. -left angeben!

[float=right][ float=right]+ Standardformatierung[ /float][/float]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. [float=center][center][ float=center][ center]Zentriert[ /center][ /float]
style="margin-left: auto; margin-right: auto; - Mittige Ausrichtung
width:80%; - Breite
padding:10px; - innerer Rahmen
border:1px solid grey;" - Box [/center][/float] [float=left style="width:66%; margin:5px; padding:5px; background-color:grey; color:white;"][ float=left style="width:66%; margin:5px; padding:5px; background-color:grey; color:white;"]Eigene Formatierung immer vollständig angeben[ /float][/float]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Alternativ kann [ floatr] für Float Right [ /floatr], [ floatl] für Float Left [ /floatl] und [ box] für zentriert [ /box] ohne Argumente verwendet werden.

[notices green] :fa-exclamation-triangle: Alle BBCode-Floatelemente sind mit den CSS-Klassen .bbcode und .bbcfloat indiziert. [notices_end]

Spezialzitate

[ quote]Zitattext[ /quote]

[quote]Wenn der Bauer nicht schwimmen kann, ist grundsätzlich die Badehose schuld.[/quote]

[ quote=Autor/Quelle]Zitattext[ /quote]

[quote="Albert Einstein"]Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.[/quote]

[ quote=Autor/Quelle url=Adresse]Zitattext[ /quote]

[quote="Antoine de Saint-Exupéry" url=https://lebensweisheiten-sprueche.ch/schoen-zitate]Um klar zu sehen, genügt oft ein Wechsel der Blickrichtung.[/quote]

[notices green] :fa-exclamation-triangle: Alle BBCode-Zitate sind mit den CSS-Klassen .bbcode und .bbcquote indiziert. Der Link im 3. Beispiel ist mit .bbcquotelink formatiert [notices_end]

Bilder

[ img]Bildadresse[ /img]
[ img url=Adresse]Bildadresse[ /img]
[ img=Bildadresse]Bildtitel[ /img]
[ img=Bildadresse url=Adresse]Bildtitel[ /img]

Wenn die Bildadresse nicht mit http beginnt, wird sie bei Bedarf mit dem Pfad /media/images/ ergänzt wird.

[ img=picture.jpg]Abendhimmel[ /img]

[img=picture.jpg]Abendhimmel[/img]

[notices green] :fa-exclamation-triangle: Alle BBCode-Bilder sind mit den CSS-Klassen .bbcode und .bbcimg indiziert. [notices_end]

[ url]Adresse[ /url]
[ url=Adresse]Name[ /url]

Links werden grundsätzlich in einem neuen Fenster geöffnet, wenn nicht new=false gesetzt wird.

:fa-exclamation-triangle: TODO: Interne Links oder Ähnliches müssen noch ergänzt werden.

[url=http://www.christoph-bornewasser.de]Meine andere Seite www.christoph-bornewasser.de[/url]

[notices green] :fa-exclamation-triangle: Alle BBCode-Links sind mit den CSS-Klassen .bbcode und .bbclink indiziert. [notices_end]

Ergänzungen Fotorama

[ fotoramax=delay]
[ frpic=Bild]Titel[ /frpic]
...
[ /fotoramax]

Zur Vereinfachung des Syntax wird dies umgewandelt in

<div class="fotorama" data-autoplay="delay">
  <img src="Bild" data-caption="Titel" />
  ...
</div>

Alternativ kann auch [ img=src fotorama=titel ][ /img] verwendet werden.

vgl. Plugin Fotorama

Accordion

siehe Accordion

Tabelle

Tabellen können mit den Elementen [ table][ /table], [ cell] und [ row] gebildet werden. Aber [ table] öffnet die Tabelle mit <table><tr><td> und mit [ /table] auch wieder schließt. [ cell] schließt eine Zelle und öffnet die nächste und [ row] schließt Zelle und Reihe und öffnet die nächste. Es sind keine Parameter möglich. Aber die Tabellen, Reihen und Zellen haben entsprechende Klassen.

siehe Tabellen

Hoch- oder tiefgestellter Text

Syntax ist in verschiedenen Versionen vorhanden. [.sub][./sub] bzw. [.sup][./sup] stellt einfach nur tief bzw. hoch. [.subx][./subx] bzw. [.supx][./supx] stellt verkleinerten Text tief bzw. hoch. Dies einspricht [.tief][./tief] oder [.hoch][./hoch].

Text[sup]Text (sup)[/sup] oder Text[sub]Text (sub)[/sub] - Text[hoch]Text (hoch)[/hoch] oder Text[tief]Text (tief)[/tief]

Style

TODO

[notiz=yellow] [color=orange][fa fa-exclamation-triangle fa-3x][/color] Neue Codes können ergänzt werden. Z.B. Bilder- und Link-Syntax aus dem Wiki-Syntax.

Andere Ideen

  • Syntax für Diagramme mittels Mermaid
  • Syntax für Formeln mittels MathJax

[/notiz]

[notices red] :fa-exclamation-triangle: Das Code-Modul von Markdown erkennt keinen BBCode und das BBCode-Plugin wandelt auch in Code-Abschnitten BBCode um. Daher habe ich, um Syntax und Pseudo-Syntax zu trennen den Ersetzer [.tag => [tag eingefügt, wobei der Punkt ein Lehrzeichen ist. Bei einer eckigen Klammer gefolgt von einem Leerzeichen wird also das Leerzeichen entfernt. [notices_end]