RichText

import { RichText } from 'charcell/react';

export function RichTextExample() {
  return (
    <RichText>
      <div
        dangerouslySetInnerHTML={{
          __html:
            '<h2>the souvenir stand</h2><p>every <strong>derby</strong> night the stand sells <em>official</em> smash-a-torium loot, priced in <code>loot.txt</code>. the <a href="#stock">stock</a> is short again: <s>bunnies</s> stolen.</p><h3 id="stock">stock</h3><ul><li>we got yer hats and yer pennants</li><li>we watch the <mark>till</mark> whenever the polecats come by</li></ul><ol><li>restock the bunny value-pack</li><li>change the derby car\'s batteries</li></ol><blockquote><p>i\'m practically givin\' this loot away! what\'s a couple of bucks in exchange for a timeless memento?</p></blockquote><pre><code>hats: plenty\nbunnies: gone</code></pre><hr /><table><thead><tr><th>item</th><th>count</th></tr></thead><tbody><tr><td>pennant</td><td>300</td></tr><tr><td>bunny</td><td>0</td></tr></tbody></table>',
        }}
        style={{ display: 'contents' }}
      />
    </RichText>
  );
}

<script setup lang="ts">
import { RichText } from 'charcell/vue';
</script>

<template>
  <RichText>
    <div
      v-html="
        '<h2>the souvenir stand</h2><p>every <strong>derby</strong> night the stand sells <em>official</em> smash-a-torium loot, priced in <code>loot.txt</code>. the <a href=&quot;#stock&quot;>stock</a> is short again: <s>bunnies</s> stolen.</p><h3 id=&quot;stock&quot;>stock</h3><ul><li>we got yer hats and yer pennants</li><li>we watch the <mark>till</mark> whenever the polecats come by</li></ul><ol><li>restock the bunny value-pack</li><li>change the derby car&#39;s batteries</li></ol><blockquote><p>i&#39;m practically givin&#39; this loot away! what&#39;s a couple of bucks in exchange for a timeless memento?</p></blockquote><pre><code>hats: plenty\nbunnies: gone</code></pre><hr /><table><thead><tr><th>item</th><th>count</th></tr></thead><tbody><tr><td>pennant</td><td>300</td></tr><tr><td>bunny</td><td>0</td></tr></tbody></table>'
      "
      style="display: contents"
    />
  </RichText>
</template>

<script lang="ts">
  import { RichText } from 'charcell/svelte';
</script>

<RichText>
  <div style="display: contents">
    {@html '<h2>the souvenir stand</h2><p>every <strong>derby</strong> night the stand sells <em>official</em> smash-a-torium loot, priced in <code>loot.txt</code>. the <a href="#stock">stock</a> is short again: <s>bunnies</s> stolen.</p><h3 id="stock">stock</h3><ul><li>we got yer hats and yer pennants</li><li>we watch the <mark>till</mark> whenever the polecats come by</li></ul><ol><li>restock the bunny value-pack</li><li>change the derby car\'s batteries</li></ol><blockquote><p>i\'m practically givin\' this loot away! what\'s a couple of bucks in exchange for a timeless memento?</p></blockquote><pre><code>hats: plenty\nbunnies: gone</code></pre><hr /><table><thead><tr><th>item</th><th>count</th></tr></thead><tbody><tr><td>pennant</td><td>300</td></tr><tr><td>bunny</td><td>0</td></tr></tbody></table>'}
  </div>
</RichText>

<div class="CharcellRichText">
  <div>
    <h2>the souvenir stand</h2>
    <p>
      every <strong>derby</strong> night the stand sells
      <em>official</em> smash-a-torium loot, priced in <code>loot.txt</code>.
      the <a href="#stock">stock</a> is short again: <s>bunnies</s> stolen.
    </p>
    <h3 id="stock">stock</h3>
    <ul>
      <li>we got yer hats and yer pennants</li>
      <li>we watch the <mark>till</mark> whenever the polecats come by</li>
    </ul>
    <ol>
      <li>restock the bunny value-pack</li>
      <li>change the derby car's batteries</li>
    </ol>
    <blockquote>
      <p>
        i'm practically givin' this loot away! what's a couple of bucks in
        exchange for a timeless memento?
      </p>
    </blockquote>
    <pre><code>hats: plenty
bunnies: gone</code></pre>
    <hr />
    <table>
      <thead>
        <tr>
          <th>item</th>
          <th>count</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>pennant</td>
          <td>300</td>
        </tr>
        <tr>
          <td>bunny</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>