BBCode writer #11242

reptee · 2025-10-25T14:10:53Z

Hello,

The PR adds support for 5 BBCode flavors:

The flavor described at bbcode.org is not implemented in full anywhere, but it is what default writer (bbcode) spits out, which I think is a reasonable collection of tags.

The writer is extensible by users of Pandoc the library, because most forums using BBCode (except Steam’s, which doesn’t allow self-hosting) can be augmented with more tags. Since the Writer can be extended, there is a fair amount of haddock docs in place..

Golden files are not enough to see how BBCode looks like, so I attached HTML and images of rendered HTML on forums using respective flavors. The platforms are:

bbs.archlinux.org for FluxBB’s flavor,
steamcommunity.com for Steam’s flavor,
www.phpbb.com/community for phpBB’s flavor,
hub.netzgemeinde.eu for Hubzilla’s flavor.

Although I started writing the PR after reading #7455, I forgot about xenforo, so not sure whether the issue can be closed.

Disclosure: I used Codex (the CLI AI assistant tool) to prototype implementation. Everything was reviewed by me and iterated upon manually.

FluxBB

rendered contents (image)

fluxbb_writer

rendered contents (html)

<div class="postright">
  <div class="postmsg">
    <p>
      This is a set of tests for pandoc. Most of them are adapted from John
      Gruber's markdown test suite.
    </p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Headers</strong></span>
    </p>
    <p>
      <strong
        >Level 2 with an
        <a href="https://bbs.archlinux.org/url" rel="nofollow"
          >embedded link</a
        ></strong
      >
    </p>
    <p>
      <span class="bbu">Level 3 with <em>emphasis</em></span>
    </p>
    <p>Level 4</p>
    <p>Level 5</p>
    <p>
      <span class="bbu"><strong>Level 1</strong></span>
    </p>
    <p>
      <strong>Level 2 with <em>emphasis</em></strong>
    </p>
    <p><span class="bbu">Level 3</span></p>
    <p>with no blank line</p>
    <p><strong>Level 2</strong></p>
    <p>with no blank line</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Paragraphs</strong></span>
    </p>
    <p>Here's a regular paragraph.</p>
    <p>
      In Markdown 1.0.0 and earlier. Version 8. This line turns into a list
      item. Because a hard-wrapped line in the middle of a paragraph looked like
      a list item.
    </p>
    <p>Here's one with a bullet. * criminey.</p>
    <p>There should be a hard line break<br />here.</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Block Quotes</strong></span>
    </p>
    <p>E-mail style:</p>
    <div class="quotebox">
      <blockquote>
        <div><p>This is a block quote. It is pretty short.</p></div>
      </blockquote>
    </div>
    <div class="quotebox">
      <blockquote>
        <div>
          <p>Code in a block quote:</p>
          <div class="codebox">
            <pre><code>sub status {
    print "working";
}</code></pre>
          </div>
          <p>A list:</p>
          <ol class="decimal">
            <li><p>item one</p></li>
            <li><p>item two</p></li>
          </ol>
          <p>Nested block quotes:</p>
          <div class="quotebox">
            <blockquote>
              <div><p>nested</p></div>
            </blockquote>
          </div>
          <div class="quotebox">
            <blockquote>
              <div><p>nested</p></div>
            </blockquote>
          </div>
        </div>
      </blockquote>
    </div>
    <p>This should not be a block quote: 2 &gt; 1.</p>
    <p>And a following paragraph.</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Code Blocks</strong></span>
    </p>
    <p>Code:</p>
    <div class="codebox">
      <pre><code>---- (should be four hyphens)

sub status {
    print "working";
}

this code block is indented by one tab</code></pre>
    </div>
    <p>And:</p>
    <div class="codebox">
      <pre><code>    this code block is indented by two tabs

