BBCode in HTML umwandeln
BBCode, HTML und Pug mit Vorschau

Was Sie beim Umwandeln von BBCode in HTML gewinnen

BBCode ist das Markup alter Foren. Zuerst tippen Sie einen Tag in eckigen Klammern, und das Forum macht daraus fetten Text, einen Link oder ein Zitat. Außerdem nutzen andere Seiten HTML, und manche nutzen Pug. Deshalb müssen Sie Text oft von einem zum anderen bringen.

Dieses Werkzeug erledigt das in einem Feld. Fügen Sie zuerst Ihr Markup ein. Wählen Sie dann das Format, das Sie haben, und das, das Sie wollen. Das Ergebnis erscheint beim Tippen, und eine Vorschau zeigt, wie es aussieht.

Es liest BBCode, HTML und Pug. Dann schreibt es dieselben drei. So ergeben sich sechs Paare, und jedes funktioniert auf die gleiche Weise.

Alles läuft in Ihrem Browser. Deshalb verlässt Ihr Text Ihr Gerät nie. Das ist wichtig, denn Beiträge und Vorlagen enthalten oft Namen und private Notizen.

BBCode in HTML, Tag für Tag

Zuerst liest das Werkzeug jeden Tag in Klammern. Fett, kursiv, unterstrichen und durchgestrichen werden zu strong, em, u und s. Ein Link wird zu einem Anker, und ein Zitat wird zu einem blockquote mit dem Namen des Autors in einem cite-Tag.

Außerdem funktionieren Listen. Jeder Stern beginnt einen neuen Eintrag, und ein Gleichheitszeichen wählt eine nummerierte Liste. Farb- und Größen-Tags werden zu Spans mit Stil, und die Tags center, left und right legen die Textausrichtung fest.

Codeblöcke behalten ihren Text genau so, wie Sie ihn getippt haben. So bleibt ein Tag in einem Codeblock ein Tag, und nichts darin wird zu Markup.

Für mehr Details, siehe: Wikipedia article on BBCode.

Ein sicherer BBCode-Viewer

Als Nächstes arbeitet die Vorschau als BBCode-Viewer. Sie zeichnet das Ergebnis Element für Element, sodass nichts in Ihrem Text laufen kann. Nur eine kurze Liste von Tags kommt durch.

Außerdem öffnen Links in einem neuen Tab mit nofollow, und nur Web- und Mailadressen zählen. Das Werkzeug verwirft einen Link, der mit javascript beginnt, und sein Text bleibt.

Bilder erscheinen als kleines Label statt als Bild. So lädt die Seite keine Dateien von anderen Websites.

HTML in BBCode

Auch die Gegenrichtung funktioniert. Fügen Sie zuerst HTML ein, und das Werkzeug schreibt BBCode, das Sie in einem Forum posten können. Strong und b werden zum Fett-Tag, em und i zu kursiv, und ein Anker wird zu einem url-Tag.

Dann behalten Listen, Zitate und Codeblöcke ihre Form. Außerdem werden Überschriften zu einer fetten, größeren Zeile. Das Werkzeug verwirft Tags, für die BBCode kein Wort hat, und ihr Text bleibt.

Das Werkzeug lässt Skripte, Stile und den Head einer Seite weg. So erhalten Sie sauberen Text für einen Beitrag.

HTML in Pug und Pug in HTML

Pug, früher Jade genannt, ist eine kurze Art, HTML zu schreiben. Es lässt die spitzen Klammern und schließenden Tags weg. Dann nutzt es Einzüge. Ein div mit einer ID und einer Klasse wird zu einer Zeile wie Raute order Punkt card.

Zuerst schreibt das Werkzeug aus Ihrem HTML Pug, mit Tags, IDs, Klassen und Attributen. Dann liest es Pug auch zurück in HTML, mit zwei Leerzeichen Einzug und einem Element pro Zeile.

Außerdem liest es den Markup-Teil von Pug. Schleifen, Bedingungen, Mixins und Includes brauchen die Pug-Engine, daher überspringt das Werkzeug diese Zeilen und sagt Ihnen, wie viele es sind.

Sichere Links, Farben und Größen

Zuerst prüft das Werkzeug jeden Wert, bevor es ihn schreibt. Eine Farbe muss ein Hex-Code oder ein einfacher Farbname sein. Eine Größe muss eine Zahl von eins bis sieben oder eine kleine Pixelgröße sein. Ein Link muss mit http, https oder mailto beginnen.

So landet ein schlechter Wert nie in Ihrem HTML. Das Werkzeug verwirft den Tag, und sein Text bleibt.

Zeilenumbrüche und Entitäten

Zuerst wird eine neue Zeile in BBCode zu einem br-Tag. Das Werkzeug schluckt einen Zeilenumbruch direkt nach einem Zitat, einer Liste oder einem Codeblock, weil der Block schon eine neue Zeile beginnt.

Das Werkzeug maskiert Sonderzeichen. Ein Kleiner-als-Zeichen wird im HTML zu einer Entität, damit es nicht versehentlich einen Tag öffnet.

Sicher durch Konstruktion

Zuerst liest das Werkzeug Ihr Markup als Text und übergibt es dem Browser nie als Code. So kann ein script-Tag nicht laufen, und ein Ereignis-Handler kann nicht feuern.

Die Vorschau folgt derselben Regel. Sie baut jedes Element von Hand aus einer kurzen Liste sicherer Tags, sodass selbst ein feindlicher Beitrag Ihre Seite nicht berühren kann.