Markdown

In this example below you will see how to do a Markdown with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by irinabrennen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright irinabrennen ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Markdown</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    
    <title>Markdown Previewer</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.7/marked.js'></script>
<script src='https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/irinabrennen/markdown-qpOZdb */
#editor{
  width:98vw;
  height:30vh;
  background-color:#bdcebe;
  max-width:800px;
  margin:auto;
  display:block;
} 

#preview{
  width:98vw;
  height:60vh;
  background-color:#bdcebe;
  max-width:800px;
  margin:auto;

} 

h1{
  text-align:center;
}

/*Downloaded from https://www.codeseek.co/irinabrennen/markdown-qpOZdb */
class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      editorText: '__I am groot__'
    };

  };

  handleChange (event) {
    console.log("inside handleChange");
    this.setState({ editorText :event.target.value });

  };
  
  render () {
    return (
      <div id="main-div">
        <h1>Markdown Editor</h1>
        
        <textarea id="editor" onInput={this.handleChange} onChange={this.handleChange}>
                  {this.state.editorText}
        </textarea>
        
        <h1>Markdown Previewer</h1>
        <div id="preview" dangerouslySetInnerHTML={{ __html:marked(this.state.editorText) }}>
        </div>

      </div>
    );
  };
}

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

Comments