Improve DRY-ness of code documentation

[Wolfr]

Documenting the code snippets manually is a bit dumb, but if I try to extract the component to a separate example, and then load the code in, I get a Prism HMR error.

Example:

• Make components/table.svelte a folder: components/table/index.svelte
• Create a new file called Example.svelte
• Load in Example.svelte from aforementioned index
• Add the import: `import Example from './Example.svelte'

Instead of documenting like this (dumb way with manual conversion to entities):

<StyleguideCard title={pageTitle} code="&lt;table class=&quot;c-table c-table--styled&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Data header&lt;/th&gt;
      &lt;th&gt;Data header&lt;/th&gt;
      &lt;th&gt;Data header&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Data point&lt;/td&gt;
      &lt;td&gt;Data point&lt;/td&gt;
      &lt;td&gt;Data point&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;">
  <table class="c-table c-table--styled">
    <thead>
      <tr>
        <th>Data header</th>
        <th>Data header</th>
        <th>Data header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data point</td>
        <td>Data point</td>
        <td>Data point</td>
      </tr>
    </tbody>
  </table>
</StyleguideCard>

I want to document like this to avoid repeating the code snippet:

<StyleguideCard title={pageTitle} code={Example}>
  <Example />
</StyleguideCard>