Github flavoured markdown

github-flavoured-markdown.markdown

Github flavoured markdown

A Pen by Karthik on CodePen.

License.

index.pug

.container
  #container

script.babel

var Markdown = React.createClass({getInitialState: function(){return {userInput: '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 *[Karthik N](codepen.io/furball)*'};},

 rawMarkup: function(value) {
      var rawMarkup = marked(value, {sanitize: true});
      return { __html: rawMarkup };},                                  render: function(){return (<div className="row"><div className="col-md-6"><textarea rows="22" type="text" className="form-control" value={this.state.userInput} onChange={this.handleUserInput} /></div><div className="col-md-6"><span dangerouslySetInnerHTML ={this.rawMarkup(this.state.userInput)} /></div></div>);},
                                  
handleUserInput: function(event){this.setState({userInput: event.target.value})}                                });
ReactDOM.render(<Markdown />,document.getElementById('container'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>

style.sass

.container 
  margin-top: 15px
  background: yellow
textarea
  resize: vertical
  height: 100%
  box-shadow: 0 3px 0 0 #222121, inset -1px -3px 10px 1px #515151

styles

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