Basic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { CodeBlock, RenderedHTML } from 'mdxts/components'

export function Basic() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Input</h2>
        <CodeBlock
          language="jsx"
          value="<h1 style={{ fontSize: '6rem' }}>Hello World</h1>"
        />
      </div>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Output</h2>
        <RenderedHTML includeHtml={false}>
          <h1 style={{ fontSize: '6rem' }}>Hello World</h1>
        </RenderedHTML>
      </div>
    </div>
  )
}

<h1 style={{ fontSize: '6rem' }}>Hello World</h1>

<h1 style="font-size:6rem">Hello World</h1>