Markdown Editor with JavaScript
JoelBonetR 🥇

JoelBonetR 🥇 @joelbonetr

About: Tech Lead/Team Lead. Senior WebDev. Intermediate Grade on Computer Systems- High Grade on Web Application Development- MBA (+Marketing+HHRR). Studied a bit of law, economics and design

Location:
Spain
Joined:
Apr 19, 2019

Markdown Editor with JavaScript

Publish Date: Aug 23 '22
16 1

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

Comments 1 total

  • Eckehard
    EckehardOct 2, 2022

    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

Add comment