<div id="root"></div>

.App {
  font-family: sans-serif;
  text-align: center;
}

table,
tr,
td,
th {
  border: 1px solid #555;
}

blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

.left {
  text-align: left;
}

import gfm from "https://cdn.skypack.dev/remark-gfm@1.0.0";


function App() {
  const tableStruct = `
  | heading | b  |  c |  d  |
  | - | :- | -: | :-: |
  | cell 1 | cell 2 | 3 | 4 | 
  `;

  return (
    <div className="App">
      <h3>React-Markdown - Using remark-gfm plugin</h3>

      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead>
          <tr>
            <th>Element</th>
            <th>Markdown Syntax</th>
            <th>Rendered by React-Markdown</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Strikethrough</td>
            <td>~Strikethrough~</td>
            <td>
              <ReactMarkdown remarkPlugins={[gfm]}>
                ~Strikethrough~
              </ReactMarkdown>
            </td>
          </tr>
          <tr className={"left"}>
            <td>todo list (unchecked)</td>
            <td>* [ ] List item unchecked</td>
            <td>
              <ReactMarkdown remarkPlugins={[gfm]}>
                * [ ] List item unchecked
              </ReactMarkdown>
            </td>
          </tr>
          <tr className={"left"}>
            <td>todo list (checked)</td>
            <td>* [x] List item checked</td>
            <td>
              <ReactMarkdown remarkPlugins={[gfm]}>
                * [x] List item checked
              </ReactMarkdown>
            </td>
          </tr>
          <tr className={"left"}>
            <td>Tables</td>
            <td>
              | heading | b | c | d |<br />
              | - | :- | -: | :-: |<br />| cell 1 | cell 2 | 3 | 4 |
            </td>
            <td>
              <ReactMarkdown
                remarkPlugins={[gfm]}
                children={tableStruct}
              ></ReactMarkdown>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);