Markcook1.0 Development Summary

  markdown, vue.js, webpack

Project address:

Demo address:

First of all, I’d like to introduce Markcook. As the name implies, it can be understood as “a pot for boiling markdown” …

She is an open source, free, concise and efficient markdown editor, of course you can also use her as a local client.

It’s very simple, efficient and has nothing to spare.

She has many advantages:

  • Live preview, WYSIWYG, no need to worry about typesetting.

  • A complete set of shortcut buttons are provided, and typesetting can be carried out without consulting markdown syntax.

  • For a single-page application that is completely offline, the file clone of gh-pages branch can be downloaded and used as a local client.

  • Provides local caching to prevent loss of important content.

After Markcook’s introduction, let’s talk about the process of developing her.

Since I finally (learned) to set up my own personal blog not long ago, I need to use md to write articles. In the process of writing, I started to think about it. Can I write an editor that can analyze md myself? Because I have mastered vue.js, and at the same time its official website has similar examples, I think this idea can be found, so I started immediately.

First, I spent a morning learning the basic usage of vue-cli and webpack (the previous development scheme using vue was implemented with fis3+modjs, please refer to another article of mineWhen FIS3+mod.js development plan is deployed online, there is a bug resolution process where files cannot be found.)。 Only to find that the original development with webpack is a completely different experience. I am very happy and have learned a new skill. Thank you very much for the selfless help of the great gods in Q group.

After learning the basic knowledge of webpack, the project was initialized through vue-cli and the actual development began. Because the function is not complicated, it was developed very quickly and the function and style were completed in one afternoon. The style is to use the framework of bootstrap-material, because individuals especially like the design of material design. At the same time, in order to highlight the characteristics of “application”, the scroll bar style has been customized, and the O (− _ ∩ O) with pretty effect is displayed in webkit kernel browser.

In the past, I especially envied people who have online works, because I lacked back-end knowledge, so I didn’t know how to deploy the works to the server. This is my first online open source work. I was really excited when I successfully browsed my project online by inputting the address. This may be too childish for the great god, but it is a very different experience for me.

The project will continue to be maintained and more functions may be added or merged with other projects in the future. Anyway, learn a little and do a little ha ha ~

Thanks for reading, see ya next time!