safe-mdx 0.0.2 → 0.0.4

package/src/safe-mdx.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import dedent from 'dedent'
 import { test, expect } from 'vitest'
 import { MdastToJsx } from './safe-mdx'
+import { renderToStaticMarkup } from 'react-dom/server'
 void React
 
 const components = {
@@ -13,8 +14,9 @@ const components = {
 function render(code) {
     const visitor = new MdastToJsx({ code, components })
     const result = visitor.run()
+    const html = renderToStaticMarkup(result)
     // console.log(JSON.stringify(result, null, 2))
-    return { result, errors: visitor.errors || [] }
+    return { result, errors: visitor.errors || [], html }
 }
 
 test('basic', () => {
@@ -27,6 +29,7 @@ test('basic', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
+        "html": "<h1>Hello</h1><p>i am a paragraph</p>",
         "result": <React.Fragment>
           <h1>
             Hello
@@ -38,6 +41,135 @@ test('basic', () => {
       }
     `)
 })
+test('table', () => {
+    expect(
+        render(dedent`
+        # Hello
+
+        | Tables        | Are           | Cool  |
+        | ------------- |:-------------:| -----:|
+        | col 3 is      | right-aligned | $1600 |
+        | col 2 is      | centered      |   $12 |
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1>Hello</h1><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr></tbody></table>",
+        "result": <React.Fragment>
+          <h1>
+            Hello
+          </h1>
+          <table>
+            <thead>
+              <tr
+                className=""
+              >
+                <td
+                  className=""
+                >
+                  Tables
+                </td>
+                <td
+                  className=""
+                >
+                  Are
+                </td>
+                <td
+                  className=""
+                >
+                  Cool
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                className=""
+              >
+                <td
+                  className=""
+                >
+                  col 3 is
+                </td>
+                <td
+                  className=""
+                >
+                  right-aligned
+                </td>
+                <td
+                  className=""
+                >
+                  $1600
+                </td>
+              </tr>
+              <tr
+                className=""
+              >
+                <td
+                  className=""
+                >
+                  col 2 is
+                </td>
+                <td
+                  className=""
+                >
+                  centered
+                </td>
+                <td
+                  className=""
+                >
+                  $12
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </React.Fragment>,
+      }
+    `)
+})
+test('table, only head', () => {
+    expect(
+        render(dedent`
+        # Hello
+
+        | Tables        | Are           | Cool  |
+        | ------------- |:-------------:| -----:|
+        
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1>Hello</h1><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead></table>",
+        "result": <React.Fragment>
+          <h1>
+            Hello
+          </h1>
+          <table>
+            <thead>
+              <tr
+                className=""
+              >
+                <td
+                  className=""
+                >
+                  Tables
+                </td>
+                <td
+                  className=""
+                >
+                  Are
+                </td>
+                <td
+                  className=""
+                >
+                  Cool
+                </td>
+              </tr>
+            </thead>
+          </table>
+        </React.Fragment>,
+      }
+    `)
+})
 
 test('inline jsx', () => {
     expect(
@@ -47,6 +179,7 @@ test('inline jsx', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
+        "html": "<p><h1>hello</h1></p>",
         "result": <React.Fragment>
           <p>
             <Heading
@@ -70,6 +203,7 @@ test('block jsx', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
+        "html": "<h1><blockquote><p>hello</p></blockquote></h1>",
         "result": <React.Fragment>
           <Heading
             level={2}
@@ -84,6 +218,32 @@ test('block jsx', () => {
       }
     `)
 })
+test('complex jsx, self closing tags', () => {
+    expect(
+        render(dedent`
+        # hello <br />
+
+        <br />
+
+        content
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1>hello <br/></h1><br/><p>content</p>",
+        "result": <React.Fragment>
+          <h1>
+            hello 
+            <br />
+          </h1>
+          <br />
+          <p>
+            content
+          </p>
+        </React.Fragment>,
+      }
+    `)
+})
 
 test('missing components are ignored', () => {
     expect(
@@ -97,6 +257,7 @@ test('missing components are ignored', () => {
             "message": "Unsupported jsx component MissingComponent",
           },
         ],
+        "html": "",
         "result": <React.Fragment />,
       }
     `)
@@ -141,14 +302,15 @@ test('props parsing', () => {
             "message": "Expressions in jsx props are not supported (...{       spread: true     })",
           },
         ],
+        "html": "<h1><p>hi</p></h1>",
         "result": <React.Fragment>
           <Heading
             backTick="some \${expr} value"
             boolean={false}
-            doublequote="a \\" string"
+            doublequote="a " string"
             null={null}
             num={2}
-            quote="a \\" string"
+            quote="a " string"
             someJson={
               {
                 "a": 1,
@@ -173,6 +335,7 @@ test('breaks', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
+        "html": "<p>To have a line break without a paragraph, you will need to use two trailing spaces.<br/>Note that this line is separate, but within the same paragraph.<br/>(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p>",
         "result": <React.Fragment>
           <p>
             To have a line break without a paragraph, you will need to use two trailing spaces.
@@ -215,7 +378,7 @@ test('kitchen sink', () => {
         
         ## Headers
         
-        \`\`\`no-highlight
+        
         # H1
         ## H2
         ### H3
@@ -230,7 +393,7 @@ test('kitchen sink', () => {
         
         Alt-H2
         ------
-        \`\`\`
+        
         
         # H1
         ## H2
@@ -608,6 +771,112 @@ test('kitchen sink', () => {
             "message": "Unsupported jsx component dl",
           },
         ],
+        "html": "<h1>Markdown Kitchen Sink</h1><p>This file is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" title="">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> plus a few fixes and additions. Used by <a href="https://github.com/obedm503/bootmark" title="">obedm503/bootmark</a> to <a href="https://obedm503.github.io/bootmark/docs/markdown-cheatsheet.html" title="">demonstrate</a> it&#x27;s styling features.</p><p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/" title="">John Gruber&#x27;s original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/" title="">Github-flavored Markdown info page</a>.</p><p>Note that there is also a <a href="./Markdown-Here-Cheatsheet" title="">Cheatsheet specific to Markdown Here</a> if that&#x27;s what you&#x27;re looking for. You can also check out <a href="./Other-Markdown-Tools" title="">more Markdown tools</a>.</p><h5>Table of Contents</h5><p><a href="#headers" title="">Headers</a><br/><a href="#emphasis" title="">Emphasis</a><br/><a href="#lists" title="">Lists</a><br/><a href="#links" title="">Links</a><br/><a href="#images" title="">Images</a><br/><a href="#code" title="">Code and Syntax Highlighting</a><br/><a href="#tables" title="">Tables</a><br/><a href="#blockquotes" title="">Blockquotes</a><br/><a href="#html" title="">Inline HTML</a><br/><a href="#hr" title="">Horizontal Rule</a><br/><a href="#lines" title="">Line Breaks</a><br/><a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code>Emphasis, aka italics, with *asterisks* or _underscores_.
+
+      Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+      Combined emphasis with **asterisks and _underscores_**.
+
+      Strikethrough uses two tildes. ~~Scratch this.~~</code></pre><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><a name="lists"></a><h2>Lists</h2><p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p><pre><code>1. First ordered list item
+      2. Another item
+      ⋅⋅* Unordered sub-list. 
+      1. Actual numbers don&#x27;t matter, just that it&#x27;s a number
+      ⋅⋅1. Ordered sub-list
+      4. And another item.
+
+      ⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&#x27;ll use three here to also align the raw Markdown).
+
+      ⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
+      ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
+      ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
+
+      * Unordered list can use asterisks
+      - Or minuses
+      + Or pluses</code></pre><ol start="1"><li><p>First ordered list item</p></li><li><p>Another item</p></li></ol><ul><li><p>Unordered sub-list.</p></li></ul><ol start="1"><li><p>Actual numbers don&#x27;t matter, just that it&#x27;s a number</p></li><li><p>Ordered sub-list</p></li><li><p>And another item.</p><p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&#x27;ll use three here to also align the raw Markdown).</p><p>To have a line break without a paragraph, you will need to use two trailing spaces.<br/>Note that this line is separate, but within the same paragraph.<br/>(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li><p>Unordered list can use asterisks</p></li></ul><ul><li><p>Or minuses</p></li></ul><ul><li><p>Or pluses</p></li></ul><a name="links"></a><h2>Links</h2><p>There are two ways to create links.</p><pre><code>[I&#x27;m an inline-style link](https://www.google.com)
+
+      [I&#x27;m an inline-style link with title](https://www.google.com &quot;Google&#x27;s Homepage&quot;)
+
+      [I&#x27;m a reference-style link][Arbitrary case-insensitive reference text]
+
+      [I&#x27;m a relative reference to a repository file](../blob/master/LICENSE)
+
+      [You can use numbers for reference-style link definitions][1]
+
+      Or leave it empty and use the [link text itself].
+
+      URLs and URLs in angle brackets will automatically get turned into links. 
+      http://www.example.com and sometimes 
+      example.com (but not on Github, for example).
+
+      Some text to show that the reference links can follow later.
+
+      [arbitrary case-insensitive reference text]: https://www.mozilla.org
+      [1]: http://slashdot.org
+      [link text itself]: http://www.reddit.com</code></pre><p><a href="https://www.google.com" title="">I&#x27;m an inline-style link</a></p><p><a href="https://www.google.com" title="Google&#x27;s Homepage">I&#x27;m an inline-style link with title</a></p><p><a href="https://www.mozilla.org">I&#x27;m a reference-style link</a></p><p><a href="../blob/master/LICENSE" title="">I&#x27;m a relative reference to a repository file</a></p><p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a>.</p><p>URLs and URLs in angle brackets will automatically get turned into links.
+      <a href="http://www.example.com" title="">http://www.example.com</a> and sometimes
+      example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code>Here&#x27;s our logo (hover to see the title text):
+
+      Inline-style: 
+      ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png &quot;Logo Title Text 1&quot;)
+
+      Reference-style: 
+      ![alt text][logo]
+
+      [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png &quot;Logo Title Text 2&quot;</code></pre><p>Here&#x27;s our logo (hover to see the title text):</p><p>Inline-style:
+      <img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1"/></p><p>Reference-style:
+      </p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn&#x27;t. However, many renderers -- like Github&#x27;s and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code>Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they&#x27;re easier and only they support syntax highlighting.</p><pre><code>var s = &quot;JavaScript syntax highlighting&quot;;
+      alert(s);</code></pre><pre><code>s = &quot;Python syntax highlighting&quot;
+      print s</code></pre><pre><code>No language indicated, so no syntax highlighting. 
+      But let&#x27;s throw in a &amp;lt;b&amp;gt;tag&amp;lt;/b&amp;gt;.</code></pre><pre><code>var s = &quot;JavaScript syntax highlighting&quot;;
+      alert(s);</code></pre><pre><code>s = &quot;Python syntax highlighting&quot;
+      print s</code></pre><pre><code>No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
+      But let&#x27;s throw in a &lt;b&gt;tag&lt;/b&gt;.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren&#x27;t part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code>Colons can be used to align columns.
+
+      | Tables        | Are           | Cool  |
+      | ------------- |:-------------:| -----:|
+      | col 3 is      | right-aligned | $1600 |
+      | col 2 is      | centered      |   $12 |
+      | zebra stripes | are neat      |    $1 |
+
+      There must be at least 3 dashes separating each header cell.
+      The outer pipes (|) are optional, and you don&#x27;t need to make the 
+      raw Markdown line up prettily. You can also use inline Markdown.
+
+      Markdown | Less | Pretty
+      --- | --- | ---
+      *Still* | \`renders\` | **nicely**
+      1 | 2 | 3</code></pre><p>Colons can be used to align columns.</p><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr><tr class=""><td class="">zebra stripes</td><td class="">are neat</td><td class="">$1</td></tr></tbody></table><p>There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don&#x27;t need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><table><thead><tr class=""><td class="">Markdown</td><td class="">Less</td><td class="">Pretty</td></tr></thead><tbody><tr class=""><td class=""><em>Still</em></td><td class=""><code>renders</code></td><td class=""><strong>nicely</strong></td></tr><tr class=""><td class="">1</td><td class="">2</td><td class="">3</td></tr></tbody></table><a name="blockquotes"></a><h2>Blockquotes</h2><pre><code>&gt; Blockquotes are very handy in email to emulate reply text.
+      &gt; This line is part of the same quote.
+
+      Quote break.
+
+      &gt; This is a very long line that will still be quoted properly when it wraps. Oh boy let&#x27;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. </code></pre><blockquote><p>Blockquotes are very handy in email to emulate reply text.
+      This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let&#x27;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><a name="html"></a><h2>Inline HTML</h2><p>You can also use raw HTML in your Markdown, and it&#x27;ll mostly work pretty well.</p><pre><code>&lt;dl&gt;
+        &lt;dt&gt;Definition list&lt;/dt&gt;
+        &lt;dd&gt;Is something people use sometimes.&lt;/dd&gt;
+
+        &lt;dt&gt;Markdown in HTML&lt;/dt&gt;
+        &lt;dd&gt;Does *not* work **very** well. Use HTML &lt;em&gt;tags&lt;/em&gt;.&lt;/dd&gt;
+      &lt;/dl&gt;</code></pre><a name="hr"></a><h2>Horizontal Rule</h2><pre><code>Three or more...
+
+      ---
+
+      Hyphens
+
+      ***
+
+      Asterisks
+
+      ___
+
+      Underscores</code></pre><p>Three or more...</p><hr/><p>Hyphens</p><hr/><p>Asterisks</p><hr/><p>Underscores</p><a name="lines"></a><h2>Line Breaks</h2><p>My basic recommendation for learning how line breaks work is to experiment and discover -- hit &lt;Enter&gt; once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You&#x27;ll soon learn to get what you want. &quot;Markdown Toggle&quot; is your friend.</p><p>Here are some things to try out:</p><pre><code>Here&#x27;s a line for us to start with.
+
+      This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
+
+      This line is also a separate paragraph, but...
+      This line is only separated by a single newline, so it&#x27;s a separate line in the *same paragraph*.</code></pre><p>Here&#x27;s a line for us to start with.</p><p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p><p>This line is also begins a separate paragraph, but...<br/>This line is only separated by a single newline, so it&#x27;s a separate line in the <em>same paragraph</em>.</p><p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there&#x27;s no need to use MD&#x27;s two-space line breaks.)</p><a name="videos"></a><h2>YouTube Videos</h2><p>They can&#x27;t be added directly but you can add an image with a link to the video like this:</p><pre><code>&lt;a href=&quot;http://www.youtube.com/watch?feature=player_embedded&amp;v=YOUTUBE_VIDEO_ID_HERE
+      &quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg&quot; 
+      alt=&quot;IMAGE ALT TEXT HERE&quot; width=&quot;240&quot; height=&quot;180&quot; border=&quot;10&quot; /&gt;&lt;/a&gt;</code></pre><p>Or, in pure Markdown, but losing the image sizing and border:</p><pre><code>[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)</code></pre>",
         "result": <React.Fragment>
           <h1>
             Markdown Kitchen Sink
@@ -764,24 +1033,33 @@ test('kitchen sink', () => {
           <h2>
             Headers
           </h2>
-          <pre>
-            <code>
-              # H1
-      ## H2
-      ### H3
-      #### H4
-      ##### H5
-      ###### H6
-
-      Alternatively, for H1 and H2, an underline-ish style:
-
-      Alt-H1
-      ======
-
-      Alt-H2
-      ------
-            </code>
-          </pre>
+          <h1>
+            H1
+          </h1>
+          <h2>
+            H2
+          </h2>
+          <h3>
+            H3
+          </h3>
+          <h4>
+            H4
+          </h4>
+          <h5>
+            H5
+          </h5>
+          <h6>
+            H6
+          </h6>
+          <p>
+            Alternatively, for H1 and H2, an underline-ish style:
+          </p>
+          <h1>
+            Alt-H1
+          </h1>
+          <h2>
+            Alt-H2
+          </h2>
           <h1>
             H1
           </h1>
@@ -1215,150 +1493,158 @@ test('kitchen sink', () => {
             Colons can be used to align columns.
           </p>
           <table>
-            <tr
-              className=""
-            >
-              <td
-                className=""
-              >
-                Tables
-              </td>
-              <td
-                className=""
-              >
-                Are
-              </td>
-              <td
-                className=""
-              >
-                Cool
-              </td>
-            </tr>
-            <tr
-              className=""
-            >
-              <td
-                className=""
-              >
-                col 3 is
-              </td>
-              <td
-                className=""
-              >
-                right-aligned
-              </td>
-              <td
-                className=""
-              >
-                $1600
-              </td>
-            </tr>
-            <tr
-              className=""
-            >
-              <td
-                className=""
-              >
-                col 2 is
-              </td>
-              <td
-                className=""
-              >
-                centered
-              </td>
-              <td
+            <thead>
+              <tr
                 className=""
               >
-                $12
-              </td>
-            </tr>
-            <tr
-              className=""
-            >
-              <td
+                <td
+                  className=""
+                >
+                  Tables
+                </td>
+                <td
+                  className=""
+                >
+                  Are
+                </td>
+                <td
+                  className=""
+                >
+                  Cool
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
                 className=""
               >
-                zebra stripes
-              </td>
-              <td
+                <td
+                  className=""
+                >
+                  col 3 is
+                </td>
+                <td
+                  className=""
+                >
+                  right-aligned
+                </td>
+                <td
+                  className=""
+                >
+                  $1600
+                </td>
+              </tr>
+              <tr
                 className=""
               >
-                are neat
-              </td>
-              <td
+                <td
+                  className=""
+                >
+                  col 2 is
+                </td>
+                <td
+                  className=""
+                >
+                  centered
+                </td>
+                <td
+                  className=""
+                >
+                  $12
+                </td>
+              </tr>
+              <tr
                 className=""
               >
-                $1
-              </td>
-            </tr>
+                <td
+                  className=""
+                >
+                  zebra stripes
+                </td>
+                <td
+                  className=""
+                >
+                  are neat
+                </td>
+                <td
+                  className=""
+                >
+                  $1
+                </td>
+              </tr>
+            </tbody>
           </table>
           <p>
             There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
           </p>
           <table>
-            <tr
-              className=""
-            >
-              <td
-                className=""
-              >
-                Markdown
-              </td>
-              <td
-                className=""
-              >
-                Less
-              </td>
-              <td
-                className=""
-              >
-                Pretty
-              </td>
-            </tr>
-            <tr
-              className=""
-            >
-              <td
-                className=""
-              >
-                <em>
-                  Still
-                </em>
-              </td>
-              <td
-                className=""
-              >
-                <code>
-                  renders
-                </code>
-              </td>
-              <td
-                className=""
-              >
-                <strong>
-                  nicely
-                </strong>
-              </td>
-            </tr>
-            <tr
-              className=""
-            >
-              <td
+            <thead>
+              <tr
                 className=""
               >
-                1
-              </td>
-              <td
+                <td
+                  className=""
+                >
+                  Markdown
+                </td>
+                <td
+                  className=""
+                >
+                  Less
+                </td>
+                <td
+                  className=""
+                >
+                  Pretty
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
                 className=""
               >
-                2
-              </td>
-              <td
+                <td
+                  className=""
+                >
+                  <em>
+                    Still
+                  </em>
+                </td>
+                <td
+                  className=""
+                >
+                  <code>
+                    renders
+                  </code>
+                </td>
+                <td
+                  className=""
+                >
+                  <strong>
+                    nicely
+                  </strong>
+                </td>
+              </tr>
+              <tr
                 className=""
               >
-                3
-              </td>
-            </tr>
+                <td
+                  className=""
+                >
+                  1
+                </td>
+                <td
+                  className=""
+                >
+                  2
+                </td>
+                <td
+                  className=""
+                >
+                  3
+                </td>
+              </tr>
+            </tbody>
           </table>
           <a
             name="blockquotes"