About

BBCode is a lightweight markup language used across forums and CMS platforms. Jade (now Pug) is a whitespace-sensitive template engine that compiles to HTML. Manual conversion between these two formats is error-prone: a single misplaced indentation level in Jade output produces structurally invalid HTML. This tool parses BBCode input into an abstract syntax tree, maps each tag to its HTML-equivalent Jade node (e.g., [b] → strong, [url=x] → a(href="x")), and serializes the tree with correct 2-space indentation. It handles nested structures, inline text concatenation, and attribute extraction without regex heuristics that break on edge cases.

The parser tolerates malformed input: unclosed tags are implicitly closed at parent boundary, unknown tags are preserved as generic div elements with a data attribute, and plain text nodes are emitted as Jade pipe-text (| text). Note: this tool approximates conversion assuming standard BBCode dialects. Forum-specific custom tags (e.g., [spoiler]) are mapped to details elements where semantic equivalents exist, or to annotated div nodes otherwise.

Formulas

The conversion follows a three-stage pipeline: Tokenization → Parsing → Serialization.

tokenize(input) → [Token]

parse([Token]) → AST

serialize(AST, depth) → JadeString

The tokenizer uses a regex pattern to split BBCode into structural tokens:

pattern = /\[(\/?)([a-z*][a-z0-9]*)(=[^\]]*)?\]/gi

Each token is classified as one of: OPEN, CLOSE, SELF_CLOSE, or TEXT. The parser maintains a stack of open nodes. When a closing tag is encountered, the stack unwinds to the matching opener. Unmatched closers are discarded. Unclosed openers are implicitly closed at the end of input.

Jade serialization computes indentation as:

indent = repeat(" ", depth × 2)

Where depth = nesting level starting at 0. Inline text with a single text child is appended directly after the tag name. Multiple children or mixed content use pipe-text notation (| text) on indented lines.

Reference Data

BBCode Tag	Jade (Pug) Output	HTML Equivalent	Attributes	Notes
[b]	strong	<strong>	None	Bold text
[i]	em	<em>	None	Italic text
[u]	u	<u>	None	Underline text
[s]	s	<s>	None	Strikethrough
[url=href]	a(href="href")	<a href="href">	href	Hyperlink with URL
[url]	a(href="text")	<a>	href from content	URL derived from inner text
[img]	img(src="url")	<img>	src	Self-closing in Jade
[color=val]	span(style="color:val")	<span style>	style	Inline color
[size=val]	span(style="font-size:val")	<span style>	style	Font size mapping
[quote]	blockquote	<blockquote>	Optional author	Block-level quote
[quote=author]	blockquote + cite	<blockquote><cite>	author	Attributed quote
[code]	pre > code	<pre><code>	None	Preformatted code block
[list]	ul	<ul>	None	Unordered list
[list=1]	ol	<ol>	Ordered type	Ordered list
[*]	li	<li>	None	List item (self-closing open)
[center]	div(style="text-align:center")	<div style>	style	Center alignment
[left]	div(style="text-align:left")	<div style>	style	Left alignment
[right]	div(style="text-align:right")	<div style>	style	Right alignment
[table]	table	<table>	None	Table container
[tr]	tr	<tr>	None	Table row
[td]	td	<td>	None	Table cell
[th]	th	<th>	None	Table header cell
[hr]	hr	<hr>	None	Horizontal rule (self-closing)
[spoiler]	details > summary	<details>	Optional title	Collapsible content
[youtube]	iframe(src="embed")	<iframe>	src	YouTube embed
[email]	a(href="mailto:x")	<a>	href	Email link
[sub]	sub	<sub>	None	Subscript
[sup]	sup	<sup>	None	Superscript
[font=name]	span(style="font-family:name")	<span style>	style	Font family override
[align=val]	div(style="text-align:val")	<div style>	style	Generic alignment

Frequently Asked Questions

The parser uses a stack-based approach with implicit closure. If a closing tag is missing, the node is automatically closed when its parent closes or at the end of input. Unmatched closing tags (e.g., [/b] without a preceding [b]) are silently discarded and their content treated as plain text. This mirrors how most forum engines handle malformed markup.

Nested tags produce nested Jade output with correct indentation. The example above yields: strong followed by an indented em with the text content. The parser supports arbitrary nesting depth. However, overlapping tags like [b][i]text[/b][/i] are resolved by closing inner tags first at the boundary of the outer close, which matches browser HTML error-recovery behavior.

BBCode size values vary by platform. Numeric values from 1-7 are mapped to percentage-based font sizes: 1 = 50%, 2 = 70%, 3 = 85%, 4 = 100%, 5 = 120%, 6 = 150%, 7 = 200%. Values already containing units (e.g., "14px", '1.2em') are passed through directly. This covers both phpBB-style (1-7) and vBulletin-style (pixel) size conventions.

Jade was renamed to Pug in 2016 due to a trademark issue. The syntax is identical. This tool outputs syntax compatible with both Jade (pre-2.0) and Pug (2.0+). The generated output uses core features only: tag names, parenthesized attributes, piped text, and indentation-based nesting. No Pug-specific mixins or extends are used.

If an [img] tag includes width or height attributes (e.g., [img width=200 height=150]url[/img]), these are extracted and placed into the Jade attribute list: img(src="url", width="200", height="150"). The tag is always rendered as self-closing in Jade since img elements are void elements in HTML.

Block-level BBCode tags include [quote], [code], [list], [center], [table], [tr], [td], and [spoiler]. These produce Jade nodes on their own indentation line. Inline tags like [b], [i], [u], [s], [color], [size], and [font] are also placed on their own lines in Jade (since Jade does not support inline nesting on a single line without tag interpolation), but they map to inline HTML elements. The converter annotates inline tags with a comment when they are deeply nested for readability.

Yes. The [*] tag is treated as a self-closing opener: each [*] implicitly closes the previous [*] sibling. Content after [*] until the next [*] or [/list] becomes the li element's children. This matches the behavior of phpBB, vBulletin, and SMF forum engines where [*] never requires a closing tag.