BBCode To HTML Converter
BBCode, HTML And Pug With A Preview

What A BBCode To HTML Converter Does For You

BBCode is the markup of old forums. First, you type a tag in square brackets, and the board turns it into bold text, a link or a quote. Also, other sites use HTML, and some use Pug. So you often need to move text from one to another.

This tool does that in one box. First, paste your markup. Then pick the format you have and the format you want. The result appears as you type, and a preview shows how it looks.

It reads BBCode, HTML and Pug. Then it writes the same three. So that makes six pairs, and each one works the same way.

Everything runs in your browser. So your text never leaves your device. That matters, because posts and templates often hold names and private notes.

BBCode To HTML, Tag By Tag

First, the tool reads each tag in brackets. Bold, italic, underline and strike become strong, em, u and s. A link becomes an anchor, and a quote becomes a blockquote with the author name in a cite tag.

Also, lists work. Each star starts a new item, and an equals sign picks a numbered list. Color and size tags become spans with a style, and the center, left and right tags set the text alignment.

Code blocks keep their text exactly as you typed it. So a tag inside a code block stays a tag, and nothing in it turns into markup.

For more detail, see: Wikipedia article on BBCode.

A Safe BBCode Viewer

Next, the preview works as a BBCode viewer. It draws the result one element at a time, so nothing in your text can run. Only a short list of tags comes through.

Also, links open in a new tab with nofollow, and only web and mail addresses count. The tool drops a link that starts with javascript, and its text stays.

Images show as a small label instead of a picture. So that keeps the page from loading files from other sites.

HTML To BBCode

The reverse works too. First, paste HTML, and the tool writes BBCode you can post on a forum. Strong and b become the bold tag, em and i become italic, and an anchor becomes a url tag.

Then lists, quotes and code blocks keep their shape. Also, headings become a bold, larger line. The tool drops tags that BBCode has no word for, and their text stays.

The tool leaves out scripts, styles and the head of a page. So you get clean text for a post.

HTML To Pug And Pug To HTML

Pug, which people once called Jade, is a short way to write HTML. It drops the angle brackets and closing tags. Then it uses indents. A div with an id and a class becomes a line such as hash order dot card.

First, the tool writes Pug from your HTML, with tags, ids, classes and attributes. Then it also reads Pug back into HTML, with two spaces of indent and one element per line.

Also, it reads the markup part of Pug. Loops, conditions, mixins and includes need the Pug engine, so the tool skips those lines and tells you how many.

Safe Links, Colors And Sizes

First, the tool checks each value before it writes it. A color must be a hex code or a plain color name. A size must be a number from one to seven, or a small pixel size. A link must start with http, https or mailto.

So a bad value never ends up in your HTML. The tool drops the tag, and its text stays.

Line Breaks And Entities

First, a new line in BBCode becomes a br tag. The tool swallows a line break right after a quote, list or code block, because the block already starts a new line.

The tool escapes special characters. A less than sign becomes an entity in the HTML, so it cannot open a tag by accident.

Safe By Design

First, the tool reads your markup as text and never hands it to the browser as code. So a script tag cannot run, and an event handler cannot fire.

The preview follows the same rule. It builds each element by hand from a short list of safe tags, so even a hostile post cannot touch your page.