<!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! '
};
},
// 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'));