MarkdownPad

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

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

Technologies

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

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

  
</head>

<body>

  <body>
  <div id="app"></div>
</body>
  <script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script>
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/0damian/markdownpad-RGwaBQ */
body {
  background: #e5e5e5;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}
body * {
  box-sizing: border-box;
}
body h1, body h2 {
  margin: 0 auto 18px;
  font-weight: 400;
}
body .header {
  text-align: center;
  margin-top: 24px;
  font-weight: 400;
  display: table;
  margin: 0 auto 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid #5f5f5f;
  color: #3f3f3f;
}
body .one-half {
  float: left;
  margin: 0 2%;
  width: 46%;
  padding: 15px;
  min-height: 80vh;
}
body textarea, body .content {
  background: #f5f5f5;
  font-size: 16px;
  border: none;
  color: #3f3f3f;
}
body textarea:focus, body .content:focus {
  outline: none;
}
@media screen and (max-width: 600px) {
  body .one-half {
    width: 96%;
  }
}
body img {
  display: block;
  margin: 6px auto;
}


/*Downloaded from https://www.codeseek.co/0damian/markdownpad-RGwaBQ */
var PropTypes = React.PropTypes;
// Add all business logic to main component
var Editor = React.createClass({
  displayName: "Editor",

  // set default text required by MdInput component
  getInitialState: function getInitialState() {
    // Add potentially dangerous pepe
    return {
      text: '##Type your *markdown* here!  ![pepe](https://66.media.tumblr.com/2a62809f53d0a566bcbbfad85da66600/tumblr_nqbo02EJx51us00yto1_250.gif)'
    };
  },
  // pass textarea content to parent 
  handleChange: function handleChange(e) {
    e.preventDefault();
    this.setState({ text: event.target.value });
  },
  // provide function for raw html trusting Marked library
  rawMarkup: function rawMarkup() {
    return { __html: marked(this.state.text) };
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      "\xA0 \xA0 \xA0 \xA0",
      React.createElement(
        "h1",
        { className: "header" },
        "MarkdownPad"
      ),
      React.createElement(MdInput
      /* Pass text value to output */
      , { text: this.state.text
        /* Make functions available to children */
        , onHandleChange: this.handleChange
      }),
      React.createElement(HtmlOutput
      /* Make functions available to children */
      , { showHtml: this.rawMarkup
      })
    );
  }
});

// Create input / output as stateless components
function MdInput(props) {
  return React.createElement("textarea", {
    // Use logic from parent component to handle input
    onChange: props.onHandleChange,
    defaultValue: props.text
    // make value available to parent's state
    , value: props.text,
    className: "one-half"
  });
}
// Require default text and input-handling function
MdInput.propTypes = {
  text: PropTypes.string.isRequired,
  onHandleChange: PropTypes.func.isRequired
  // Assume Marked library as trusted
};function HtmlOutput(props) {
  return React.createElement("div", {
    className: "content one-half",
    dangerouslySetInnerHTML: props.showHtml()
  });
}
// Require html-rendering function
HtmlOutput.propTypes = {
  showHtml: PropTypes.func.isRequired

  // Render parent container
};ReactDOM.render(React.createElement(Editor, null), document.getElementById('app'));

Comments