<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tjnoe01/pen/yewBYQ?limit=all&page=15&q=editor" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
html, body, #container, .full-height {
height: 100%;
}
.space-top {
padding-top: 50px;
}
#container {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
.editor, .output {
padding: 0 30px;
height: 50%;
}
.editor {
border-bottom: 1px solid #ccc;
}
.output {
overflow: auto;
}
@media only screen and (min-width: 768px) {
.editor, .output {
height: 100%;
padding: 0 20px;
}
.editor {
border-right: 1px solid #ccc;
border-bottom: none;
}
.output {
overflow: auto;
}
}
</style></head><body>
<div id="container"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/mode-markdown.js'></script>
<script >"use strict";
var Editor = React.createClass({
displayName: "Editor",
componentDidMount: function componentDidMount() {
this.editor = ace.edit(this.props.id);
this.editor.getSession().setMode("ace/mode/markdown");
this.editor.setTheme("ace/theme/github");
this.editor.setValue(this.props.value, 1);
this.editor.on("change", this.onChange);
this.editor.getSession().setUseWrapMode(true);
this.editor.setShowPrintMargin(false);
},
componentWillReceiveProps: function componentWillReceiveProps(newProps) {
if (this.editor.getValue() !== newProps.value) {
this.editor.setValue(newProps.value, 1);
}
},
onChange: function onChange() {
if (this.props.onChange) {
this.props.onChange(this.editor.getValue());
}
},
render: function render() {
return React.createElement("div", {
id: this.props.id,
className: this.props.className });
}
});
var Output = function Output(props) {
return React.createElement("div", {
className: props.className,
dangerouslySetInnerHTML: props.rawMarkup });
};
var Header = function Header(props) {
return React.createElement(
"nav",
{ className: "navbar navbar-inverse navbar-fixed-top" },
React.createElement(
"div",
{ className: "container-fluid" },
React.createElement(
"div",
{ className: "navbar-header" },
React.createElement(
"a",
{ className: "navbar-brand", href: "#" },
props.brandText
)
),
props.children
)
);
};
var Previewer = React.createClass({
displayName: "Previewer",
getInitialState: function getInitialState() {
return {
text: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n * apples\n * oranges\n * pears\n\nNumbered list:\n\n 1. apples\n 2. oranges\n 3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*'
};
},
handleChange: function handleChange(input) {
this.setState({ text: input });
},
rawMarkup: function rawMarkup() {
var rawMarkup = marked(this.state.text.toString(), { sanitize: true });
return { __html: rawMarkup };
},
render: function render() {
return React.createElement(
"div",
{ className: "container-fluid full-height" },
React.createElement(
Header,
{
brandText: "Markdown Previewer" },
React.createElement(
"p",
{ className: "navbar-text navbar-right hidden-xs" },
"Made By Tommy Noe for ",
React.createElement(
"a",
{ href: "https://freecodecamp.com", className: "navbar-link" },
"Free Code Camp"
)
)
),
React.createElement(
"div",
{ className: "row full-height space-top" },
React.createElement(Editor, {
id: "editor",
className: "editor col-xs-12 col-sm-6",
value: this.state.text,
onChange: this.handleChange }),
React.createElement(Output, {
className: "output col-xs-12 col-sm-6",
rawMarkup: this.rawMarkup() })
)
);
}
});
ReactDOM.render(React.createElement(Previewer, null), document.getElementById("container"));
//# sourceURL=pen.js
</script>
</body></html>
