You are currently viewing Build a Markdown Previewer with Vue.js

Build a Markdown Previewer with Vue.js

Learn how to build a markdown previewer with Vue.js in this tutorial for beginners.

🐦 Cody Siebert on Twitter:
🖥️ Code: sorry, I lost my code files and forgot to commit them to github… THIS IS WHY YOU COMMIT OFTEN!

🔗Check out Cody Seibert’s main channel:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:


This Post Has 12 Comments

  1. nguyen huy

    More project Vuejs, pleaseeeeeeeeee Cody 😭😭😭😭

  2. Tu Ngoc

    It occur error => Module not found: Error: Can't resolve '@/directives/markdown'

  3. Mohd A.

    Thank you this is what I've been trying to do for so long!

  4. Mohd A.

    For those who wants the code…

    const rules = [

    [/#{6}s?([^n]+)n/g, '<h6>$1</h6>'],

    [/#{5}s?([^n]+)n/g, '<h5>$1</h5>'],

    [/#{4}s?([^n]+)n/g, '<h4>$1</h4>'],

    [/#{3}s?([^n]+)n/g, '<h3>$1</h3>'],

    [/#{2}s?([^n]+)n/g, '<h2>$1</h2>'],

    [/#{1}s?([^n]+)n/g, '<h1>$1</h1>'],

    [/([^n]+)ns+=+/g, '<h1>$1</h1><hr/>'],

    [/([^n]+)ns+-+/g, '<h2>$1</h2><hr/>'],

    [/**([^*n]+)**/g, '<b>$1</b>'],

    [/*([^*n]+)*/g, '<i>$1</i>'],

    [/__([^_]+)__/g, '<b>$1</b>'],

    [/_([^_]+)_/g, '<i>$1</i>'],

    [/((nd..+)+)/g, '<ol>$1</ol>'],

    [/((n*.+)+)/g, '<ul>$1</ul>'],

    [/nd.([^n]+)/g, '<li>$1</li>'],

    [/n*([^n]+)/g, '<li>$1</li>'],

    [/![([^]]+)](([^)]+)s"([^")]+)")/g, '<img src>…'],

    [/{([^]]+)](([^)]+))/g, '<a href="$2">$1</a>'],

    [/([^n]+n)/g, '<p>$1</p>']


    export default {

    bind(el) {

    let html = el.textContent;

    rules.forEach(([rule, template]) => {

    html = html.replace(rule, template);


    el.innerHTML = html;



  5. cheng20342

    why don't you make a video with the materials we have learned so far in my FCC?

Leave a Reply