Markdown Previewer Styled

In this example below you will see how to do a Markdown Previewer Styled with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0c0de, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0c0de ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Markdown Previewer Styled</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="root">
</div>
  <script src='https://unpkg.com/react@16/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.5/showdown.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0c0de/markdown-previewer-styled-pdqLxd */
@import url('https://fonts.googleapis.com/css?family=Quicksand');
html{
  background-color: #e7d7c1;
}

.title{
  text-align:center;
  font-family: 'Quicksand', 'sans-serif';
  color: #a78a7f !important;
}

ul li{
  list-style-type: square !important;
  margin-left: 3rem;
}

.out-text{
  font-size: 24px;
  color: #888888;
}

#out{
  overflow: auto;
  text-align: left !important;
}

input[type="textarea"]{
  border: 1px solid #a78a7f;
  border-radius: 5px;
  width: 200px;
  min-height: 200px;
  height: auto;
  text-align:center;
  display: border-box;
}

form{
  text-align:center;
  resize: vertical;
}

#input{
  margin-right: 6rem;
}

/*Downloaded from https://www.codeseek.co/0c0de/markdown-previewer-styled-pdqLxd */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MarkDownApp = function (_React$Component) {
  _inherits(MarkDownApp, _React$Component);

  function MarkDownApp(props) {
    _classCallCheck(this, MarkDownApp);

    var _this = _possibleConstructorReturn(this, (MarkDownApp.__proto__ || Object.getPrototypeOf(MarkDownApp)).call(this, props));

    _this.state = {
      textConverted: '',
      textSample: '#Heading\n##Another Heading\n###Just one more\nHello\n===\n\n>Also some blockoutes are programmed\n\n*This is a italic type*\n\n**This is bold type**\n\nHave to buy:\n* Apples\n* Bananas \n* Watermelon\n\nHave to buy:\n1. Apples\n2. Bananas \n3. Watermelon\n\nThis link goes to freecodecamp <https://www.freecodecamp.org/>\n\nIf you want to know more about [showdownjs syntax][1]\n\n[1]:https://github.com/showdownjs/showdown'
    };
    return _this;
  }

  _createClass(MarkDownApp, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      $('#input').val(this.state.textSample);
      $('#input').trigger('autoresize');
      this.convertText(this.state.textSample);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return React.createElement(
        'div',
        { 'class': 'row' },
        React.createElement(
          'h1',
          { 'class': 'col s12 m12 l12 center title' },
          'Markdown App for FreeCodeCamp'
        ),
        React.createElement('br', null),
        React.createElement('br', null),
        React.createElement(
          'form',
          { 'class': 'col s12 center-align' },
          React.createElement(
            'div',
            { 'class': 'input-field col s5 offset-s1' },
            React.createElement('textarea', { id: 'input', onChange: function onChange(e) {
                return _this2.handleChangesText(e);
              }, 'class': 'materialize-textarea' }),
            React.createElement(
              'label',
              { 'for': 'input' },
              'Input Text'
            )
          ),
          React.createElement(
            'div',
            { 'class': 'col s5', id: 'out' },
            React.createElement(
              'h6',
              { 'class': 'col s12 out-text' },
              'Output Text'
            ),
            React.createElement('div', { 'class': 'col s12', dangerouslySetInnerHTML: { __html: this.state.textConverted } })
          )
        )
      );
    }
  }, {
    key: 'handleChangesText',
    value: function handleChangesText(e) {
      this.convertText(e.target.value);
    }
  }, {
    key: 'convertText',
    value: function convertText(text) {
      var showdownInstantiated = new showdown.Converter();
      var convertedText = showdownInstantiated.makeHtml(text);
      console.log(convertedText);
      this.setState({ textConverted: convertedText });
    }
  }]);

  return MarkDownApp;
}(React.Component);

ReactDOM.render(React.createElement(MarkDownApp, null), document.getElementById("root"));

Comments