Vue Js Markdown

Posted on  by admin

A few weeks ago, I created a few videos of me converting jQuery plugins to vanilla JS. I thought it would be fun to do the same thing with the demo projects from a few popular frameworks.

Today, I’m converting the Vue.js markdown editor demo into vanilla JS. Let’s dig in.


Watch me code

If you want, you can watch me code this project.

  • A Powerful and Highspeed Markdown Parser for Vue. Contribute to Akirami/vue-markdown-v2 development by creating an account on GitHub.
  • A very simple markdown editor for Vue.js.

You can also download the source code on GitHub.

How I approached this project

The first thing I did was rip out Vue and lodash from the source code. We’re not going to need either of them. I left in the marked.js library, however, because converting markdown to HTML is something I’m happy to let a library handle for me.

Use Node and Vue to create a realtime markdown editor, featuring live preview and realtime collaborative updates. In this video I discuss Vuepress the new Vue.js static site generate by the people who created Vue.js. This markdown centered project will make it easy for you to create documenation for your site.

I also stripped out all of the Vue syntax and properties from the elements in the HTML.

Next, I used the querySelector() method to get the textarea element, and the div that the compiled HTML is getting rendered into.


Converting markdown to HTML


Whenever the value of the textarea changes, we want to parse it into markdown and render it into the UI.

The Vue demo uses lodash to debounce this event so that it only runs after the user has stopped typing for 300 milliseconds. The thing is, we don’t need a whole 30kb library for that!

First, I attached an input event handler to the text element with the addEventListener() method. I passed in a named function, changeHandler(), as my callback.

In the changeHandler() function, I pass the text.value, the text in the textarea element, into the global marked() function that marked.js creates. I also kept the {sanitize:true} option that was in the Vue.js demo.

Then, I use the innerHTML property to inject the resulting HTML into the compiled element.

You typically want to sanitize third-party content like user-generated inputs, but the older version of marked.js that the demo uses appears to do this for you.

Debouncing without lodash

Now, let’s debounce this so that it only runs after the user stops typing. First, I created a debounce variable that will store the current pending callback.

Inside the changeHandler() function, I use the setTimeout() method to run the “convert to markdown” code after a 300 millisecond delay, and assign it to the debounce variable.

Whenever the changeHandler() function is called, I first use the clearTimeout() method to cancel any existing setTimeout() assigned to debounce so that it doesn’t run. As a result, only the last instance of the function will run.

Vue.js Markdown 表示

Four lines of code negated the need for a 30kb JS library.

Adding default text

The Vue demo starts with some code in the textarea. Because it uses state-based UI, that value is part of a JS object.

But we can get the same effect by just adding the text we want directly to the textarea element.

We also want to render this initial text to HTML when the page loads.

I moved the code to convert the text.value to HTML and inject into the UI into a new function: render(). I call this function in my setTimeout().

Then, in addition to setting up an event listener, I call my render() function when the page loads to convert any initial text to HTML.

And with that, the project is done.

Wrapping up

Vue Js Markdown Tutorial

The finished project is 18 lines of code, with white space and in-code documentation. The Vue demo is 16 lines of code with no space, no documentation, and an extra 60kb of frameworks and libraries.


Obviously this was a very simple project, but hopefully you can see that for a lot of tasks, the vanilla JS versions are just as simple, with far fewer dependencies.