DEV Community 👩‍💻👨‍💻

Cover image for Markdown Editor with JavaScript
JoelBonetR
JoelBonetR

Posted on

Markdown Editor with JavaScript

For this little project I'm using Marked to parse the markdown content.

It's just 3 lines of JS in this case, most of the time invested here is in styling.
You'll find a text set as a sort of placeholder that serves the purpose of a quick markdown guide.

Here it goes:

You can edit the textarea and write whatever you want in markdown and it will be translated into HTML with the preview being at the right side (or at the bottom if you're using a smartphone).

That's all for today, hope you enjoyed I sure did doing that

Top comments (1)

Collapse
 
efpage profile image
Eckehard

Hy Joel,

I tried to extend the Markdown-Approach to create entire websites. This is a bit experimental, but works pretty well. Please check out this page to see an example:

efpage.de/DML/DML_homepage/

The whole webpage contains only two HTML-templates, some javascript to implement the Markdown-parser, but the content is written down in markdowns

If you check out the index.html, you will find it is pretty short. But there is no CMS behind, the whole content is written files named content1.js., content2.js ...

Inside content1.js, you will find mostly text, for convenience this is jus encapsulated in a string named head or content:

let content =
` #DML building blocks overview...
...

So, the whole pagesetup is pretty simple using only some self defined MARKUP.

I think, Markups can be pretty powerful, and we could really do much more than writing quick text.

Best regards,
Eckehard

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post