Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Build a Markdown Previewer FreeCodeCamp
<div class="fluid-container">
<div class="row">
<div id="title" class="text-center col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"></div>
<div id="markdown-container" class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"></div>
</div> <!-- row -->
</div> <!-- fluid-container -->
/*
User Story: I can type GitHub-flavored Markdown into a text area.
User Story: I can see a preview of the output of my markdown that is updated as I type.
*/
// clear the console
console.clear();
// title component
let Title = React.createClass({
render: function() {
let titleClass = 'heading-text-one';
let codedByClass = 'heading-text-two';
return (
<div>
<h1 className={titleClass}>{this.props.title}</h1>
<h5 className={codedByClass}>Coded by <a target="_blank" href="https://www.freecodecamp.com/pappu_kumar_pashi">Pappu Kumar Pashi</a></h5>
</div>
)
}
});
ReactDOM.render(
<Title title='Markdown Previewer'/>,
document.getElementById('title')
);
// tip component
let Tips = React.createClass({
propTypes: {
tipArr: React.PropTypes.array
},
getInitialState: function() {
return {
counter: 0
}
},
_incrementCounter: function() {
if (this.state.counter >= this.props.tipArr.length - 1) {
this.setState({counter: 0});
} else {
this.setState({counter: this.state.counter + 1});
}
},
componentDidMount: function() {
let myInterval = setInterval(this._incrementCounter, 10000);
this.setState({myInterval: myInterval});
},
render: function() {
let classes = 'heading-text-one';
return (
<div>
<h5 className={classes} dangerouslySetInnerHTML={{__html:this.props.tipArr[this.state.counter]}}></h5>
</div>
)
}
});
/*ReactDOM.render(
<Tips tipArr={[
"Use # before text to create an H1.",
"Use ## before text to create an H2."
]}/>,
document.getElementById('tips')
);*/
// markdown and output
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
let MarkdownOutput = React.createClass({
render: function() {
return (
<div>
<h4>Markdown Output</h4>
<hr></hr>
<div dangerouslySetInnerHTML={{__html: marked(this.props.value)}}></div>
</div>
)
}
});
let MarkdownContainer = React.createClass({
getInitialState: function() {
return {
value: '## This is some markdown\n### Consider making your own\n\n#### List items\n- George\n- Paul\n- Ringo\n- John\n\n#### Make it **bold** or make it *italic*\n\n#### Create links [Github](https://github.com/PappuKP)'
}
},
handleChange(event) {
this.setState({value: event.target.value});
},
render: function() {
console.log(marked(this.state.value));
let containerClass = 'rounded-corners container-class col-xs-12 col-md-6';
return(
<div>
<div className={containerClass}>
<h4>Markdown Input</h4>
<hr></hr>
<textarea className="markdown-text" onChange={this.handleChange} value={this.state.value}/>
<hr></hr>
<Tips className='text-center' tipArr={[
"Use # before text to create an h1.",
"Use ** ** or __ __ to make text <b>bold</b>.",
"Use ## before text to create an h2.",
"Use * * or _ _ to make text <i>italic</i>.",
"Denote sections of code with ``` ```."
]}/>
</div>
<div className={containerClass}>
<MarkdownOutput value={this.state.value}/>
</div>
</div>
)
}
});
ReactDOM.render(
<MarkdownContainer />,
document.getElementById('markdown-container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
// font
$markdown: 'Source Code Pro', monospace;
$title: 'Eczar', serif;
$codedby: 'Lobster Two', cursive;
// color
$bodyBackground: #E8DAEF;
$borders: #89466F;
// element
body {
background-color: $bodyBackground;
width: 98%;
}
hr {
padding-top: 0px;
margin-top: 0px;
border-color: $borders;
margin-bottom: 10px;
}
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 400px;
min-height: 400px;
max-height: 400px;
margin-bottom: 10px;
}
// class
.heading-text-one {
font-family: $title;
}
.heading-text-two {
margin-top: 0px;
font-family: $codedby;
}
.markdown-text {
font-family: $markdown;
}
.container-class {
background-color: white;
border: 2px solid $borders;
height: 500px;
}
.rounded-corners {
border-radius: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment