DEV Community

loading...
Cover image for I created an online markdown viewer and editor ๐Ÿ“

I created an online markdown viewer and editor ๐Ÿ“

liyasthomas profile image Liyas Thomas Originally published at Medium ใƒปUpdated on ใƒป2 min read

Marcdown ๐Ÿ‘ป

Lightweight markdown viewer and editor

For one of my blog post, I was searching for an online markdown viewer and editor. There were many heavy-duty editors, with tones of useless features, but none seems to be easy and fast with all essential features.

That's why I created an online markdown viewer and editor tool: Marcdown to create, edit, view, and save markdown files on the go with ease. Marcdown is WYSIWYG!

WYSIWYG is an acronym for What You See Is What You Get. In computing, a WYSIWYG editor is a system in which content can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

Dark mode

Forget all the hassle of working with complicated editors. Learn how to create, edit, view, and save markdown files within minutes!

Marcdown is an open-source markdown viewer and editor optimized for change and adaptability to fit your exact needs.

Light mode

With Marcdown, now I can view and edit markdown files in all sizes for free; I can view, edit, create markdown files and download them from anywhere.

Viewing and editing markdown files is now as simple as 1, 2, 3!

  1. Paste or type markdown on left.

  2. View preview on right.

  3. Download markdown file.

Bonus: ๐ŸŒ— I also added an option switch to dark mode so that reading markdown files at night won't hurt your eyes!

Demo ๐Ÿš€

Feel free to contribute on GitHub


If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me @liyasthomas on Twitter ๐Ÿ’™. If any of my projects helped you please consider making a donation.

yep

EDIT 0: Added highlightjs support: Inline codes and code blocks will now be highlighted automatically.
EDIT 1: Added separator line between editor and preview ๐ŸŽ‰ Marcdown is a PWA. It works offline after first use. You can install it as a Web app on your phone or Desktop app on your PC. Click on the top-right PWA button to install as an offline app. Share your suggestions below & I'll implement them.

Discussion (30)

pic
Editor guide
Collapse
alienkevin profile image
Kevin Li

Hey, just a suggestion. I haven't use the editor yet but based on the demo images, I think you can try combine the editor and preview into one. That will make UX much more enjoyable and the UI cleaner and more efficient. Check out typora to see what I mean.

Collapse
liyasthomas profile image
Liyas Thomas Author

Yea, I got the idea. It would be cool. I'm on it ๐Ÿ‘Œ

Collapse
programom profile image
Abdulaziz • Edited

it's july 2020 and I do not see this feature implemented. I would love to see it soon. It will be a big advantage, especially I do not think there is any markdown web app has it yet. Great work!

Thread Thread
liyasthomas profile image
Liyas Thomas Author

The current markdown parser library I use is incapable of unified editor+viewer. That's why I'd to keep it as it is.

Collapse
arjvik profile image
Arjun Vikram

Beautiful! I love it!

Please add MathJax support! This would be great for people who need to include math equations in markdown.

I also fully support Kevin Li's suggestion to combine editor and preview. Check out Typora (typora.io) for an example of how this is done. I'm basically looking for an open source version of Typora at this point.

Again, looks great!

Collapse
liyasthomas profile image
Liyas Thomas Author

โœจ Added MathJax support for LaTeX, MathML, and AsciiMath notations. Hooray..! ๐ŸŽ‰

Collapse
liyasthomas profile image
Liyas Thomas Author

Both features are on the way ๐Ÿ”ฅ Follow project on GitHub for updates

Collapse
protium profile image
Brian Mayo

I whish dev.to uses this for the posts editor. It's so clean and nice. I would add a line to visualy separate markdown from preview.

Have you considered making a lib of this allowing devs to choose colors and buttons to show?

Awesome work

Collapse
liyasthomas profile image
Liyas Thomas Author • Edited

I too had the idea of separator line, I'm on it. Consider it's done.
More theming and customizations are on the way ๐ŸŽ‰

Meanwhile, I made Marcdown as a progressive web app. It works offline after first use. You can install it as a Web app on your phone or Desktop app on your PC. Click on the top-right PWA button to install as an offline app.

Collapse
darioromero profile image
Dario Romero

Great tool, but how do you insert equations? Like $\alpha2$

Collapse
liyasthomas profile image
Liyas Thomas Author

โœจ Added MathJax support for LaTeX, MathML, and AsciiMath notations. Hooray..! ๐ŸŽ‰

Collapse
liyasthomas profile image
Liyas Thomas Author • Edited

Support for LaTeX equations & mathematical formulas is in development. Wait for it ๐Ÿ‘ฝ

Collapse
elanandkumar profile image
Anand Kumar

Super cool.
In my opinion, if the editor can be split vertically on mobile device would be good. Just my random thought.

Collapse
liyasthomas profile image
Liyas Thomas Author

Wow. That's cool bro ๐Ÿ‘ Will be added in next commit.

Collapse
elanandkumar profile image
Collapse
liyasthomas profile image
Liyas Thomas Author • Edited

Thanks for the support ๐Ÿงก

What's new on Marcdown?

โœจ Added MathJax support for LaTeX, MathML, and AsciiMath notations. Hooray..! ๐ŸŽ‰

GitHub Link

Feel free to contribute on GitHub

Collapse
r4h33m profile image
Raheem

You beat me to it. Its been on my side-project bucket list for a while, because discord was a hassle. It's probably for the best though, it looks great and much better than what I would have made!

Collapse
liyasthomas profile image
Liyas Thomas Author

๐Ÿ’š Glad you liked it. Check out my other projects on GitHub.

By the way, you should proceed with your bucket list. I'll definitely check it out. There's always something to learn from everyone :)

Collapse
sarthology profile image
Sarthak Sharma

Damn Clean !! โค๏ธ

Collapse
liyasthomas profile image
Liyas Thomas Author

Glad you liked it. Check out my other projects on GitHub.

Collapse
leo_png profile image
Leo.png

It's awesome !

Collapse
liyasthomas profile image
Liyas Thomas Author

Glad you liked it. Check out my other projects on GitHub.

Collapse
danramzdev profile image
Daniel Ramirez Mendoza

It's awesome!!!, one question, Can I use different themes?, I want to use that dracula theme you use on first demo image.

Collapse
liyasthomas profile image
Liyas Thomas Author

More theming and customizations are on the way โœจ

Dark mode seen in the demo can be activated from Dark mode toggle icon ๐ŸŒ™ on the top-right of the screen.

Collapse
stephanie profile image
Stephanie Handsteiner

Literally beat me to market. I've been working on something like this in my spare time the past week as well.

Looks good, keep it up! ๐Ÿ™‚

Collapse
liyasthomas profile image
Liyas Thomas Author

๐Ÿ’š Glad you liked it. I've just added code highlight feature. Inline codes and code blocks will now be automatically highlighted. Check out my other projects on GitHub.

You should proceed with your work. Every contribution helps :)

Collapse
thefern profile image
Fernando B ๐Ÿš€ • Edited

Looks clean! I use stackedit online, but this looks awesome! Btw the pwa icon is barely visible.

Collapse
liyasthomas profile image
Liyas Thomas Author • Edited

Glad you liked it. Check out my other projects at GitHub

๐ŸŽ‰ will fix PWA button

Collapse
sm0ke profile image
Sm0ke

This is gold!

Collapse
liyasthomas profile image
Liyas Thomas Author

Glad you liked it. Check out my other projects on GitHub.