Getting Started

codeblock usage

if you want to render react-component in codeSandbox

you can use jsx-codeSandbox or tsx-codeSandbox as codeblock language.

for example:

tsx
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState(0);
5  return (
6    <div>
7      <button onClick={() => setState(n => n + 1)}>click me</button>
8      <div>{state}</div>
9    </div>
10  );
11}

if you just wanna render Element,you can use html-preview

for example

html
1<div class="grid-container">
2  <style>
3    .grid-container {
4      border: 1px solid red;
5      margin: 0 auto;
6      text-align: center;
7    }
8    .grid-container {
9      display: grid;
10      width: 150px;
11      grid-template-columns: 50px 50px 50px;
12      grid-template-rows: 50px 50px 50px;
13      justify-content: stretch;
14      gap: 2px;
15    }
16    .one,
17    .two {
18      background-color: #e91e63;
19    }
20    .one {
21      grid-column-start: 1;
22      grid-column-end: span 3;
23      grid-row-start: span 2;
24    }
25    .two {
26      grid-column-start: 2;
27      grid-column-end: 3;
28      grid-row-start: 3;
29      grid-row-end: 4;
30    }
31  </style>
32  <div class="one">1</div>
33  <div class="two">2</div>
34</div>