MarkDown

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

Thumbnail
This awesome code was written by roblegaspi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright roblegaspi ©
  • HTML
  • CSS
  • JavaScript
    
<div id="app">
  <textarea id="editor" cols="30" rows="10" placeholder="Markdown text.." v-model="markdownText"></textarea>
  <div id="markdown">
    <div id="markdown-value" v-html="markdownValue"></div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/roblegaspi/markdown-ggYLwm */
    #app
  display: flex
  overflow: hidden
  >*
    overflow-y: auto
    border: 1px solid #000
    width: 50vw
    height: 100vh
    &#mardown
      padding: 5px 10px

  code
    background: #EFFFE9
    color: #EE7785

  a
    text-decoration: none
    color: #E71D36
  


/*Downloaded from https://www.codeseek.co/roblegaspi/markdown-ggYLwm */
    new Vue({
  el: "#app",
  
  data: {
      markdownText: ""
  },
  
  computed: {
    markdownValue() {
      return marked(this.markdownText);
    }
  }
});

Comments