Markdown Previewer

index.html

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

markdown-previewer.markdown

Markdown Previewer

Welcome to Markdown Previewer. This has an editor and a previewer.

A Pen by Derek Dhammaloka on CodePen.

License.

script.babel

// Set Up Components

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12 text-center">
            <h1>Markdown Previewer</h1>
          </div>
        </div>
        <Markdown />
      </div>
    )
  }
}




class Markdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markdown: '# Welcome to my project.  \n The project...  \n## Sub Header \n[British Computer Society](https://www.bcs.org)  \nHere is some code.  To check status on GitHub use the command `git status`.  You can do other things in GitHub such as reset. \n  \nWriting Code in Python  \n```\nx = 4\ny = 2\nz = x + y\nprint(z)\n```  \nFavourite Celebrities  \n* Anna Richardson\n* Kate Garraway\n* Ruth Langsford\n* Susanna Reid\n\nYou can make text **bold** using two asterisks.  \nList Items can contain links  \n* [The National League](https://www.thenationalleague.org.uk)\n* [Cambridge Python User Group](https://www.meetup.com/CamPUG)\n\nThere are blockquotes\n> Thank you for your kind words\n\nImage Links  \n ![Google Logo](http://www.google.com/images/errors/logo_sm.gif)  \n## Computing  \n* Word Processing - include **Clipart Images, Headers and Footers** \n* Spreadsheets - include **Charts and Formula** \n* Presentations - include **Slide Layouts**'
    };
    
   
  }
 myText(markdown) {
    var myText = marked(markdown, {sanitize: true});
    return { __html: myText };
  }
  
  // Update markdown on change of form
  updateMarkdown(event) {
    this.setState({markdown: event.target.value});
  }

  render() {
   
    return (
    <div className="container">
      <div className="row">
        <label>Markdown Input</label>
          <textarea id="editor" rows="15" className="form-control" value={this.state.markdown} onChange={this.updateMarkdown.bind(this)}/>
      </div>
      <div>
    <h1>Markdown Output</h1>
    {/*Converts string version of html into actual html  */}
    <div id="preview" dangerouslySetInnerHTML={this.myText(this.state.markdown)}>
    </div>
    </div>
    </div>


    );

  }
}

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.0/marked.min.js"></script>

style.css

/* Heading H1 */

h1 {
  font-family: "Roboto", Arial, Verdana, sans-serif;
}

/* Editor */
label {
            font-family: "Roboto", Arial, Verdana, sans-serif;
        }

#editor {
            font-family: "Consolas", monospace;
            font-size: 10px;
        }

/* Previewer */

#preview {

            font-family: "Roboto", Arial, Verdana, sans-serif;

        }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />