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

The Gallery
1

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

e0b394db-80ae-4783-a487-56cecfa7615a%2Fmarkme-banner.png?v=15970635167621200×628

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!

MarkMe!
MarkMe!1478×803

MarkMe!
MarkMe!1478×803

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

14 Likes
2

great job! im using it now

2 Likes
3

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

8 Likes
4

OMG I NEVER SAW THIS THING!!! =O

best Markdown -> html editor i’ve seen YET

2 Likes
5

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
6

Woah, Typora is impressive!

2 Likes
7

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
8

Thanks @jenn! :blush::grin:  

2 Likes
9

Anyhow, good work on the implementaton!

2 Likes
10

Thinking about a Vue rebuild…

11

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
12

Mobile support. Nice. :ok_hand:

2 Likes
13

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

14

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

markme
markme762×249 25.3 KB

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

1 Like
15

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

16

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

3 Likes
17

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

1 Like
18

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

1 Like
19

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

1 Like
20

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