Markdown Previewer using VueJs
This is the first project under Data Visualization Certification from FreeCodeCamp . FCC recommends using ReactJS for this. But, I used VueJS in this project because it was easier and it gets things done fast. I used Bootstrap for styling and making a responsive design.
You can see the project live here.
This is the first time that I am using VueJS on my own without the help of any tutorial. In this article, I will try to explain how to create this app in detail.
1. Scaffolding — App set up
Vue CLI tool is very helpful for setting up the app. It automatically creates package.json, .gitignore, assets, index.html and other necessary files for the project.
First install vue and vue-cli:
npm install --save vue
npm install --save vue-cli
Initialize a project using webpack-simple template.
vue init webpack-simple md-viewer
and follow the instructions
After the project is created,
cd md-viewer
npm install
You can see the project running on the local server using
npm run dev
The advantage of using vue-cli with webpack template is that it auto-reloads after changes in the code.
Now, install the npm module, marked, which is a markdown parser library.
npm install --save marked
2. Creating Vue Components
Vue components are reusable and makes our code DRY. For this project, I created 3 components — header, the main app and footer. The header and footer can be used for other projects as well.
Header and footer components are simple templates containing header and footer elements respectively. Refer the project repo to see the templates. They are very simple and therefore I wont go into the details.
To use the header and footer templates in the main App.vue, import the templates in the script
portion of App.vue—
import header from './header.vue'
import footer from './footer.vue'
Then export them as components to be used in App template —
export default {
name: 'app',
data () {
//data objects here
},
computed: {
//methods to modify the data objects here, dealt with later
},
components: {
'app-header': header,
'app-footer': footer
}
}
Now we can use the app-header
and app-footer
components in App.vue
template:
<template>
<div id="app">
<app-header></app-header>
<div class = "container">
<!--The main App-->
</div>
<app-footer></app-footer>
</div>
</template>
3. The main App functionality
The App template consists of two div
elements — One text area for entering the text and one for showing the Preview. The directive v-model
is used to store the text entered in the textarea
.
The key part in this project is to convert the markdown text to a formatted preview using the marked library. In the computed
property of App component, perform the conversion function of the text entered (which is stored in a variable using v-model):
computed: {
previewText() {
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});
return marked(this.md_text)
}
}
previewText
contains the parsed HTML text. This is then rendered on the preview div
using v-html
directive. This directive interprets the raw HTML text and renders the formatted text.
4. App Demo
The project repository is here.
It is hosted live on surge here.
The Project finally looks like this —