Markdown Preview

I created a new app for everyone. In this article, I will write about how I built it and what you can use it for.

"Markdown Preview"

If you're not interested in the development process, you can skip the rest of the article and visit the app: md-preview.vercel.app. Enjoy.

Table of Contents

The idea.

The idea was not really a problem, because I have a list of side-projects I want to build. So, I just picked the one I like the most. And, yes, that means I'll create more free apps for all of us.

What can you use it for?

~ As the name says, it's a markdown preview app, so you can easily write your markdown and see the result instantly.
~ You can use it to practice writing markdown itself because I provided the most used syntax as a starting point.
~ The app itself is an OSS project, so you can check the code and maybe learn something new.
~ It is a Progressive Web Application, so you can use this repo as a starting point for your own project.
~ As noted in the previous point, "Markdown Preview" is a PWA, so if you're using a similar tool already, consider using this one, because you can use it offline too.
~ You're writing your README files in your IDE, but then you don't like how it looks like on GitHub? No worries, you can use this app instead, because it has the same styling as GitHub(syntax highlighting too).

Development process

I decided to use a Nuxt.js, because it fits well for the needs of this project. I needed SSG, PWA, SEO support out-of-the-box... And, I really like it. 😊

Steps:

1 . I initialized a Nuxt project using create-nuxt-app. Make sure you have npx installed (npx is shipped by default since NPM 5.2.0) or npm v6.1 or yarn.

npx create-nuxt-app markdown-preview

It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc. I chose these options:

markdown-preview-setup.png

The next step is to navigate to the project folder and launch it:

cd markdown-preview
yarn dev

The application is now running on http://localhost:3000.

2 . I installed a normalize.css package to reset CSS:

yarn add normalize-css

and added it to the nuxt.config.js file.

  css: [
    'normalize.css/normalize.css',
  ],

3 . I'm using Less as a CSS preprocessor, so I added a less and less-loader as devDependencies

yarn add less less-loader -D

Additionally, I added one app.less file which will hold all custom styles. Normally, I choose TailwindCSS for all of my projects, but I decided to skip it this time because I have no more than 50 lines in the app.less file.

4 . I also added a codemiror package, which I will use for the editor.

yarn add codemirror

And, I will later initialize it in my .vue component like this:

import CodeMirror from 'codemirror'

this.codemirror = CodeMirror.fromTextArea(document.getElementById(this.id), {
    mode: 'markdown',
    lineNumbers: true,
    theme: 'default',
      extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
    });

I suggest you check this step in the code (index.vue file);

5 . I also needed a code sanitizer, and I decided you use DOMPurify:

yarn add dompurify

Later I'll use it in the code like this:

import DOMPurify from 'dompurify'
DOMPurify.sanitize(this.code)

6 . The only dependency left to install is the one that will transform our markdown code to the HTML output. For this I used the marked package:

yarn add marked

and now, I'll use it to transform markdown code to HTML:

import marked from 'marked';
DOMPurify.sanitize(marked(this.code));

7 . For styling of the code output I decided to GitHub-like CSS, and there is actually a package for this purpose.

yarn add github-markdown-css

I added it too to the nuxt.config.js:

css: [
  'github-markdown-css/github-markdown.css',
],

8 . The only thing left to do is to handle syntax highlighting of the code blocks. I found this handy NPM package highlight.js.

yarn add highlight.js

I will later use it as a callback in the marked method, like this:

return DOMPurify.sanitize(marked(this.code, {
    highlight: code => require('highlight.js').highlightAuto(code).value
  }))

9 . Added custom code. It would take too much to write all the code here, but you can find the whole codebase here: Markdown Preview Repo. Let me give you a hint, the main part of the code is in the index.vue file.

Deployment

Luckily, setting a CD on Vercel is quite straightforward. In just a few clicks you can deploy your app.

1 . Create a new project (I assumed that you already have a Vercel account, but if you don't you can create one here)

new-project.png

2 . Choose a repo

choose-repo.png

3 . Choose an account

choose-account.png

4 . Deploy

deploy.png

And that's it! Your app is deployed!

Project specification

Name"Markdown Preview"
AuthorMarko Denic
DescriptionProvides a live-preview of the Markdown code using GitHub styling.
Linkmd-preview.vercel.app
Repositorygithub.com/MarkoDenic/markdown-preview
LicenceMIT
Release date01. Feb 2021
Version1.1.0

Conclusion

The project itself is very useful. I searched for similar tools, and couldn't find any of them as a PWA, also none of them had a syntax highlighting. This app uses the benefits of Service Workers, so once the app's assets are cached in the browser, every visit to this app will take only 0.187 Kb (yes, 187 bytes) of your data usage. Or simply install it on your device, and you can use it offline too.

If you want to build a PWA or an SPA of your own, I encourage you to use this project as a starting point. It covers a lot of needs out-of-the-box, like PWA module, SSG support, SEO support, ESLint, code-splitting, automatic components import. I also used a few vendor packages, so you can benefit from them too. Codemirror editor, marked package, DOMPurify and highlight.js.

If you have any questions, feel free to ask in the comments or @ me on Twitter.

This project is part of the Vercel Hashnode Hackathon

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️

Csaba Kissi's photo

Thank you, Marko! Well done. And thank you made it open source!

Marko Denic's photo

Thanks, Csaba. If you have any suggestions, feel free to contact me.

Ifeanyichukwu John's photo

Good one

Marko Denic's photo

Thanks a lot, John!

Skate Byrne's photo

As an avid markdown user I approve 🥳 one of the projects that have been at the top for a while is a personal knowledge database that uses markdown files. I'll keep this in mind! It was so useful for me to finally see exactly how you can make one, thank you for this!

Marko Denic's photo

Wow. Thanks a lot, Skate!

Danny Steenman's photo

Cool app!

Marko Denic's photo

Thanks, Danny. Glad you like it.

Chris Kalmar's photo

Nice job, Marko. 🤘 I like the offline feature. 🙌 I think the CD part is very useful to many devs. Vercel really simplifies this process a lot. I'm using Netlify sometimes, same there. So, what are the next features that you want to implement?

Marko Denic's photo

Thanks a lot, Chris. Mostly, I'll wait for the feedback and needs of the users to add new features. If you have something in mind let me know.

Victoria Lo's photo

This is an awesome project. A must have tool for all devs! Nice one Marko!

Marko Denic's photo

Thanks a lot, Victoria! :)

Josias Aurel's photo

Nice Mark. I tried it and it works so well. The syntax highlighting and PWA feature are cool addition too. Good luck in the Hackathon

Divya Xavier's photo

App worked but solves very basic needs. The main problem I face is that it doesn't scroll to the current place I am working on. Also, there is no syntax highlighting for code blocks in markdown. Excluding these, the app is good. Thanks.

Show +1 replies
Divya Xavier's photo

Marko Denic Hey, that's awesome brother, I meant of the code output and you have made it. That's awesome and thanks.

Another thing that I said important is that it automatically scrolls to the portion I am working on. I think it is easy to build up. Screencast 2021-02-04 08_12_38.gif

Take help from here: https://codepen.io/atapas/pen/KKNwxeP

Hope it helps, and this makes the app fit for use on a daily basis

These are just my suggestions, not feedback just to make your app better.

Marko Denic's photo

My pleasure. Regarding "automatic scroll", I believe it would make more harm to the UX than it would benefit it. But, I promise I will think about it.