Simple React Markdown Previewer

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="app"></div>

script.babel

marked.setOptions({
  breaks: true
});

const renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
  return `<a target="_blank" href="${href}">${text}</a>`;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markdown: placeholder
    };
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(e) {
    this.setState({
      markdown: e.target.value
    });
  }
  
  render() {
    const classes = this.state.editorMaximized
      ? ['editorWrap maximized', 'previewWrap hide']
      : this.state.previewMaximized
        ? ['editorWrap hide', 'previewWrap maximized']
        : ['editorWrap', 'previewWrap']
    
    return (
      <div className="row">
        <div className="column">
          <Editor markdown={this.state.markdown} onChange={this.handleChange} />
        </div>
        <div className="column">
          <Preview markdown={this.state.markdown} />
        </div>
      </div>
    )
  }
}

const Editor = props => {
  return (
    <textarea
      id="editor"
      onChange={props.onChange}
      type="text"
      value={props.markdown}
    />
  )
}

const Preview = props => {
  return (
    <div 
      dangerouslySetInnerHTML={{
        __html: marked(props.markdown, { renderer })
      }}  
      id="preview"
    />
  )
}

const placeholder = `# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:

Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`

You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.com), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbererd lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:

![Savepong w/ Text](https://savepong.com/images/profile.jpg)
`;

ReactDOM.render(<App/>, document.getElementById("app"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js"></script>

simple-react-markdown-previewer.markdown

Simple React Markdown Previewer

A Pen by Save Pongsiri on CodePen.

License.

style.css

html, body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

.row {
  display: flex;
}

.row .column {
  width: 50%;
  min-width: 500px;
  padding: 0px;
}

.row .column:first-child {
  background-color: black;
}

textarea#editor {
  font-family: sans-serif;
  display: block;
  width: calc(100% - 60px);
  min-height: 100vh;
  overflow: auto;
  border: 0px;
  color: white;
  background: transparent;
  padding: 50px 30px;
  -moz-tab-size : 4;
  -o-tab-size : 4;
  tab-size : 4;
}

textarea:focus {
  outline-width: 0;
}

#preview {
  height: auto;
  overflow: auto;
  padding: 30px;
}

#preview h1 {
  border-bottom: 2px solid #224b4b;
}

#preview h2 {
  border-bottom: 1px solid #224b4b;
}

#preview pre {
  background: #eee;
  padding: 10px;
  border-radius: 5px;
  overflow: auto;
}

#preview code {
  background: #eee;
  padding: 1px 4px 2px 4px;
  font-size: 12px;
  font-weight: bold;
}

#preview blockqoute {
  border-left: 3px solid #224b4b;
  color: #224b4b;
  padding-left: 5px;
  margin-left: 25px;
}

#preview table {
  border-collapse: collapse;
}

#preview th,
#preview td {
  border: 2px solid #224b4b;
  padding-left: 5px;
  padding-right: 5px;
}

#preview img {
  height: 200px;
}