How can use this code in codepen for markdown previewer project?

JavaScript
1

I built my project in VS Code but now I have a trouble with putting my project in codepen in order to submit the project. What do I need to do in order to make this code valid in codepen?
JS Code:

import "./App.css";
import { useState, useEffect } from "react";
import { marked } from "marked";

export default function App() {
  const [text, setText] = useState(`
  # H1
  ## H2
  [title](https://www.google.com)
  ![image](image.jpg)
  \`console.log("")\`
  \`\`\`
  console.log()
  \`\`\`
  - First item
  > blockquote
  **bold text**

  `);

  marked.setOptions({
    breaks: true
  })
  

  const handleChange = (e) => {
    setText(e.target.value);
  };

  useEffect(() => {
    document.getElementById("preview").innerHTML = marked.parse(
      document.querySelector("textarea").innerHTML
    ).replace(/&gt;/g, '<blockquote></blockquote>').replace(/\\r/g, '<br>');
  });

  return (
    <div className="App">
      <div id="markdown-wrapper">
        <div id="editor-title" class="toolbar">
          <span>
            <i class="fa fa-free-code-camp" title="no-stack-dub-sack"></i>{" "}
            Editor
          </span>
          <i class="fa fa-arrows-alt"></i>
        </div>
        <textarea
          name="editor"
          onChange={handleChange}
          value={text}
          id="editor"
          class=""
        ></textarea>
      </div>

      <div id="previewer">
        <div className="previewer-title toolbar">
          <span>
            <i class="fa fa-free-code-camp" title="no-stack-dub-sack"></i>{" "}
            Previewer
          </span>
          <i class="fa fa-arrows-alt"></i>
        </div>
        <div id="preview"></div>
      </div>
    </div>
  );
}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Simple React Markdown Previewer</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>
2

Use the Codepen settings to add the dependencies and change the JavaScript Preprocessor to use Babel.

Personally, I would suggest using StackBlitz/CodeSandbox instead.

As an aside, you are really not supposed to use innerHTML with React. You can use dangerouslySetInnerHTML

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.