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
21

Update!

@vrintle, I’ve added tooltips to all the markdown buttons and the theme toggle and the download button. Also, this website should load even better because almost (everything except the footer) are made of Vue components.

1 Like
22

:confetti_ball: I am pleased to announce that MarkMe! has been featured on MadeWithVueJS.com! ===> https://madewithvuejs.com/markme :confetti_ball:

5 Likes
23

I have also released a new update with bug fixes and mobile responsiveness has been fixed, let me know if it does not look responsive on your mobile device.

24

http://madewithphp.com/

So we wait

2 Likes
25

Just bought madewithglitch.me, should be up soon.

2 Likes
26

If I where to set this up, where should I host it?

  • My Own Server
  • Glitch

0 voters

27

Looks good already! Shoot me a DM if you need any help making this, I would be happy to help :slight_smile:

28

I would really like to host it on Glitch but hosting on my own server makes SQL a lot easier… I’ll think about it.

1 Like
29

I would be happy to help you write it with Mongoose, express and Node. :slight_smile: @RiversideRocks

30

Would love to see a collaboration on a project between @RiversideRocks and @EddiesTech, I’m looking forward to it! My suggestion is to use Express, Node and Mongo.

3 Likes
31

https://madewithglitch.me

This is what I have at the moment.

4 Likes
32

Looking awesome already! Make sure you create a badge that says “Made with Glitch” which can be embedded in READMEs and HTML (use shields.io for custom badges)

2 Likes
33

I see you’re using PHP :eyes:
I like the random colour choice, this could also be done with Javascript if we were to move to Node :wink: Let’s be honest, if you are using Glitch, you may as well use Node.js. PHP and SQL is too much of a hassle here. Also passport.js and other packages are much more simpler to use on Node.js

2 Likes
34

I will consider, never have done node with Apache. It should be possible, I will send out a POC later today.

35

Maybe @RiversideRocks can work on the UI and front end and @EddiesTech will handle on the server side Express code?

2 Likes
36

Instead of listening on 80 do you listen on 3000?

37

You don’t need Apache to run Node…?

2 Likes
38

As I have said many times I am useless with webdesign. I’d be happy to do the backend

39

Yeah, remix hello-express, you’ll get a basic Node app.

2 Likes
40

Oh I was just talking about on my own server.

2 Likes
42

And that’s exactly what he agreed to do :slightly_smiling_face:

3 Likes
43

I see you have a Glitch app, we can use that.

4 Likes
44

You guys might wanna make a new thread for madewithglitch.me.
Just so you can be on-topic. If you make a new thread make it uncategorized, because its an upcoming project.

2 Likes
45

Was thinking about that too :slight_smile:

3 Likes
46

Once I have a bit more time I might set up a thread.

2 Likes
47

Could I help with madewithglitch @RiversideRocks

48

I’ll assemble a team once I get the thread set up.

3 Likes
49

Okay

20chars

51

Great for notes during class! I’m bookmarking this website on my school PC!

3 Likes
52

Glad you liked it! :slight_smile:

53

You’re even on the front page! :joy:

image
image1920×1040 363 KB

6 Likes
54

The description and the cover image was by the staff of MadeWithVueJS.com themselves, and they’ve described it well.

1 Like
55

hi, in addition to a PWA can you make it a installable app for chrome books. I’d love to have this for school(and annoy my teacher by typing in all markdown)

4 Likes
56

Thanks for the idea, I’ll see what I can do!

57

Since this is a static site, it does not count towards my Project Hours, so everyone feel free to use it as much as you like! :slight_smile:

I’ll also be releasing a version built using the Vue CLI, hosted on Vercel which will be more faster and more lighter!

2 Likes
58

could i help???

sorry for being a bit off topic

2 Likes
59

1478×803

New features:

  • 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

And minor CSS bugs have been fixed.

5 Likes
60

Slick! Super cool to have a dark theme writing platform.

1 Like
61

Glad you liked it! :blush:

62

is there a possiblity of switching to indexeddb, which isn’t synchronus and has no storage limit besides on firefox?

63

Why would I want to use a database in MarkMe? Currently, there’s no databases being used.

1 Like
64

there’s an annoying 5mb limit, but lemme do the calculations of how much chars you can input before you run out
In python a character is 2 bytes so 512 chars per kb. 5mb = 1024*5 kb = 1024 * 5 * 512 = 2621440 characters assuming your average word size is approx 2.5, we can store 1048576 words

65

Wow, never knew such a thing existed! And apparently it has really huge storage limit. So I’ll be switching to IndexedDB, and use localStroage as a fallback option.

Thanks for suggesting this!

2 Likes
66

Your welcome, it also explains a few things like how google can download my mail and how google docs offline works although I’m switching from gsuite to a combination of markme and wiki.js.org for school
:slight_smile:
besides google docs is already very laggy

1 Like
67

Like how it appeared in MadeWithVueJS.com, MarkMe! somehow showed up in VueTelemetry! (I honestly don’t know how) https://vuetelemetry.com/explore/markme-glitch-me

Thanks for all your support and feedback!

68

I wonder if there’s a bot that crawls the web and detects vue apps then.

69

They do apparently using an extension

image
image984×722 103 KB

70

Dark/light mode button doesn’t work on chrome -_-

71

refresh, it worked for me the second time somehow the first time every js didn’t load

2 Likes