Markdown-Previewer/markdown-previewer/src/App.js

import React from "react";
import { marked } from "marked";
import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { faFileLines } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./App.scss";

marked.setOptions({
  breaks: true,
});

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      markdown: `# Welcome to my React Markdown Previewer!\n\n## This is a sub-heading...\n### And here's some other cool stuff:\n\nHeres some code, \`<div></div>\`, between 2 backticks.\n\n\`\`\`\n// this is multi-line code:\n\nfunction anotherExample(firstLine, lastLine) {\nif (firstLine == '\`\`\`' && lastLine == '\`\`\`') {\nreturn multiLineCode;\n}\n}\n\`\`\`\n\nYou can also make text **bold**... whoa!\nOr _italic_.\nOr... wait for it... **_both!_**\nAnd feel free to go crazy ~~crossing stuff out~~.\n\nThere's also [links](https://www.freecodecamp.org), and\n> Block Quotes!\n\nAnd if you want to get really crazy, even tables:\n\nWild Header | Crazy Header | Another Header?\n------------ | ------------- | -------------\nYour content can | be here, and it | can be here....\nAnd here. | Okay. | I think we get it.\n\n- And of course there are lists.\n- Some are bulleted.\n- With different indentation levels.\n- That look like this.\n\n\n1. And there are numbered lists too.\n1. Use just 1s if you want!\n1. And last but not least, let's not forget embedded images:\n\n![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)\n\n`,
    };
    this.handleMarkdownChange = this.handleMarkdownChange.bind(this);
  }

  handleMarkdownChange(event) {
    this.setState({ markdown: event.target.value });
  }

  render() {
    return (
      <div className="App container-fluid vh-100">
        <div className="row">
          <div className="editor-topbar col-md-6 border border-dark border-2">
            <h3 className="text-white text-center">
              <FontAwesomeIcon icon={faPenToSquare} />
              {` Editor`}
            </h3>
          </div>
          <div className="preview-topbar col-md-6 border border-dark border-2">
            <h3 className="text-white text-center">
              <FontAwesomeIcon icon={faFileLines} />
              {` Preview`}
            </h3>
          </div>
        </div>
        <div className="row h-100">
          <div className="col-md-6 p-0 border border-dark border-2">
            <textarea
              className="text-justify h-100 px-3 py-1 form-control p-0 rounded-0"
              id="editor"
              value={this.state.markdown}
              onChange={this.handleMarkdownChange}
            ></textarea>
          </div>
          <div className="col-md-6 p-0 border border-dark border-2">
            <div className="" id="preview">
              <div
                className="text-justify vh-100 px-3 py-1 m-0 overflow-auto markdown-body"
                dangerouslySetInnerHTML={{
                  __html: marked.parse(this.state.markdown),
                }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;