Our first step could be to create a template in App.Vue.Vue v-model is a directive that gives two-way knowledge binding between an enter and kind knowledge or between two parts.
So, right here v-model binds our enter knowledge, parses it with the assistance of directives.js.
Right here, it binds the information markdown from the enter part to the output part utilizing our key.
You may add your CSS both to <type scoped> or in a separate CSS file!
It is a very fundamental and minimal type.css file. Right here’s how one can get inventive and make your challenge look interesting!
It is time to make the directives! I extremely suggest using regex101 to check your regex expressions with take a look at strings. You may examine regex over here.
Eventually, we have to apply the principles we simply made with regex to the template handed. The foundations parse the template and innerHTML units the HTML contents of a component on an internet web page.
And at last, Don’t neglect to import the directives and type.css in most important.js, which is the primary rendering file of the app.
Right here’s what your most important.js ought to appear to be!
Now run the next instructions assuming you might be in MarkdownParser listing or just observe this documentation:
> cd markdown
> npm run serve
The app could be working in your localhost, you’ll be able to Ctrl + Click on on the hyperlink to open the app in your browser.
Viola! You simply created your very personal Markdown Parser!
I plan on working extra on the principles and growing the performance of the directives sooner or later.
I discovered a lot about regex, javascript, and Vue whereas constructing this challenge. I hope this weblog helped you too!
Be at liberty to contribute to this challenge following these guidelines!!
Wish to Join?Right here’s my LinkedIn handle.