These should not be escaped:  \$ \\ \&gt; \[ \{</code></pre>
    </div>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Lists</strong></span>
    </p>
    <p><strong>Unordered</strong></p>
    <p>Asterisks tight:</p>
    <ul>
      <li><p>asterisk 1</p></li>
      <li><p>asterisk 2</p></li>
      <li><p>asterisk 3</p></li>
    </ul>
    <p>Asterisks loose:</p>
    <ul>
      <li><p>asterisk 1</p></li>
      <li><p>asterisk 2</p></li>
      <li><p>asterisk 3</p></li>
    </ul>
    <p>Pluses tight:</p>
    <ul>
      <li><p>Plus 1</p></li>
      <li><p>Plus 2</p></li>
      <li><p>Plus 3</p></li>
    </ul>
    <p>Pluses loose:</p>
    <ul>
      <li><p>Plus 1</p></li>
      <li><p>Plus 2</p></li>
      <li><p>Plus 3</p></li>
    </ul>
    <p>Minuses tight:</p>
    <ul>
      <li><p>Minus 1</p></li>
      <li><p>Minus 2</p></li>
      <li><p>Minus 3</p></li>
    </ul>
    <p>Minuses loose:</p>
    <ul>
      <li><p>Minus 1</p></li>
      <li><p>Minus 2</p></li>
      <li><p>Minus 3</p></li>
    </ul>
    <p><strong>Ordered</strong></p>
    <p>Tight:</p>
    <ol class="decimal">
      <li><p>First</p></li>
      <li><p>Second</p></li>
      <li><p>Third</p></li>
    </ol>
    <p>and:</p>
    <ol class="decimal">
      <li><p>One</p></li>
      <li><p>Two</p></li>
      <li><p>Three</p></li>
    </ol>
    <p>Loose using tabs:</p>
    <ol class="decimal">
      <li><p>First</p></li>
      <li><p>Second</p></li>
      <li><p>Third</p></li>
    </ol>
    <p>and using spaces:</p>
    <ol class="decimal">
      <li><p>One</p></li>
      <li><p>Two</p></li>
      <li><p>Three</p></li>
    </ol>
    <p>Multiple paragraphs:</p>
    <ol class="decimal">
      <li>
        <p>Item 1, graf one.</p>
        <p>
          Item 1. graf two. The quick brown fox jumped over the lazy dog's back.
        </p>
      </li>
      <li><p>Item 2.</p></li>
      <li><p>Item 3.</p></li>
    </ol>
    <p><strong>Nested</strong></p>
    <ul>
      <li>
        <p>Tab</p>
        <ul>
          <li>
            <p>Tab</p>
            <ul>
              <li><p>Tab</p></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <p>Here's another:</p>
    <ol class="decimal">
      <li><p>First</p></li>
      <li>
        <p>Second:</p>
        <ul>
          <li><p>Fee</p></li>
          <li><p>Fie</p></li>
          <li><p>Foe</p></li>
        </ul>
      </li>
      <li><p>Third</p></li>
    </ol>
    <p>Same thing but with paragraphs:</p>
    <ol class="decimal">
      <li><p>First</p></li>
      <li>
        <p>Second:</p>
        <ul>
          <li><p>Fee</p></li>
          <li><p>Fie</p></li>
          <li><p>Foe</p></li>
        </ul>
      </li>
      <li><p>Third</p></li>
    </ol>
    <p><strong>Tabs and spaces</strong></p>
    <ul>
      <li><p>this is a list item indented with tabs</p></li>
      <li>
        <p>this is a list item indented with spaces</p>
        <ul>
          <li><p>this is an example list item indented with tabs</p></li>
          <li><p>this is an example list item indented with spaces</p></li>
        </ul>
      </li>
    </ul>
    <p><strong>Fancy list markers</strong></p>
    <ol class="decimal">
      <li><p>begins with 2</p></li>
      <li>
        <p>and now 3</p>
        <p>with a continuation</p>
        <ol class="decimal">
          <li><p>sublist with roman numerals, starting with 4</p></li>
          <li>
            <p>more items</p>
            <ol class="alpha">
              <li><p>a subsublist</p></li>
              <li><p>a subsublist</p></li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
    <p>Nesting:</p>
    <ol class="alpha">
      <li>
        <p>Upper Alpha</p>
        <ol class="decimal">
          <li>
            <p>Upper Roman.</p>
            <ol class="decimal">
              <li>
                <p>Decimal start with 6</p>
                <ol class="alpha">
                  <li><p>Lower alpha with paren</p></li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
    <p>Autonumbering:</p>
    <ol class="decimal">
      <li><p>Autonumber.</p></li>
      <li>
        <p>More.</p>
        <ol class="decimal">
          <li><p>Nested.</p></li>
        </ol>
      </li>
    </ol>
    <p>Should not be a list item:</p>
    <p>M.A.&nbsp;2007</p>
    <p>B. Williams</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Definition Lists</strong></span>
    </p>
    <p>Tight using spaces:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li><p>orange fruit</p></li>
    </ul>
    <p>banana</p>
    <ul>
      <li><p>yellow fruit</p></li>
    </ul>
    <p>Tight using tabs:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li><p>orange fruit</p></li>
    </ul>
    <p>banana</p>
    <ul>
      <li><p>yellow fruit</p></li>
    </ul>
    <p>Loose:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li><p>orange fruit</p></li>
    </ul>
    <p>banana</p>
    <ul>
      <li><p>yellow fruit</p></li>
    </ul>
    <p>Multiple blocks with italics:</p>
    <p><em>apple</em></p>
    <ul>
      <li>
        <p>red fruit</p>
        <p>contains seeds, crisp, pleasant to taste</p>
      </li>
    </ul>
    <p><em>orange</em></p>
    <ul>
      <li>
        <p>orange fruit</p>
        <div class="codebox">
          <pre><code>{ orange code block }</code></pre>
        </div>
      </li>
    </ul>
    <p>Multiple definitions, tight:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
      <li><p>computer</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li><p>orange fruit</p></li>
      <li><p>bank</p></li>
    </ul>
    <p>Multiple definitions, loose:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
      <li><p>computer</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li><p>orange fruit</p></li>
      <li><p>bank</p></li>
    </ul>
    <p>Blank line after term, indented marker, alternate markers:</p>
    <p>apple</p>
    <ul>
      <li><p>red fruit</p></li>
      <li><p>computer</p></li>
    </ul>
    <p>orange</p>
    <ul>
      <li>
        <p>orange fruit</p>
        <ol class="decimal">
          <li><p>sublist</p></li>
          <li><p>sublist</p></li>
        </ol>
      </li>
    </ul>
    <p>
      <span class="bbu"><strong>HTML Blocks</strong></span>
    </p>
    <p>Simple block on one line:</p>
    <p>foo<br />And nested without indentation:</p>
    <p>foo</p>
    <p>bar<br />Interpreted markdown in a table:</p>
    <p>
      This is <em>emphasized</em><br />And this is <strong>strong</strong
      ><br />Here's a simple block:
    </p>
    <p>foo</p>
    <p>This should be a code block, though:</p>
    <div class="codebox">
      <pre><code>&lt;div&gt;
    foo
&lt;/div&gt;</code></pre>
    </div>
    <p>As should this:</p>
    <div class="codebox">
      <pre><code>&lt;div&gt;foo&lt;/div&gt;</code></pre>
    </div>
    <p>Now, nested:</p>
    <p>foo<br />This should just be an HTML comment:</p>
    <p>Multiline:</p>
    <p>Code block:</p>
    <div class="codebox">
      <pre><code>&lt;!-- Comment --&gt;</code></pre>
    </div>
    <p>Just plain comment, with trailing spaces on the line:</p>
    <p>Code:</p>
    <div class="codebox">
      <pre><code>&lt;hr /&gt;</code></pre>
    </div>
    <p>Hr's:</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Inline Markup</strong></span>
    </p>
    <p>This is <em>emphasized</em>, and so <em>is this</em>.</p>
    <p>This is <strong>strong</strong>, and so <strong>is this</strong>.</p>
    <p>
      An
      <em
        ><a href="https://bbs.archlinux.org/url" rel="nofollow"
          >emphasized link</a
        ></em
      >.
    </p>
    <p>
      <strong><em>This is strong and em.</em></strong>
    </p>
    <p>
      So is <strong><em>this</em></strong> word.
    </p>
    <p>
      <strong><em>This is strong and em.</em></strong>
    </p>
    <p>
      So is <strong><em>this</em></strong> word.
    </p>
    <p>This is code: &gt;, $, \, \$, &lt;html&gt;.</p>
    <p>
      <span class="bbs">This is <em>strikeout</em>.</span>
    </p>
    <p>Superscripts: abcd a<em>hello</em> ahello&nbsp;there.</p>
    <p>Subscripts: H2O, H23O, Hmany&nbsp;of&nbsp;themO.</p>
    <p>
      These should not be superscripts or subscripts, because of the unescaped
      spaces: a^b c^d, a~b c~d.
    </p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Smart quotes, ellipses, dashes</strong></span>
    </p>
    <p>"Hello," said the spider. "'Shelob' is my name."</p>
    <p>'A', 'B', and 'C' are letters.</p>
    <p>'Oak,' 'elm,' and 'beech' are names of trees. So is 'pine.'</p>
    <p>'He said, "I want to go."' Were you alive in the 70's?</p>
    <p>
      Here is some quoted 'code' and a "<a
        href="http://example.com/?foo=1&amp;bar=2"
        rel="nofollow"
        >quoted link</a
      >".
    </p>
    <p>Some dashes: one---two --- three---four --- five.</p>
    <p>Dashes between numbers: 5--7, 255--66, 1987--1999.</p>
    <p>Ellipses...and...and....</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>LaTeX</strong></span>
    </p>
    <ul>
      <li><p>$2+2=4$</p></li>
      <li><p>$x \in y$</p></li>
      <li><p>$\alpha \wedge \omega$</p></li>
      <li><p>$223$</p></li>
      <li><p>$p$-Tree</p></li>
      <li>
        <p>Here's some display math:</p>
        <div class="codebox">
          <pre><code>$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</code></pre>
        </div>
      </li>
      <li>
        <p>
          Here's one that has a line break in it: $\alpha + \omega \times x^2$.
        </p>
      </li>
    </ul>
    <p>These shouldn't be math:</p>
    <ul>
      <li><p>To get the famous equation, write $e = mc^2$.</p></li>
      <li>
        <p>
          $22,000 is a <em>lot</em> of money. So is $34,000. (It worked if "lot"
          is emphasized.)
        </p>
      </li>
      <li><p>Shoes ($20) and socks ($5).</p></li>
      <li>
        <p>Escaped $: $73 <em>this should be emphasized</em> 23$.</p>
      </li>
    </ul>
    <p>Here's a LaTeX table:</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Special Characters</strong></span>
    </p>
    <p>Here is some unicode:</p>
    <ul>
      <li><p>I hat: Î</p></li>
      <li><p>o umlaut: ö</p></li>
      <li><p>section: §</p></li>
      <li><p>set membership: ∈</p></li>
      <li><p>copyright: ©</p></li>
    </ul>
    <p>AT&amp;T has an ampersand in their name.</p>
    <p>AT&amp;T is another way to write it.</p>
    <p>This &amp; that.</p>
    <p>4 &lt; 5.</p>
    <p>6 &gt; 5.</p>
    <p>Backslash: \</p>
    <p>Backtick: `</p>
    <p>Asterisk: *</p>
    <p>Underscore: _</p>
    <p>Left brace: {</p>
    <p>Right brace: }</p>
    <p>Left bracket: [</p>
    <p>Right bracket: ]</p>
    <p>Left paren: (</p>
    <p>Right paren: )</p>
    <p>Greater-than: &gt;</p>
    <p>Hash: #</p>
    <p>Period: .</p>
    <p>Bang: !</p>
    <p>Plus: +</p>
    <p>Minus: -</p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Links</strong></span>
    </p>
    <p><strong>Explicit</strong></p>
    <p>
      Just a <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL</a>.
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL and title</a>.
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL and title</a>.
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL and title</a>.
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL and title</a>
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">URL and title</a>
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/with_underscore" rel="nofollow"
        >with_underscore</a
      >
    </p>
    <p><a href="mailto:[email protected]">Email link</a></p>
    <p><a href="http://Empty" rel="nofollow">Empty</a>.</p>
    <p><strong>Reference</strong></p>
    <p>Foo <a href="https://bbs.archlinux.org/url/" rel="nofollow">bar</a>.</p>
    <p>
      With
      <a href="https://bbs.archlinux.org/url/" rel="nofollow"
        >embedded [brackets]</a
      >.
    </p>
    <p>
      <a href="https://bbs.archlinux.org/url/" rel="nofollow">b</a> by itself
      should be a link.
    </p>
    <p>
      Indented <a href="https://bbs.archlinux.org/url" rel="nofollow">once</a>.
    </p>
    <p>
      Indented <a href="https://bbs.archlinux.org/url" rel="nofollow">twice</a>.
    </p>
    <p>
      Indented
      <a href="https://bbs.archlinux.org/url" rel="nofollow">thrice</a>.
    </p>
    <p>This should [not][] be a link.</p>
    <div class="codebox">
      <pre><code>[not]: /url</code></pre>
    </div>
    <p>Foo <a href="https://bbs.archlinux.org/url/" rel="nofollow">bar</a>.</p>
    <p>Foo <a href="https://bbs.archlinux.org/url/" rel="nofollow">biz</a>.</p>
    <p><strong>With ampersands</strong></p>
    <p>
      Here's a
      <a href="http://example.com/?foo=1&amp;bar=2" rel="nofollow"
        >link with an ampersand in the URL</a
      >.
    </p>
    <p>
      Here's a link with an amersand in the link text:
      <a href="http://att.com/" rel="nofollow">AT&amp;T</a>.
    </p>
    <p>
      Here's an
      <a href="https://bbs.archlinux.org/script?foo=1&amp;bar=2" rel="nofollow"
        >inline link</a
      >.
    </p>
    <p>
      Here's an
      <a href="https://bbs.archlinux.org/script?foo=1&amp;bar=2" rel="nofollow"
        >inline link in pointy braces</a
      >.
    </p>
    <p><strong>Autolinks</strong></p>
    <p>
      With an ampersand:
      <a href="http://example.com/?foo=1&amp;bar=2" rel="nofollow"
        >http://example.com/?foo=1&amp;bar=2</a
      >
    </p>
    <ul>
      <li><p>In a list?</p></li>
      <li>
        <p>
          <a href="http://example.com/" rel="nofollow">http://example.com/</a>
        </p>
      </li>
      <li><p>It should.</p></li>
    </ul>
    <p>
      An e-mail address:
      <a href="mailto:[email protected]">[email protected]</a>
    </p>
    <div class="quotebox">
      <blockquote>
        <div>
          <p>
            Blockquoted:
            <a href="http://example.com/" rel="nofollow">http://example.com/</a>
          </p>
        </div>
      </blockquote>
    </div>
    <p>
      Auto-links should not occur here: &lt;<a
        href="http://example.com/"
        rel="nofollow"
        >http://example.com/</a
      >&gt;
    </p>
    <div class="codebox">
      <pre><code>or here: &lt;http://example.com/&gt;</code></pre>
    </div>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Images</strong></span>
    </p>
    <p>From "Voyage dans la Lune" by Georges Melies (1902):</p>
    <p>
      [img=lalune]lalune.jpg[/img]<br />lalune<br />Here is a movie
      [img=movie]movie.jpg[/img] icon.
    </p>
    <p>* * *</p>
    <p>
      <span class="bbu"><strong>Footnotes</strong></span>
    </p>
    <p>
      Here is a footnote reference,(1) and another.(2) This should
      <em>not</em> be a footnote reference, because it contains a space.[^my
      note] Here is an inline note.(3)
    </p>
    <div class="quotebox">
      <blockquote>
        <div><p>Notes can go in quotes.(4)</p></div>
      </blockquote>
    </div>
    <ol class="decimal">
      <li><p>And in list items.(5)</p></li>
    </ol>
    <p>This paragraph should not be part of the note, as it is not indented.</p>
    <p>* * *</p>
    <p>
      (1) Here is the footnote. It can go anywhere after the footnote reference.
      It need not be placed at the end of the document.
    </p>
    <p>(2) Here's the long note. This one contains multiple blocks.</p>
    <p>
      Subsequent blocks are indented to show that they belong to the footnote
      (as with list items).
    </p>
    <div class="codebox">
      <pre><code>  { &lt;code&gt; }</code></pre>
    </div>
    <p>
      If you want, you can indent every line, but you can also be lazy and just
      indent the first line of each block.
    </p>
    <p>
      (3) This is <em>easier</em> to type. Inline notes may contain
      <a href="http://google.com" rel="nofollow">links</a> and ] verbatim
      characters, as well as [bracketed text].
    </p>
    <p>(4) In quote.</p>
    <p>(5) In list.</p>
  </div>
</div>

Hubzilla

Writer

Formatting failed here, trying to fix it made prettier confused and it truncated most of the document, hence pasting without formatting.

rendered contents (image)

hubzilla_writer_res

rendered contents (html)

<div class="p-2 wall-item-content clearfix divmore divmore_checked" id="wall-item-content-85864473" style="max-height: none;" data-readmore="" aria-expanded="true">
                    <div class="wall-item-body e-content" id="wall-item-body-85864473">
                        This is a set of tests for pandoc. Most of them are adapted from John Gruber's markdown test suite.<br><br><hr><br><br><h1>Headers</h1><br><h2>Level 2 with an <a href="" "="" target="_blank" rel="nofollow noopener">embedded link</a></h2><br><h3>Level 3 with <em>emphasis</em></h3><br><h4>Level 4</h4><br><h5>Level 5</h5><br><h1>Level 1</h1><br><h2>Level 2 with <em>emphasis</em></h2><br><h3>Level 3</h3><br>with no blank line<br><br><h2>Level 2</h2><br>with no blank line<br><br><hr><br><br><h1>Paragraphs</h1><br>Here's a regular paragraph.<br><br>In Markdown 1.0.0 and earlier. Version 8. This line turns into a list item. Because a hard-wrapped line in the middle of a paragraph looked like a list item.<br><br>Here's one with a bullet. * criminey.<br><br>There should be a hard line break<br>here.<br><br><hr><br><br><h1>Block Quotes</h1><br>E-mail style:<br><br><blockquote><br>This is a block quote. It is pretty short.<br><br></blockquote><br><br><blockquote><br>Code in a block quote:<br><br><pre><code>sub status {<br>&nbsp;&nbsp;&nbsp;&nbsp;print "working";<br>}</code></pre>A list:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>item one</li><li>item two</li></ol><br>Nested block quotes:<br><br><blockquote><br>nested<br><br></blockquote><br><br><blockquote><br>nested<br><br></blockquote><br><br></blockquote><br><br>This should not be a block quote: 2 &gt; 1.<br><br>And a following paragraph.<br><br><hr><br><br><h1>Code Blocks</h1><br>Code:<br><br><pre><code>---- (should be four hyphens)<br><br>sub status {<br>&nbsp;&nbsp;&nbsp;&nbsp;print "working";<br>}<br><br>this code block is indented by one tab</code></pre>And:<br><br><pre><code>&nbsp;&nbsp;&nbsp;&nbsp;this code block is indented by two tabs<br><br>These should not be escaped:&nbsp;&nbsp;\$ \\ \&gt; \[ \{</code></pre><br><hr><br><br><h1>Lists</h1><br><h2>Unordered</h2><br>Asterisks tight:<br><br><ul class="listbullet"><li>asterisk 1</li><li>asterisk 2</li><li>asterisk 3</li></ul><br>Asterisks loose:<br><br><ul class="listbullet"><li>asterisk 1<br><br></li><li>asterisk 2<br><br></li><li>asterisk 3<br><br></li></ul><br>Pluses tight:<br><br><ul class="listbullet"><li>Plus 1</li><li>Plus 2</li><li>Plus 3</li></ul><br>Pluses loose:<br><br><ul class="listbullet"><li>Plus 1<br><br></li><li>Plus 2<br><br></li><li>Plus 3<br><br></li></ul><br>Minuses tight:<br><br><ul class="listbullet"><li>Minus 1</li><li>Minus 2</li><li>Minus 3</li></ul><br>Minuses loose:<br><br><ul class="listbullet"><li>Minus 1<br><br></li><li>Minus 2<br><br></li><li>Minus 3<br><br></li></ul><br><br><h2>Ordered</h2><br>Tight:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>First</li><li>Second</li><li>Third</li></ol><br>and:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>One</li><li>Two</li><li>Three</li></ol><br>Loose using tabs:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>First<br><br></li><li>Second<br><br></li><li>Third<br><br></li></ol><br>and using spaces:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>One<br><br></li><li>Two<br><br></li><li>Three<br><br></li></ol><br>Multiple paragraphs:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>Item 1, graf one.<br><br>Item 1. graf two. The quick brown fox jumped over the lazy dog's back.<br><br></li><li>Item 2.<br><br></li><li>Item 3.<br><br></li></ol><br><br><h2>Nested</h2><br><ul class="listbullet"><li>Tab<br><ul class="listbullet"><li>Tab<br><ul class="listbullet"><li>Tab</li></ul></li></ul></li></ul><br>Here's another:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>First</li><li>Second:<br><ul class="listbullet"><li>Fee</li><li>Fie</li><li>Foe</li></ul></li><li>Third</li></ol><br>Same thing but with paragraphs:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>First<br><br></li><li>Second:<br><br><ul class="listbullet"><li>Fee</li><li>Fie</li><li>Foe</li></ul></li><li>Third<br><br></li></ol><br><br><h2>Tabs and spaces</h2><br><ul class="listbullet"><li>this is a list item indented with tabs<br><br></li><li>this is a list item indented with spaces<br><br><ul class="listbullet"><li>this is an example list item indented with tabs<br><br></li><li>this is an example list item indented with spaces<br><br></li></ul></li></ul><br><br><h2>Fancy list markers</h2><br><ol class="listdecimal" style="list-style-type: decimal;"><li>begins with 2<br><br></li><li>and now 3<br><br>with a continuation<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>sublist with roman numerals, starting with 4</li><li>more items<br><ol class="listdecimal" style="list-style-type: decimal;"><li>a subsublist</li><li>a subsublist</li></ol></li></ol></li></ol><br>Nesting:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>Upper Alpha<br><ol class="listdecimal" style="list-style-type: decimal;"><li>Upper Roman.<br><ol class="listdecimal" style="list-style-type: decimal;"><li>Decimal start with 6<br><ol class="listdecimal" style="list-style-type: decimal;"><li>Lower alpha with paren</li></ol></li></ol></li></ol></li></ol><br>Autonumbering:<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>Autonumber.</li><li>More.<br><ol class="listdecimal" style="list-style-type: decimal;"><li>Nested.</li></ol></li></ol><br>Should not be a list item:<br><br>M.A.&nbsp;2007<br><br>B. Williams<br><br><hr><br><br><h1>Definition Lists</h1><br>Tight using spaces:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br></dd><br><dt> orange</dt><dd><br>orange fruit<br></dd><br><dt> banana</dt><dd><br>yellow fruit<br></dd></dl><br>Tight using tabs:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br></dd><br><dt> orange</dt><dd><br>orange fruit<br></dd><br><dt> banana</dt><dd><br>yellow fruit<br></dd></dl><br>Loose:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br><br></dd><br><dt> orange</dt><dd><br>orange fruit<br><br></dd><br><dt> banana</dt><dd><br>yellow fruit<br><br></dd></dl><br>Multiple blocks with italics:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> <em>apple</em></dt><dd><br>red fruit<br><br>contains seeds, crisp, pleasant to taste<br><br></dd><br><dt> <em>orange</em></dt><dd><br>orange fruit<br><br><pre><code>{ orange code block }</code></pre><blockquote><br>orange block quote<br><br></blockquote><br><br></dd></dl><br>Multiple definitions, tight:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br>computer<br></dd><br><dt> orange</dt><dd><br>orange fruit<br>bank<br></dd></dl><br>Multiple definitions, loose:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br><br>computer<br><br></dd><br><dt> orange</dt><dd><br>orange fruit<br><br>bank<br><br></dd></dl><br>Blank line after term, indented marker, alternate markers:<br><br><dl class="bb-dl dl-terms-bold"><br><br><dt> apple</dt><dd><br>red fruit<br><br>computer<br><br></dd><br><dt> orange</dt><dd><br>orange fruit<br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>sublist</li><li>sublist</li></ol><br></dd></dl><br><br><h1>HTML Blocks</h1><br>Simple block on one line:<br><br>foo<br>And nested without indentation:<br><br>foo<br><br>bar<br>Interpreted markdown in a table:<br><br>This is <em>emphasized</em><br>And this is <strong>strong</strong><br>Here's a simple block:<br><br>foo<br><br>This should be a code block, though:<br><br><pre><code>&lt;div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;foo<br>&lt;/div&gt;</code></pre>As should this:<br><br><pre><code>&lt;div&gt;foo&lt;/div&gt;</code></pre>Now, nested:<br><br>foo<br>This should just be an HTML comment:<br><br>Multiline:<br><br>Code block:<br><br><pre><code>&lt;!-- Comment --&gt;</code></pre>Just plain comment, with trailing spaces on the line:<br><br>Code:<br><br><pre><code>&lt;hr /&gt;</code></pre>Hr's:<br><br><hr><br><br><h1>Inline Markup</h1><br>This is <em>emphasized</em>, and so <em>is this</em>.<br><br>This is <strong>strong</strong>, and so <strong>is this</strong>.<br><br>An <em><a href="" "="" target="_blank" rel="nofollow noopener">emphasized link</a></em>.<br><br><strong><em>This is strong and em.</em></strong><br><br>So is <strong><em>this</em></strong> word.<br><br><strong><em>This is strong and em.</em></strong><br><br>So is <strong><em>this</em></strong> word.<br><br>This is code: <code class="inline-code">&gt;</code>, <code class="inline-code">$</code>, <code class="inline-code">\</code>, <code class="inline-code">\$</code>, <code class="inline-code">&lt;html&gt;</code>.<br><br><del>This is <em>strikeout</em>.</del><br><br>Superscripts: abcd a<em>hello</em> ahello&nbsp;there.<br><br>Subscripts: H2O, H23O, Hmany&nbsp;of&nbsp;themO.<br><br>These should not be superscripts or subscripts, because of the unescaped spaces: a^b c^d, a~b c~d.<br><br><hr><br><br><h1>Smart quotes, ellipses, dashes</h1><br>"Hello," said the spider. "'Shelob' is my name."<br><br>'A', 'B', and 'C' are letters.<br><br>'Oak,' 'elm,' and 'beech' are names of trees. So is 'pine.'<br><br>'He said, "I want to go."' Were you alive in the 70's?<br><br>Here is some quoted '<code class="inline-code">code</code>' and a "<a href="http://example.com/?foo=1&amp;bar=2" target="_blank" rel="nofollow noopener">quoted link</a>".<br><br>Some dashes: one---two --- three---four --- five.<br><br>Dashes between numbers: 5--7, 255--66, 1987--1999.<br><br>Ellipses...and...and....<br><br><hr><br><br><h1>LaTeX</h1><br><ul class="listbullet"><li></li><li><code class="inline-code">$2+2=4$</code></li><li><code class="inline-code">$x \in y$</code></li><li><code class="inline-code">$\alpha \wedge \omega$</code></li><li><code class="inline-code">$223$</code></li><li><code class="inline-code">$p$</code>-Tree</li><li>Here's some display math: <code>$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$<br></code></li><li>Here's one that has a line break in it: <code class="inline-code">$\alpha + \omega \times x^2$</code>.</li></ul><br>These shouldn't be math:<br><br><ul class="listbullet"><li>To get the famous equation, write <code class="inline-code">$e = mc^2$</code>.</li><li>$22,000 is a <em>lot</em> of money. So is $34,000. (It worked if "lot" is emphasized.)</li><li>Shoes ($20) and socks ($5).</li><li>Escaped <code class="inline-code">$</code>: $73 <em>this should be emphasized</em> 23$.</li></ul><br>Here's a LaTeX table:<br><br><hr><br><br><h1>Special Characters</h1><br>Here is some unicode:<br><br><ul class="listbullet"><li>I hat: Î</li><li>o umlaut: ö</li><li>section: §</li><li>set membership: ∈</li><li>copyright: ©</li></ul><br>AT&amp;T has an ampersand in their name.<br><br>AT&amp;T is another way to write it.<br><br>This &amp; that.<br><br>4 &lt; 5.<br><br>6 &gt; 5.<br><br>Backslash: \<br><br>Backtick: `<br><br>Asterisk: *<br><br>Underscore: _<br><br>Left brace: {<br><br>Right brace: }<br><br>Left bracket: [<br><br>Right bracket: ]<br><br>Left paren: (<br><br>Right paren: )<br><br>Greater-than: &gt;<br><br>Hash: #<br><br>Period: .<br><br>Bang: !<br><br>Plus: +<br><br>Minus: -<br><br><hr><br><br><h1>Links</h1><br><h2>Explicit</h2><br>Just a <a href="" "="" target="_blank" rel="nofollow noopener">URL</a>.<br><br><a href="" "="" target="_blank" rel="nofollow noopener">URL and title</a>.<br><br><a href="" "="" target="_blank" rel="nofollow noopener">URL and title</a>.<br><br><a href="" "="" target="_blank" rel="nofollow noopener">URL and title</a>.<br><br><a href="" "="" target="_blank" rel="nofollow noopener">URL and title</a><br><br><a href="" "="" target="_blank" rel="nofollow noopener">URL and title</a><br><br><a href="" "="" target="_blank" rel="nofollow noopener">with_underscore</a><br><br><a href="mailto:[email protected]" target="_blank" rel="nofollow noopener">Email link</a><br><br><a href="" "="" target="_blank" rel="nofollow noopener">Empty</a>.<br><br><h2>Reference</h2><br>Foo <a href="" "="" target="_blank" rel="nofollow noopener">bar</a>.<br><br>With <a href="" "="" target="_blank" rel="nofollow noopener">embedded [brackets]</a>.<br><br><a href="" "="" target="_blank" rel="nofollow noopener">b</a> by itself should be a link.<br><br>Indented <a href="" "="" target="_blank" rel="nofollow noopener">once</a>.<br><br>Indented <a href="" "="" target="_blank" rel="nofollow noopener">twice</a>.<br><br>Indented <a href="" "="" target="_blank" rel="nofollow noopener">thrice</a>.<br><br>This should [not][] be a link.<br><br><pre><code>[not]: /url</code></pre>Foo <a href="" "="" target="_blank" rel="nofollow noopener">bar</a>.<br><br>Foo <a href="" "="" target="_blank" rel="nofollow noopener">biz</a>.<br><br><h2>With ampersands</h2><br>Here's a <a href="http://example.com/?foo=1&amp;bar=2" target="_blank" rel="nofollow noopener">link with an ampersand in the URL</a>.<br><br>Here's a link with an amersand in the link text: <a href="http://att.com/" target="_blank" rel="nofollow noopener">AT&amp;T</a>.<br><br>Here's an <a href="" "="" target="_blank" rel="nofollow noopener">inline link</a>.<br><br>Here's an <a href="" "="" target="_blank" rel="nofollow noopener">inline link in pointy braces</a>.<br><br><h2>Autolinks</h2><br>With an ampersand: <a href="http://example.com/?foo=1&amp;bar=2" target="_blank" rel="nofollow noopener">http://example.com/?foo=1&amp;bar=2</a><br><br><ul class="listbullet"><li>In a list?</li><li><a href="http://example.com/" target="_blank" rel="nofollow noopener">http://example.com/</a></li><li>It should.</li></ul><br>An e-mail address: <a href="" "="" target="_blank" rel="nofollow noopener">[email protected]</a><br><br><blockquote><br>Blockquoted: <a href="http://example.com/" target="_blank" rel="nofollow noopener">http://example.com/</a><br><br></blockquote><br><br>Auto-links should not occur here: <pre><code>&lt;http://example.com/&gt;<br>or here: &lt;http://example.com/&gt;</code></pre><br><hr><br><br><h1>Images</h1><br>From "Voyage dans la Lune" by Georges Melies (1902):<br><br><img style="max-width: 100%;" alt="lalune" title="Voyage dans la Lune" class="" src="" "=""><br>lalune<br>Here is a movie <img style="max-width: 100%;" alt="movie" title="" class="" src="" "=""> icon.<br><br><hr><br><br><h1>Footnotes</h1><br>Here is a footnote reference,(1) and another.(2) This should <em>not</em> be a footnote reference, because it contains a space.[^my note] Here is an inline note.(3)<br><br><blockquote><br>Notes can go in quotes.(4)<br><br></blockquote><br><br><ol class="listdecimal" style="list-style-type: decimal;"><li>And in list items.(5)</li></ol><br>This paragraph should not be part of the note, as it is not indented.<br><br><hr><br><br>(1) Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<br><br>(2) Here's the long note. This one contains multiple blocks.<br><br>Subsequent blocks are indented to show that they belong to the footnote (as with list items).<br><br><pre><code>&nbsp;&nbsp;{ &lt;code&gt; }</code></pre>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<br><br>(3) This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com" target="_blank" rel="nofollow noopener">links</a> and <code class="inline-code">]</code> verbatim characters, as well as [bracketed text].<br><br>(4) In quote.<br><br>(5) In list.
                    </div>
                </div>

Tables

rendered contents (image)

hubzilla_tables

rendered contents (html)

<div
  class="p-2 wall-item-content clearfix divmore divmore_checked"
  id="wall-item-content-85865956"
  style="max-height: none; height: 100%"
  data-readmore=""
  aria-expanded="true"
>
  <div class="wall-item-body e-content" id="wall-item-body-85865956">
    Simple table with caption:<br /><br />
    <table>
      <tbody>
        <tr>
          <th>Right</th>
          <th>Left</th>
          <th>Center</th>
          <th>Default</th>
        </tr>
        <tr>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
    Simple table without caption:<br /><br />
    <table>
      <tbody>
        <tr>
          <th>Right</th>
          <th>Left</th>
          <th>Center</th>
          <th>Default</th>
        </tr>
        <tr>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
    Simple table indented two spaces:<br /><br />
    <table>
      <tbody>
        <tr>
          <th>Right</th>
          <th>Left</th>
          <th>Center</th>
          <th>Default</th>
        </tr>
        <tr>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
    Multiline table with caption:<br /><br />
    <table>
      <tbody>
        <tr>
          <th>Centered Header</th>
          <th>Left Aligned</th>
          <th>Right Aligned</th>
          <th>Default aligned</th>
        </tr>
        <tr>
          <td>First</td>
          <td>row</td>
          <td>12.0</td>
          <td>Example of a row that spans multiple lines.</td>
        </tr>
        <tr>
          <td>Second</td>
          <td>row</td>
          <td>5.0</td>
          <td>Here's another one. Note the blank line between rows.</td>
        </tr>
      </tbody>
    </table>
    Multiline table without caption:<br /><br />
    <table>
      <tbody>
        <tr>
          <th>Centered Header</th>
          <th>Left Aligned</th>
          <th>Right Aligned</th>
          <th>Default aligned</th>
        </tr>
        <tr>
          <td>First</td>
          <td>row</td>
          <td>12.0</td>
          <td>Example of a row that spans multiple lines.</td>
        </tr>
        <tr>
          <td>Second</td>
          <td>row</td>
          <td>5.0</td>
          <td>Here's another one. Note the blank line between rows.</td>
        </tr>
      </tbody>
    </table>
    Table without column headers:<br /><br />
    <table>
      <tbody>
        <tr>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
    Multiline table without column headers:<br /><br />
    <table>
      <tbody>
        <tr>
          <td>First</td>
          <td>row</td>
          <td>12.0</td>
          <td>Example of a row that spans multiple lines.</td>
        </tr>
        <tr>
          <td>Second</td>
          <td>row</td>
          <td>5.0</td>
          <td>Here's another one. Note the blank line between rows.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

reptee · 2025-10-25T14:11:18Z

phpBB

rendered contents (image)

phpBB_writer

rendered contents (html)

<div class="post bg2" id="preview">
  <div class="inner">
    <div class="postbody">
      <h3>Preview:</h3>

      <div class="content">
        This is a set of tests for pandoc. Most of them are adapted from John
        Gruber's markdown test suite.<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Headers</strong></span
        ><br />
        <br />
        <strong class="text-strong"
          >Level 2 with an
          <a href="/url" class="postlink">embedded link</a></strong
        ><br />
        <br />
        <span style="text-decoration: underline"
          >Level 3 with <em class="text-italics">emphasis</em></span
        ><br />
        <br />
        Level 4<br />
        <br />
        Level 5<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Level 1</strong></span
        ><br />
        <br />
        <strong class="text-strong"
          >Level 2 with <em class="text-italics">emphasis</em></strong
        ><br />
        <br />
        <span style="text-decoration: underline">Level 3</span><br />
        <br />
        with no blank line<br />
        <br />
        <strong class="text-strong">Level 2</strong><br />
        <br />
        with no blank line<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Paragraphs</strong></span
        ><br />
        <br />
        Here's a regular paragraph.<br />
        <br />
        In Markdown 1.0.0 and earlier. Version 8. This line turns into a list
        item. Because a hard-wrapped line in the middle of a paragraph looked
        like a list item.<br />
        <br />
        Here's one with a bullet. * criminey.<br />
        <br />
        There should be a hard line break<br />
        here.<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Block Quotes</strong></span
        ><br />
        <br />
        E-mail style:<br />

        <blockquote class="uncited">
          <div>This is a block quote. It is pretty short.<br /></div>
        </blockquote>

        <blockquote class="uncited">
          <div>
            Code in a block quote:<br />

            <div class="codebox">
              <p>
                Code:
                <a href="#" onclick="selectCode(this); return false;"
                  >Select all</a
                >
              </p>
              <pre><code class="hljs perl"><span class="hljs-function"><span class="hljs-keyword">sub</span> <span class="hljs-title">status</span> </span>{
    <span class="hljs-keyword">print</span> <span class="hljs-string">"working"</span>;
}
</code></pre>
            </div>
            A list:<br />

            <ol style="list-style-type: decimal">
              <li>item one</li>
              <li>item two</li>
            </ol>
            Nested block quotes:<br />

            <blockquote class="uncited">
              <div>nested<br /></div>
            </blockquote>

            <blockquote class="uncited">
              <div>nested<br /></div>
            </blockquote>
          </div>
        </blockquote>

        This should not be a block quote: 2 &gt; 1.<br />
        <br />
        And a following paragraph.<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Code Blocks</strong></span
        ><br />
        <br />
        Code:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs perl">---- (should be four hyphens)

<span class="hljs-function"><span class="hljs-keyword">sub</span> <span class="hljs-title">status</span> </span>{
    <span class="hljs-keyword">print</span> <span class="hljs-string">"working"</span>;
}

this code block is indented by one tab
</code></pre>
        </div>
        And:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs coffeescript">    <span class="hljs-keyword">this</span> code block <span class="hljs-keyword">is</span> indented <span class="hljs-keyword">by</span> two tabs

These should <span class="hljs-keyword">not</span> be escaped:  \$ \\ \&gt; \[ \{
</code></pre>
        </div>

        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Lists</strong></span
        ><br />
        <br />
        <strong class="text-strong">Unordered</strong><br />
        <br />
        Asterisks tight:<br />

        <ul>
          <li>asterisk 1</li>
          <li>asterisk 2</li>
          <li>asterisk 3</li>
        </ul>
        Asterisks loose:<br />

        <ul>
          <li>asterisk 1</li>

          <li>asterisk 2</li>

          <li>asterisk 3</li>
        </ul>
        Pluses tight:<br />

        <ul>
          <li>Plus 1</li>
          <li>Plus 2</li>
          <li>Plus 3</li>
        </ul>
        Pluses loose:<br />

        <ul>
          <li>Plus 1</li>

          <li>Plus 2</li>

          <li>Plus 3</li>
        </ul>
        Minuses tight:<br />

        <ul>
          <li>Minus 1</li>
          <li>Minus 2</li>
          <li>Minus 3</li>
        </ul>
        Minuses loose:<br />

        <ul>
          <li>Minus 1</li>

          <li>Minus 2</li>

          <li>Minus 3</li>
        </ul>

        <strong class="text-strong">Ordered</strong><br />
        <br />
        Tight:<br />

        <ol style="list-style-type: decimal">
          <li>First</li>
          <li>Second</li>
          <li>Third</li>
        </ol>
        and:<br />

        <ol style="list-style-type: decimal">
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
        </ol>
        Loose using tabs:<br />

        <ol style="list-style-type: decimal">
          <li>First</li>

          <li>Second</li>

          <li>Third</li>
        </ol>
        and using spaces:<br />

        <ol style="list-style-type: decimal">
          <li>One</li>

          <li>Two</li>

          <li>Three</li>
        </ol>
        Multiple paragraphs:<br />

        <ol style="list-style-type: decimal">
          <li>
            Item 1, graf one.<br />
            <br />
            Item 1. graf two. The quick brown fox jumped over the lazy dog's
            back.
          </li>

          <li>Item 2.</li>

          <li>Item 3.</li>
        </ol>

        <strong class="text-strong">Nested</strong><br />

        <ul>
          <li>
            Tab
            <ul>
              <li>
                Tab
                <ul>
                  <li>Tab</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        Here's another:<br />

        <ol style="list-style-type: decimal">
          <li>First</li>
          <li>
            Second:
            <ul>
              <li>Fee</li>
              <li>Fie</li>
              <li>Foe</li>
            </ul>
          </li>
          <li>Third</li>
        </ol>
        Same thing but with paragraphs:<br />

        <ol style="list-style-type: decimal">
          <li>First</li>

          <li>
            Second:<br />

            <ul>
              <li>Fee</li>
              <li>Fie</li>
              <li>Foe</li>
            </ul>
          </li>
          <li>Third</li>
        </ol>

        <strong class="text-strong">Tabs and spaces</strong><br />

        <ul>
          <li>this is a list item indented with tabs</li>

          <li>
            this is a list item indented with spaces<br />

            <ul>
              <li>this is an example list item indented with tabs</li>

              <li>this is an example list item indented with spaces</li>
            </ul>
          </li>
        </ul>

        <strong class="text-strong">Fancy list markers</strong><br />

        <ol style="list-style-type: decimal">
          <li>begins with 2</li>

          <li>
            and now 3<br />
            <br />
            with a continuation<br />

            <ol style="list-style-type: lower-roman">
              <li>sublist with roman numerals, starting with 4</li>
              <li>
                more items
                <ol style="list-style-type: upper-alpha">
                  <li>a subsublist</li>
                  <li>a subsublist</li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
        Nesting:<br />

        <ol style="list-style-type: upper-alpha">
          <li>
            Upper Alpha
            <ol style="list-style-type: upper-roman">
              <li>
                Upper Roman.
                <ol style="list-style-type: decimal">
                  <li>
                    Decimal start with 6
                    <ol style="list-style-type: lower-alpha">
                      <li>Lower alpha with paren</li>
                    </ol>
                  </li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
        Autonumbering:<br />

        <ol style="list-style-type: decimal">
          <li>Autonumber.</li>
          <li>
            More.
            <ol style="list-style-type: decimal">
              <li>Nested.</li>
            </ol>
          </li>
        </ol>
        Should not be a list item:<br />
        <br />
        M.A.&nbsp;2007<br />
        <br />
        B. Williams<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Definition Lists</strong></span
        ><br />
        <br />
        Tight using spaces:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>
        </ul>
        orange
        <ul>
          <li>orange fruit</li>
        </ul>
        banana
        <ul>
          <li>yellow fruit</li>
        </ul>
        Tight using tabs:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>
        </ul>
        orange
        <ul>
          <li>orange fruit</li>
        </ul>
        banana
        <ul>
          <li>yellow fruit</li>
        </ul>
        Loose:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>
        </ul>
        orange
        <ul>
          <li>orange fruit</li>
        </ul>
        banana
        <ul>
          <li>yellow fruit</li>
        </ul>
        Multiple blocks with italics:<br />
        <br />
        <em class="text-italics">apple</em>
        <ul>
          <li>
            red fruit<br />
            <br />
            contains seeds, crisp, pleasant to taste
          </li>
        </ul>
        <em class="text-italics">orange</em>
        <ul>
          <li>
            orange fruit<br />

            <div class="codebox">
              <p>
                Code:
                <a href="#" onclick="selectCode(this); return false;"
                  >Select all</a
                >
              </p>
              <pre><code class="hljs">{ orange code block }
</code></pre>
            </div>
            <blockquote class="uncited">
              <div>orange block quote<br /></div>
            </blockquote>
          </li>
        </ul>
        Multiple definitions, tight:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>
          <li>computer</li>
        </ul>
        orange
        <ul>
          <li>orange fruit</li>
          <li>bank</li>
        </ul>
        Multiple definitions, loose:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>

          <li>computer</li>
        </ul>
        orange
        <ul>
          <li>orange fruit</li>

          <li>bank</li>
        </ul>
        Blank line after term, indented marker, alternate markers:<br />
        <br />
        apple
        <ul>
          <li>red fruit</li>

          <li>computer</li>
        </ul>
        orange
        <ul>
          <li>
            orange fruit<br />

            <ol style="list-style-type: decimal">
              <li>sublist</li>
              <li>sublist</li>
            </ol>
          </li>
        </ul>

        <span style="text-decoration: underline"
          ><strong class="text-strong">HTML Blocks</strong></span
        ><br />
        <br />
        Simple block on one line:<br />
        <br />
        foo<br />
        And nested without indentation:<br />
        <br />
        foo<br />
        <br />
        bar<br />
        Interpreted markdown in a table:<br />
        <br />
        This is <em class="text-italics">emphasized</em><br />
        And this is <strong class="text-strong">strong</strong><br />
        Here's a simple block:<br />
        <br />
        foo<br />
        <br />
        This should be a code block, though:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs apache"><span class="hljs-section">&lt;div&gt;</span>
    <span class="hljs-attribute">foo</span>
<span class="hljs-section">&lt;/div&gt;</span>
</code></pre>
        </div>
        As should this:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>foo<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
        </div>
        Now, nested:<br />
        <br />
        foo<br />
        This should just be an HTML comment:<br />
        <br />
        Multiline:<br />
        <br />
        Code block:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Comment --&gt;</span>
</code></pre>
        </div>
        Just plain comment, with trailing spaces on the line:<br />
        <br />
        Code:<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs apache"><span class="hljs-section">&lt;hr /&gt;</span>
</code></pre>
        </div>
        Hr's:<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Inline Markup</strong></span
        ><br />
        <br />
        This is <em class="text-italics">emphasized</em>, and so
        <em class="text-italics">is this</em>.<br />
        <br />
        This is <strong class="text-strong">strong</strong>, and so
        <strong class="text-strong">is this</strong>.<br />
        <br />
        An
        <em class="text-italics"
          ><a href="/url" class="postlink">emphasized link</a></em
        >.<br />
        <br />
        <strong class="text-strong"
          ><em class="text-italics">This is strong and em.</em></strong
        ><br />
        <br />
        So is
        <strong class="text-strong"><em class="text-italics">this</em></strong>
        word.<br />
        <br />
        <strong class="text-strong"
          ><em class="text-italics">This is strong and em.</em></strong
        ><br />
        <br />
        So is
        <strong class="text-strong"><em class="text-italics">this</em></strong>
        word.<br />
        <br />
        This is code: &gt;, $, \, \$, &lt;html&gt;.<br />
        <br />
        <span style="text-decoration: line-through"
          >This is <em class="text-italics">strikeout</em>.</span
        ><br />
        <br />
        Superscripts: abcd a<em class="text-italics">hello</em>
        ahello&nbsp;there.<br />
        <br />
        Subscripts: H2O, H23O, Hmany&nbsp;of&nbsp;themO.<br />
        <br />
        These should not be superscripts or subscripts, because of the unescaped
        spaces: a^b c^d, a~b c~d.<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong"
            >Smart quotes, ellipses, dashes</strong
          ></span
        ><br />
        <br />
        "Hello," said the spider. "'Shelob' is my name."<br />
        <br />
        'A', 'B', and 'C' are letters.<br />
        <br />
        'Oak,' 'elm,' and 'beech' are names of trees. So is 'pine.'<br />
        <br />
        'He said, "I want to go."' Were you alive in the 70's?<br />
        <br />
        Here is some quoted 'code' and a "<a
          href="http://example.com/?foo=1&amp;bar=2"
          class="postlink"
          >quoted link</a
        >".<br />
        <br />
        Some dashes: one---two --- three---four --- five.<br />
        <br />
        Dashes between numbers: 5--7, 255--66, 1987--1999.<br />
        <br />
        Ellipses...and...and....<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">LaTeX</strong></span
        ><br />

        <ul>
          <li></li>
          <li>$2+2=4$</li>
          <li>$x \in y$</li>
          <li>$\alpha \wedge \omega$</li>
          <li>$223$</li>
          <li>$p$-Tree</li>
          <li>
            Here's some display math:
            <div class="codebox">
              <p>
                Code:
                <a href="#" onclick="selectCode(this); return false;"
                  >Select all</a
                >
              </p>
              <pre><code class="latex hljs ruby">$$\frac{d}{dx}f(x)=\lim<span class="hljs-number">_</span>{h\to <span class="hljs-number">0</span>}\frac{f(x+h)-f(x)}{h}$$
</code></pre>
            </div>
          </li>
          <li>
            Here's one that has a line break in it: $\alpha + \omega \times
            x^2$.
          </li>
        </ul>
        These shouldn't be math:<br />

        <ul>
          <li>To get the famous equation, write $e = mc^2$.</li>
          <li>
            $22,000 is a <em class="text-italics">lot</em> of money. So is
            $34,000. (It worked if "lot" is emphasized.)
          </li>
          <li>Shoes ($20) and socks ($5).</li>
          <li>
            Escaped $: $73
            <em class="text-italics">this should be emphasized</em> 23$.
          </li>
        </ul>
        Here's a LaTeX table:<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Special Characters</strong></span
        ><br />
        <br />
        Here is some unicode:<br />

        <ul>
          <li>I hat: Î</li>
          <li>o umlaut: ö</li>
          <li>section: §</li>
          <li>set membership: ∈</li>
          <li>copyright: ©</li>
        </ul>
        AT&amp;T has an ampersand in their name.<br />
        <br />
        AT&amp;T is another way to write it.<br />
        <br />
        This &amp; that.<br />
        <br />
        4 &lt; 5.<br />
        <br />
        6 &gt; 5.<br />
        <br />
        Backslash: \<br />
        <br />
        Backtick: `<br />
        <br />
        Asterisk: *<br />
        <br />
        Underscore: _<br />
        <br />
        Left brace: {<br />
        <br />
        Right brace: }<br />
        <br />
        Left bracket: [<br />
        <br />
        Right bracket: ]<br />
        <br />
        Left paren: (<br />
        <br />
        Right paren: )<br />
        <br />
        Greater-than: &gt;<br />
        <br />
        Hash: #<br />
        <br />
        Period: .<br />
        <br />
        Bang: !<br />
        <br />
        Plus: +<br />
        <br />
        Minus: -<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Links</strong></span
        ><br />
        <br />
        <strong class="text-strong">Explicit</strong><br />
        <br />
        Just a <a href="/url/" class="postlink">URL</a>.<br />
        <br />
        <a href="/url/" class="postlink">URL and title</a>.<br />
        <br />
        <a href="/url/" class="postlink">URL and title</a>.<br />
        <br />
        <a href="/url/" class="postlink">URL and title</a>.<br />
        <br />
        <a href="/url/" class="postlink">URL and title</a><br />
        <br />
        <a href="/url/" class="postlink">URL and title</a><br />
        <br />
        <a href="/url/with_underscore" class="postlink">with_underscore</a
        ><br />
        <br />
        <a href="mailto:[email protected]">Email link</a><br />
        <br />
        <a href="Empty" class="postlink">Empty</a>.<br />
        <br />
        <strong class="text-strong">Reference</strong><br />
        <br />
        Foo <a href="/url/" class="postlink">bar</a>.<br />
        <br />
        With <a href="/url/" class="postlink">embedded [brackets]</a>.<br />
        <br />
        <a href="/url/" class="postlink">b</a> by itself should be a link.<br />
        <br />
        Indented <a href="/url" class="postlink">once</a>.<br />
        <br />
        Indented <a href="/url" class="postlink">twice</a>.<br />
        <br />
        Indented <a href="/url" class="postlink">thrice</a>.<br />
        <br />
        This should [not][] be a link.<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs markdown">[<span class="hljs-symbol">not</span>]: <span class="hljs-link">/url</span>
</code></pre>
        </div>
        Foo <a href="/url/" class="postlink">bar</a>.<br />
        <br />
        Foo <a href="/url/" class="postlink">biz</a>.<br />
        <br />
        <strong class="text-strong">With ampersands</strong><br />
        <br />
        Here's a
        <a href="http://example.com/?foo=1&amp;bar=2" class="postlink"
          >link with an ampersand in the URL</a
        >.<br />
        <br />
        Here's a link with an amersand in the link text:
        <a href="http://att.com/" class="postlink">AT&amp;T</a>.<br />
        <br />
        Here's an
        <a href="/script?foo=1&amp;bar=2" class="postlink">inline link</a
        >.<br />
        <br />
        Here's an
        <a href="/script?foo=1&amp;bar=2" class="postlink"
          >inline link in pointy braces</a
        >.<br />
        <br />
        <strong class="text-strong">Autolinks</strong><br />
        <br />
        With an ampersand:
        <a href="http://example.com/?foo=1&amp;bar=2" class="postlink"
          >http://example.com/?foo=1&amp;bar=2</a
        ><br />

        <ul>
          <li>In a list?</li>
          <li>
            <a href="http://example.com/" class="postlink"
              >http://example.com/</a
            >
          </li>
          <li>It should.</li>
        </ul>
        An e-mail address:
        <a href="mailto:[email protected]">[email protected]</a><br />

        <blockquote class="uncited">
          <div>
            Blockquoted:
            <a href="http://example.com/" class="postlink"
              >http://example.com/</a
            ><br />
          </div>
        </blockquote>

        Auto-links should not occur here: &lt;<a
          href="http://example.com/"
          class="postlink"
          >http://example.com/</a
        >&gt;<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs cpp"><span class="hljs-keyword">or</span> here: &lt;http:<span class="hljs-comment">//example.com/&gt;</span>
</code></pre>
        </div>

        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Images</strong></span
        ><br />
        <br />
        From "Voyage dans la Lune" by Georges Melies (1902):<br />
        <br />
        <img src="lalune.jpg" class="postimage" alt="Image" /><br />
        lalune<br />
        Here is a movie
        <img src="movie.jpg" class="postimage" alt="Image" /> icon.<br />
        <br />
        * * *<br />
        <br />
        <span style="text-decoration: underline"
          ><strong class="text-strong">Footnotes</strong></span
        ><br />
        <br />
        Here is a footnote reference,(1) and another.(2) This should
        <em class="text-italics">not</em> be a footnote reference, because it
        contains a space.[^my note] Here is an inline note.(3)<br />

        <blockquote class="uncited">
          <div>Notes can go in quotes.(4)<br /></div>
        </blockquote>

        <ol style="list-style-type: decimal">
          <li>And in list items.(5)</li>
        </ol>
        This paragraph should not be part of the note, as it is not indented.<br />
        <br />
        * * *<br />
        <br />
        (1) Here is the footnote. It can go anywhere after the footnote
        reference. It need not be placed at the end of the document.<br />
        <br />
        (2) Here's the long note. This one contains multiple blocks.<br />
        <br />
        Subsequent blocks are indented to show that they belong to the footnote
        (as with list items).<br />

        <div class="codebox">
          <p>
            Code:
            <a href="#" onclick="selectCode(this); return false;">Select all</a>
          </p>
          <pre><code class="hljs xml">  { <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> }
</code></pre>
        </div>
        If you want, you can indent every line, but you can also be lazy and
        just indent the first line of each block.<br />
        <br />
        (3) This is <em class="text-italics">easier</em> to type. Inline notes
        may contain <a href="http://google.com" class="postlink">links</a> and ]
        verbatim characters, as well as [bracketed text].<br />
        <br />
        (4) In quote.<br />
        <br />
        (5) In list.
      </div>
    </div>
  </div>
</div>

Steam

Writer

rendered contents (image)

steam_writer

rendered contents (html)

<div class="content">
  This is a set of tests for pandoc. Most of them are adapted from John Gruber's
  markdown test suite.<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Headers</div>
  <br />
  <div class="bb_h2">
    Level 2 with an
    <span
      class="bb_removedlink"
      data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
      >{LINK REMOVED}</span
    ><a href="#" class="collapsed_link" style="display: none">embedded link</a>
  </div>
  <br />
  <div class="bb_h3">Level 3 with <i>emphasis</i></div>
  <br />Level 4<br /><br />Level 5<br /><br />
  <div class="bb_h1">Level 1</div>
  <br />
  <div class="bb_h2">Level 2 with <i>emphasis</i></div>
  <br />
  <div class="bb_h3">Level 3</div>
  <br />with no blank line<br /><br />
  <div class="bb_h2">Level 2</div>
  <br />with no blank line<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Paragraphs</div>
  <br />Here's a regular paragraph.<br /><br />In Markdown 1.0.0 and earlier.
  Version 8. This line turns into a list item. Because a hard-wrapped line in
  the middle of a paragraph looked like a list item.<br /><br />Here's one with
  a bullet. * criminey.<br /><br />There should be a hard line break<br />here.<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Block Quotes</div>
  <br />E-mail style:<br /><br />
  <blockquote class="bb_blockquote">
    This is a block quote. It is pretty short.
  </blockquote>
  <br />
  <blockquote class="bb_blockquote">
    Code in a block quote:<br /><br />
    <div class="bb_code">sub status { print "working"; }</div>
    A list:<br /><br />
    <ol>
      <li>item one<br /></li>
      <li>item two</li>
    </ol>
    Nested block quotes:<br /><br />
    <blockquote class="bb_blockquote">nested</blockquote>
    <br />
    <blockquote class="bb_blockquote">nested</blockquote>
  </blockquote>
  <br />This should not be a block quote: 2 &gt; 1.<br /><br />And a following
  paragraph.<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Code Blocks</div>
  <br />Code:<br /><br />
  <div class="bb_code">
    ---- (should be four hyphens) sub status { print "working"; } this code
    block is indented by one tab
  </div>
  And:<br /><br />
  <div class="bb_code">
    this code block is indented by two tabs These should not be escaped: \$ \\
    \&gt; \[ \{
  </div>
  <br />
  <hr />
  <br /><br />
  <div class="bb_h1">Lists</div>
  <br />
  <div class="bb_h2">Unordered</div>
  <br />Asterisks tight:<br /><br />
  <ul class="bb_ul">
    <li>asterisk 1<br /></li>
    <li>asterisk 2<br /></li>
    <li>asterisk 3</li>
  </ul>
  Asterisks loose:<br /><br />
  <ul class="bb_ul">
    <li>asterisk 1<br /><br /></li>
    <li>asterisk 2<br /><br /></li>
    <li>asterisk 3</li>
  </ul>
  Pluses tight:<br /><br />
  <ul class="bb_ul">
    <li>Plus 1<br /></li>
    <li>Plus 2<br /></li>
    <li>Plus 3</li>
  </ul>
  Pluses loose:<br /><br />
  <ul class="bb_ul">
    <li>Plus 1<br /><br /></li>
    <li>Plus 2<br /><br /></li>
    <li>Plus 3</li>
  </ul>
  Minuses tight:<br /><br />
  <ul class="bb_ul">
    <li>Minus 1<br /></li>
    <li>Minus 2<br /></li>
    <li>Minus 3</li>
  </ul>
  Minuses loose:<br /><br />
  <ul class="bb_ul">
    <li>Minus 1<br /><br /></li>
    <li>Minus 2<br /><br /></li>
    <li>Minus 3</li>
  </ul>
  <br />
  <div class="bb_h2">Ordered</div>
  <br />Tight:<br /><br />
  <ol>
    <li>First<br /></li>
    <li>Second<br /></li>
    <li>Third</li>
  </ol>
  and:<br /><br />
  <ol>
    <li>One<br /></li>
    <li>Two<br /></li>
    <li>Three</li>
  </ol>
  Loose using tabs:<br /><br />
  <ol>
    <li>First<br /><br /></li>
    <li>Second<br /><br /></li>
    <li>Third</li>
  </ol>
  and using spaces:<br /><br />
  <ol>
    <li>One<br /><br /></li>
    <li>Two<br /><br /></li>
    <li>Three</li>
  </ol>
  Multiple paragraphs:<br /><br />
  <ol>
    <li>
      Item 1, graf one.<br /><br />Item 1. graf two. The quick brown fox jumped
      over the lazy dog's back.<br /><br />
    </li>
    <li>Item 2.<br /><br /></li>
    <li>Item 3.</li>
  </ol>
  <br />
  <div class="bb_h2">Nested</div>
  <br />
  <ul class="bb_ul">
    <li>
      Tab<br />
      <ul class="bb_ul">
        <li>
          Tab<br />
          <ul class="bb_ul">
            <li>Tab</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  Here's another:<br /><br />
  <ol>
    <li>First<br /></li>
    <li>
      Second:<br />
      <ul class="bb_ul">
        <li>Fee<br /></li>
        <li>Fie<br /></li>
        <li>Foe</li>
      </ul>
    </li>
    <li>Third</li>
  </ol>
  Same thing but with paragraphs:<br /><br />
  <ol>
    <li>First<br /><br /></li>
    <li>
      Second:<br /><br />
      <ul class="bb_ul">
        <li>Fee<br /></li>
        <li>Fie<br /></li>
        <li>Foe</li>
      </ul>
    </li>
    <li>Third</li>
  </ol>
  <br />
  <div class="bb_h2">Tabs and spaces</div>
  <br />
  <ul class="bb_ul">
    <li>this is a list item indented with tabs<br /><br /></li>
    <li>
      this is a list item indented with spaces<br /><br />
      <ul class="bb_ul">
        <li>this is an example list item indented with tabs<br /><br /></li>
        <li>this is an example list item indented with spaces</li>
      </ul>
    </li>
  </ul>
  <br />
  <div class="bb_h2">Fancy list markers</div>
  <br />
  <ol>
    <li>begins with 2<br /><br /></li>
    <li>
      and now 3<br /><br />with a continuation<br /><br />
      <ol>
        <li>sublist with roman numerals, starting with 4<br /></li>
        <li>
          more items<br />
          <ol>
            <li>a subsublist<br /></li>
            <li>a subsublist</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  Nesting:<br /><br />
  <ol>
    <li>
      Upper Alpha<br />
      <ol>
        <li>
          Upper Roman.<br />
          <ol>
            <li>
              Decimal start with 6<br />
              <ol>
                <li>Lower alpha with paren</li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  Autonumbering:<br /><br />
  <ol>
    <li>Autonumber.<br /></li>
    <li>
      More.<br />
      <ol>
        <li>Nested.</li>
      </ol>
    </li>
  </ol>
  Should not be a list item:<br /><br />M.A.&nbsp;2007<br /><br />B. Williams<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Definition Lists</div>
  <br />Tight using spaces:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>orange fruit</li>
  </ul>
  banana<br />
  <ul class="bb_ul">
    <li>yellow fruit</li>
  </ul>
  Tight using tabs:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>orange fruit</li>
  </ul>
  banana<br />
  <ul class="bb_ul">
    <li>yellow fruit</li>
  </ul>
  Loose:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>orange fruit</li>
  </ul>
  banana<br />
  <ul class="bb_ul">
    <li>yellow fruit</li>
  </ul>
  Multiple blocks with italics:<br /><br /><i>apple</i><br />
  <ul class="bb_ul">
    <li>red fruit<br /><br />contains seeds, crisp, pleasant to taste</li>
  </ul>
  <i>orange</i><br />
  <ul class="bb_ul">
    <li>
      orange fruit<br /><br />
      <div class="bb_code">{ orange code block }</div>
      <blockquote class="bb_blockquote">orange block quote</blockquote>
    </li>
  </ul>
  Multiple definitions, tight:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit<br /></li>
    <li>computer</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>orange fruit<br /></li>
    <li>bank</li>
  </ul>
  Multiple definitions, loose:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit<br /><br /></li>
    <li>computer</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>orange fruit<br /><br /></li>
    <li>bank</li>
  </ul>
  Blank line after term, indented marker, alternate markers:<br /><br />apple<br />
  <ul class="bb_ul">
    <li>red fruit<br /><br /></li>
    <li>computer</li>
  </ul>
  orange<br />
  <ul class="bb_ul">
    <li>
      orange fruit<br /><br />
      <ol>
        <li>sublist<br /></li>
        <li>sublist</li>
      </ol>
    </li>
  </ul>
  <br />
  <div class="bb_h1">HTML Blocks</div>
  <br />Simple block on one line:<br /><br />foo<br />And nested without
  indentation:<br /><br />foo<br /><br />bar<br />Interpreted markdown in a
  table:<br /><br />This is <i>emphasized</i><br />And this is <b>strong</b
  ><br />Here's a simple block:<br /><br />foo<br /><br />This should be a code
  block, though:<br /><br />
  <div class="bb_code">&lt;div&gt; foo &lt;/div&gt;</div>
  As should this:<br /><br />
  <div class="bb_code">&lt;div&gt;foo&lt;/div&gt;</div>
  Now, nested:<br /><br />foo<br />This should just be an HTML comment:<br /><br />Multiline:<br /><br />Code
  block:<br /><br />
  <div class="bb_code">&lt;!-- Comment --&gt;</div>
  Just plain comment, with trailing spaces on the line:<br /><br />Code:<br /><br />
  <div class="bb_code">&lt;hr /&gt;</div>
  Hr's:<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Inline Markup</div>
  <br />This is <i>emphasized</i>, and so <i>is this</i>.<br /><br />This is
  <b>strong</b>, and so <b>is this</b>.<br /><br />An
  <i
    ><span
      class="bb_removedlink"
      data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
      >{LINK REMOVED}</span
    ><a href="#" class="collapsed_link" style="display: none"
      >emphasized link</a
    ></i
  >.<br /><br /><b><i>This is strong and em.</i></b
  ><br /><br />So is <b><i>this</i></b> word.<br /><br /><b
    ><i>This is strong and em.</i></b
  ><br /><br />So is <b><i>this</i></b> word.<br /><br />This is code: &gt;, $,
  \, \$, &lt;html&gt;.<br /><br /><span class="bb_strike"
    >This is <i>strikeout</i>.</span
  ><br /><br />Superscripts: abcd a<i>hello</i>
  ahello&nbsp;there.<br /><br />Subscripts: H2O, H23O,
  Hmany&nbsp;of&nbsp;themO.<br /><br />These should not be superscripts or
  subscripts, because of the unescaped spaces: a^b c^d, a~b c~d.<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Smart quotes, ellipses, dashes</div>
  <br />"Hello," said the spider. "'Shelob' is my name."<br /><br />'A', 'B',
  and 'C' are letters.<br /><br />'Oak,' 'elm,' and 'beech' are names of trees.
  So is 'pine.'<br /><br />'He said, "I want to go."' Were you alive in the
  70's?<br /><br />Here is some quoted 'code' and a "<span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">quoted link</a
  >".<br /><br />Some dashes: one---two --- three---four --- five.<br /><br />Dashes
  between numbers: 5--7, 255--66, 1987--1999.<br /><br />Ellipses...and...and....<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">LaTeX</div>
  <br />
  <ul class="bb_ul">
    <li><br /></li>
    <li>$2+2=4$<br /></li>
    <li>$x \in y$<br /></li>
    <li>$\alpha \wedge \omega$<br /></li>
    <li>$223$<br /></li>
    <li>$p$-Tree<br /></li>
    <li>
      Here's some display math:
      <div class="bb_code">
        $$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$
      </div>
    </li>
    <li>
      Here's one that has a line break in it: $\alpha + \omega \times x^2$.
    </li>
  </ul>
  These shouldn't be math:<br /><br />
  <ul class="bb_ul">
    <li>To get the famous equation, write $e = mc^2$.<br /></li>
    <li>
      $22,000 is a <i>lot</i> of money. So is $34,000. (It worked if "lot" is
      emphasized.)<br />
    </li>
    <li>Shoes ($20) and socks ($5).<br /></li>
    <li>Escaped $: $73 <i>this should be emphasized</i> 23$.</li>
  </ul>
  Here's a LaTeX table:<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Special Characters</div>
  <br />Here is some unicode:<br /><br />
  <ul class="bb_ul">
    <li>I hat: Î<br /></li>
    <li>o umlaut: ö<br /></li>
    <li>section: §<br /></li>
    <li>set membership: ∈<br /></li>
    <li>copyright: ©</li>
  </ul>
  AT&amp;T has an ampersand in their name.<br /><br />AT&amp;T is another way to
  write it.<br /><br />This &amp; that.<br /><br />4 &lt; 5.<br /><br />6 &gt;
  5.<br /><br />Backslash: \<br /><br />Backtick: `<br /><br />Asterisk: *<br /><br />Underscore:
  _<br /><br />Left brace: {<br /><br />Right brace: }<br /><br />Left bracket:
  [<br /><br />Right bracket: ]<br /><br />Left paren: (<br /><br />Right paren:
  )<br /><br />Greater-than: &gt;<br /><br />Hash: #<br /><br />Period: .<br /><br />Bang:
  !<br /><br />Plus: +<br /><br />Minus: -<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Links</div>
  <br />
  <div class="bb_h2">Explicit</div>
  <br />Just a
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL</a
  >.<br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL and title</a
  >.<br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL and title</a
  >.<br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL and title</a
  >.<br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL and title</a
  ><br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">URL and title</a
  ><br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">with_underscore</a
  ><br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">Email link</a
  ><br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">Empty</a
  >.<br /><br />
  <div class="bb_h2">Reference</div>
  <br />Foo
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">bar</a
  >.<br /><br />With
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >embedded [brackets]</a
  >.<br /><br /><span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">b</a> by itself
  should be a link.<br /><br />Indented
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">once</a
  >.<br /><br />Indented
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">twice</a
  >.<br /><br />Indented
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">thrice</a
  >.<br /><br />This should [not][] be a link.<br /><br />
  <div class="bb_code">[not]: /url</div>
  Foo
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">bar</a
  >.<br /><br />Foo
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">biz</a>.<br /><br />
  <div class="bb_h2">With ampersands</div>
  <br />Here's a
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >link with an ampersand in the URL</a
  >.<br /><br />Here's a link with an amersand in the link text:
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">AT&amp;T</a
  >.<br /><br />Here's an
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">inline link</a
  >.<br /><br />Here's an
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >inline link in pointy braces</a
  >.<br /><br />
  <div class="bb_h2">Autolinks</div>
  <br />With an ampersand:
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >http://example.com/?foo=1&amp;bar=2</a
  ><br /><br />
  <ul class="bb_ul">
    <li>In a list?<br /></li>
    <li>
      <span
        class="bb_removedlink"
        data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
        >{LINK REMOVED}</span
      ><a href="#" class="collapsed_link" style="display: none"
        >http://example.com/</a
      ><br />
    </li>
    <li>It should.</li>
  </ul>
  An e-mail address:
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >http://[email protected]</a
  ><br /><br />
  <blockquote class="bb_blockquote">
    Blockquoted:
    <span
      class="bb_removedlink"
      data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
      >{LINK REMOVED}</span
    ><a href="#" class="collapsed_link" style="display: none"
      >http://example.com/</a
    >
  </blockquote>
  <br />Auto-links should not occur here:
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none"
    >&lt;http://example.com/&gt;</a
  ><br /><br />
  <div class="bb_code">
    or here:
    <span
      class="bb_removedlink"
      data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
      >{LINK REMOVED}</span
    ><a href="#" class="collapsed_link" style="display: none"
      >&lt;http://example.com/&gt;</a
    >
  </div>
  <br />
  <hr />
  <br /><br />
  <div class="bb_h1">Images</div>
  <br />From "Voyage dans la Lune" by Georges Melies (1902):<br /><br />lalune<br />Here
  is a movie icon.<br /><br />
  <hr />
  <br /><br />
  <div class="bb_h1">Footnotes</div>
  <br />Here is a footnote reference,(1) and another.(2) This should
  <i>not</i> be a footnote reference, because it contains a space.[^my note]
  Here is an inline note.(3)<br /><br />
  <blockquote class="bb_blockquote">Notes can go in quotes.(4)</blockquote>
  <br />
  <ol>
    <li>And in list items.(5)</li>
  </ol>
  This paragraph should not be part of the note, as it is not indented.<br /><br />
  <hr />
  <br /><br />(1) Here is the footnote. It can go anywhere after the footnote
  reference. It need not be placed at the end of the document.<br /><br />(2)
  Here's the long note. This one contains multiple blocks.<br /><br />Subsequent
  blocks are indented to show that they belong to the footnote (as with list
  items).<br /><br />
  <div class="bb_code">{ &lt;code&gt; }</div>
  If you want, you can indent every line, but you can also be lazy and just
  indent the first line of each block.<br /><br />(3) This is <i>easier</i> to
  type. Inline notes may contain
  <span
    class="bb_removedlink"
    data-community-tooltip="The URL that was linked here has been removed by our filters.  Usually this is done to prevent phishing and malware attacks."
    >{LINK REMOVED}</span
  ><a href="#" class="collapsed_link" style="display: none">links</a> and ]
  verbatim characters, as well as [bracketed text].<br /><br />(4) In quote.<br /><br />(5)
  In list.
</div>

Tables

rendered contents (image)

steam_tables

rendered contents (html)

<div class="content">
  Simple table with caption:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_th">Right</div>
      <div class="bb_table_th">Left</div>
      <div class="bb_table_th">Center</div>
      <div class="bb_table_th">Default</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
    </div>
  </div>
  Simple table without caption:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_th">Right</div>
      <div class="bb_table_th">Left</div>
      <div class="bb_table_th">Center</div>
      <div class="bb_table_th">Default</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
    </div>
  </div>
  Simple table indented two spaces:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_th">Right</div>
      <div class="bb_table_th">Left</div>
      <div class="bb_table_th">Center</div>
      <div class="bb_table_th">Default</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
    </div>
  </div>
  Multiline table with caption:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_th">Centered Header</div>
      <div class="bb_table_th">Left Aligned</div>
      <div class="bb_table_th">Right Aligned</div>
      <div class="bb_table_th">Default aligned</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">First</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">12.0</div>
      <div class="bb_table_td">Example of a row that spans multiple lines.</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">Second</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">5.0</div>
      <div class="bb_table_td">
        Here's another one. Note the blank line between rows.
      </div>
    </div>
  </div>
  Multiline table without caption:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_th">Centered Header</div>
      <div class="bb_table_th">Left Aligned</div>
      <div class="bb_table_th">Right Aligned</div>
      <div class="bb_table_th">Default aligned</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">First</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">12.0</div>
      <div class="bb_table_td">Example of a row that spans multiple lines.</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">Second</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">5.0</div>
      <div class="bb_table_td">
        Here's another one. Note the blank line between rows.
      </div>
    </div>
  </div>
  Table without column headers:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
      <div class="bb_table_td">12</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
      <div class="bb_table_td">123</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
      <div class="bb_table_td">1</div>
    </div>
  </div>
  Multiline table without column headers:<br /><br />
  <div class="bb_table">
    <div class="bb_table_tr">
      <div class="bb_table_td">First</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">12.0</div>
      <div class="bb_table_td">Example of a row that spans multiple lines.</div>
    </div>
    <div class="bb_table_tr">
      <div class="bb_table_td">Second</div>
      <div class="bb_table_td">row</div>
      <div class="bb_table_td">5.0</div>
      <div class="bb_table_td">
        Here's another one. Note the blank line between rows.
      </div>
    </div>
  </div>
</div>

jgm

Thanks! Some comments:

I would suggest just having one bbcode template. (They are all the same anyway.) See https://github.com/jgm/pandoc/blob/main/src/Text/Pandoc/Templates.hs#L117-L122 for how to handle this. Would also need to remove the lines for them from pandoc.cabal.
No need to update the README.md. This is done by an automatic script prior to the release. (See the first line of the file.)
It's a lot of test files. If there are just a few differences between the format variants, I'd prefer to have one writer.bbcode and tables.bbcode, and then maybe some command tests or Haskell tests in test/Tests/Writer/BBCode.hs that check the variant behavior on these differences.

test/tables.bbcode

test/tables.bbcode_fluxbb

test/writer.bbcode

reptee · 2025-10-28T14:05:40Z

Not ready for review, I addressed 1--3 only, newlines are still on the list. Would like to support xenforo before PR gets merged too.

In the meantime I wanted to ask whether I need to put module description like this one:

{- |
   Module      : Text.Pandoc.Writers.Org
   Copyright   : © 2010-2015 Puneeth Chaganti <[email protected]>
                   2010-2025 John MacFarlane <[email protected]>
                   2016-2025 Albert Krewinkel <[email protected]>
   License     : GNU GPL, version 2 or above

   Maintainer  : Albert Krewinkel <[email protected]>
   Stability   : alpha
   Portability : portable

Conversion of 'Pandoc' documents to Emacs Org-Mode.

Org-Mode:  <http://orgmode.org>
-}

with my name/email in the beginning of the modules I create? I noticed they appear in most modules (at least Writers.*)

jgm

A few more things I noticed.

src/Text/Pandoc/Writers.hs

src/Text/Pandoc/Writers/BBCode.hs

Silly me missed the "auto-generated" part because I looked (`rg`) where was Vimdoc mentioned and added bbcode nearby

Should not change anything under normal circumstances, but helps when rendering BlockQuote inside [un]ordered list for FluxBB

Huzbilla doesn't mention [li] in the docs, it also supports different styles for ordered lists.

Add tests for BBCode flavors other than default && remove golden tests for flavors other than default

also grouped `bbcode*` in the test module

- render table captions for formats that do not support tables - eta reduce renderTableGeneric

reptee · 2025-11-01T13:55:11Z

Fixed missing newline issues, captions are now rendered too (even for omitted (TABLE) tables)

Added support for xenForo, refactored wrapSpanDivGeneric, heading levels are now clamped ¹

Rendered bbcode

phpBB

rendered page (image)

FluxBB

rendered page (image)

Steam

Writer

rendered page (image)

Tables

rendered page (image)

Hubzilla

Writer

Footnotes got trimmed because screenshot length exceeded what firefox allowed and I was too lazy to stitch it together (there is nothing interesting down below)

rendered page (image)

Tables

rendered page (image)

xenForo

I used demo to render these

Writer

This time the problem was the opposite, xenForo didn’t allow post to exceed 10k characters, and writer.bbcode_xenforo was around 10200, so I trimmed footnotes

rendered page (image)

Tables

rendered page (image)

e.g. for Steam, which supports headings level 1–3, but not for xenForo, because for headings >3, it creates linkable divs ↩

jgm reviewed Oct 27, 2025

View reviewed changes

test/tables.bbcode Show resolved Hide resolved

test/tables.bbcode Show resolved Hide resolved

test/tables.bbcode_fluxbb Outdated Show resolved Hide resolved

test/writer.bbcode Show resolved Hide resolved

test/writer.bbcode Show resolved Hide resolved

jgm reviewed Oct 28, 2025

View reviewed changes

src/Text/Pandoc/Writers.hs Show resolved Hide resolved

src/Text/Pandoc/Writers/BBCode.hs Outdated Show resolved Hide resolved

reptee added 22 commits November 1, 2025 14:16

BBCode writer

dec8b15

BBCode writer: revert README.md

1966991

Silly me missed the "auto-generated" part because I looked (`rg`) where was Vimdoc mentioned and added bbcode nearby

BBCode writer: dedupe templates

8b0ed0d

BBCode writer: remove renderBulletListSteam

15e0d2e

BBCode writer: omit empty blocks when rendering block list

7fa660d

Should not change anything under normal circumstances, but helps when rendering BlockQuote inside [un]ordered list for FluxBB

BBCode writer: hubzilla lists changes

08a201d

Huzbilla doesn't mention [li] in the docs, it also supports different styles for ordered lists.

BBCode writer: improve link handling

850afab

BBCode writer: clamp heading levels

2d882d5

BBCode writer: add unit tests, remove golden tests

6ae61f4

Add tests for BBCode flavors other than default && remove golden tests for flavors other than default

BBCode writer: rename and export writers

3abe68b

also grouped `bbcode*` in the test module

BBCode writer: remove dead code

4e151d1

BBCode writer: take wrapSpanDivGeneric apart

b253e2f

BBCode writer: xenForo support

d802b61

BBCode writer: second bbcode (steam) -> bbcode (hubzilla)

2f8164a

BBCode writer: adjust tests

5541214

BBCode writer: xenForo images

4181464

BBCode writer: replace table with "(TABLE)" when unsupported

3079464

BBCode writer: coherent blanklines between blocks

40ba7ce

BBCode writer: render table caption

0c7a7d6

BBCode writer: formatting

d031f24

BBCode writer: wrapSpanDiv docs

1804afd

BBCode writer: drop MultiWayIf

6875ab7

reptee force-pushed the BBCode branch from 02ed115 to 9a80044 Compare November 1, 2025 13:17

BBCode writer: always render captions

69e6c33

- render table captions for formats that do not support tables - eta reduce renderTableGeneric

reptee force-pushed the BBCode branch from 9a80044 to 69e6c33 Compare November 1, 2025 13:20

BBCode writer: define clamp locally

2c4e976

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

BBCode writer #11242

BBCode writer #11242

reptee commented Oct 25, 2025 •

edited

Loading

Uh oh!

reptee commented Oct 25, 2025

Uh oh!

jgm left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reptee commented Oct 28, 2025

Uh oh!

jgm left a comment

Uh oh!

Uh oh!

Uh oh!

reptee commented Nov 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

BBCode writer #11242

Are you sure you want to change the base?

BBCode writer #11242

Conversation

reptee commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

FluxBB

Hubzilla

Writer

Tables

Uh oh!

reptee commented Oct 25, 2025

phpBB

Steam

Writer

Tables

Uh oh!

jgm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reptee commented Oct 28, 2025

Uh oh!

jgm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

reptee commented Nov 1, 2025

Rendered bbcode

phpBB

FluxBB

Steam

Writer

Tables

Hubzilla

Writer

Tables

xenForo

Writer

Tables

Footnotes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

reptee commented Oct 25, 2025 •

edited

Loading