MarkMe! - A simple, lightweight and beautiful Markdown editor and viewer

Project URL: https://markme.glitch.me

MarkMe!

A simple, lightweight and beautiful Markdown editor and viewer.


GitHub stars
GitHub issues

View Demo · Report Bug · Request Feature

Loved the project? Please consider donating to help it improve!



Features

  • Lightweight :cloud: and beautiful :heart_eyes:

  • Real time WYSIWYG Markdown to HTML editor

  • :writing_hand: Automatic syntax highlighting for code blocks with Prism.js

    • 185 languages and 89 styles
    • Automatic language detection
    • Multi-language code highlighting
  • Dark mode :crescent_moon: for night owls

  • Real time viewer :dark_sunglasses: - view changes as you type

  • Sanitises :broom: your HTML output code and removes harmful HTML to prevent XSS attacks

  • Supports GitHub-flavoured markdown

  • Output HTML is beautified :paintbrush: using Prettier

  • Installable PWA :floppy_disk: - install on desktop or mobile [BETA]

To-do

  • PWA & offline support (the code to do this is present, but randomly it doesn’t work on specific devices)
  • Mobile responsiveness (doing)
  • Dark theme
  • Download markdown & html in various file formats
  • Sanitise HTML to prevent XSS and other dangerous stuff.
  • Sync scrolling

License

This project is licensed under the MIT license, see LICENSE.md.

Contributions

All contributions are welcomed, no matter how big or small it is, even if it is a typo! Just open a pull request with your changes!

Support The Project

Almost everything I create is open-source and free. While it takes time and effort to create free and open-source projects, I would appreciate it if you bought me a donut!

Acknowledgements

This is just a side-project I did, I learnt a lot from creating this web project.

Made with Vue & Glitch

13 Likes

great job! im using it now

2 Likes

i used this last night and it was really great, awesome work!

8 Likes

OMG I NEVER SAW THIS THING!!! =O

best Markdown -> html editor i’ve seen YET

2 Likes

Also recommend having a look at Typora and MarkText, I’ve been so lucky that I got to use Mark Text in my school work on dark theme instead of Microsoft Word. Gosh, I think having a dark theme markdown editor sped up my work by double!

3 Likes

Woah, Typora is impressive!

2 Likes

Indeed, I used Typora at first, but I outgrew typora and started used MarkText instead which I think is much better for actually writing markdown. The plus side with marktext is that it also is open source, you should try it out :stuck_out_tongue: I use it for writing my README files :smiley:

2 Likes

Thanks @jenn! :blush::grin:  

2 Likes

Anyhow, good work on the implementaton!

2 Likes

Thinking about a Vue rebuild…

Sounds interesting!! It’s been some time since I’ve used Vue, I remember last time I used vue I had troubles getting started because the Vue CLI had changed! So I literally took the time to configurate the project myself with no boilerplate :joy:

2 Likes

Mobile support. Nice. :ok_hand:

2 Likes

:joy::sweat_smile: Ever since I added the download option, the mobile version deteriorated, so I need to fix that.

How about adding a tooltip to those markup button @khalby786 ?

EDIT: also, you #M page icon is invisible when the page is active :sweat_smile:

1 Like

Thanks for the feedback @Vrintle, I’m currently attempting to fix all the bugs described in this thread + new UI interactions.

@ihack2712, I’ve rebuilt MarkMe with Vue.js, it’s much faster and lighter: https://markme.glitch.me.

3 Likes

The logo is white in colour, maybe I should add a black border. :sweat_smile:

1 Like

I’ve also fixed a few bugs along with the ability to hide/show the Markdown or HTML windows.

1 Like

I really like the fonts! Could you share the fonts and colors that are used in the project?

1 Like

Markdown editor font: Fira Mono
HTML <code> and <pre>: Fira Mono
Background color: #BFEDEF
Background color (darkmode): #100e17
Border, headings and Markdown elements: #ff6b6b

2 Likes