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

import React from "react";
import { marked } from "marked";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPenToSquare, faFileLines } from "@fortawesome/free-solid-svg-icons";
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 class="container-fluid">
        <div class="row min-vh-100">
          <div class="col-12 col-md-6 bg-red">
            <div class="d-flex flex-column h-100">
              <div class="row bg-color-6 text-white">
                <h3 className="text-white text-center">
                  <FontAwesomeIcon icon={faPenToSquare} />
                  {` Editor`}
                </h3>
              </div>
              <div class="row bg-blue flex-grow-1 text-white">
                <textarea
                  className="text-justify px-3 py-1 form-control p-0 rounded-0"
                  style={{ "min-height": 300 }}
                  id="editor"
                  value={this.state.markdown}
                  onChange={this.handleMarkdownChange}
                ></textarea>{" "}
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 bg-red">
            <div class="d-flex flex-column h-100">
              <div class="row bg-color-8 text-white">
                <h3 className="text-white text-center">
                  <FontAwesomeIcon icon={faFileLines} />
                  {` Preview`}
                </h3>
              </div>
              <div class="row bg-blue flex-grow-1 text-white">
                <div
                  className="text-justify px-3 py-1 m-0 overflow-auto markdown-body"
                  style={{ "min-height": 300 }}
                  id="preview"
                  dangerouslySetInnerHTML={{
                    __html: marked.parse(this.state.markdown),
                  }}
                />{" "}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;