Build a Markdown Previewer FreeCodeCamp

build-a-markdown-previewer-freecodecamp.markdown

Build a Markdown Previewer FreeCodeCamp

A Pen by Pappu Kumar Pashi on CodePen.

License.

index.html

<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 -->

script.babel

/*
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')
);

scripts

<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>

style.scss

// 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;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />