Extensible Markdown parsing in Elm

[dillonkearns]

Hello everyone

I’m happy to finally share a new approach to Markdown in Elm!

• Render to your UI library of choice with custom Renderers
• Inject dynamic data from your model (by rendering to a function)
• Extend the Markdown syntax using declarative HTML handling

Extensible Markdown Parsing in Pure Elm

Or you can play around with a live demo on Ellie.

I’m already using it in production for elm-pages.com. There are certainly Markdown features that aren’t implemented yet, but I’ve found it really valuable already. You can see the current failing test cases in nice, readable markdown documents to see the progress.

I would love feedback, as always. And I’ve made it really easy for community contributions if anyone wants to play around with an elm/parser project! The contributing doc lays out all the resources to get you started.

[zoul]

We have been running a digital local newspaper on a statically generated website for five years now (not in Elm, sadly). I have been thinking a lot how to improve the Markdown → HTML path, wanting some sane, tight content model instead of mixing stuff willy nilly. (Currently we have custom tags implemented using regexes, I don’t think I have to elaborate on how this undermines my engineering dignity ) And while I cannot use this parser at the moment (we have been using Jekyll), this would be my dream come true. It’s good to know something like this is possible, thank you! And it’s yet another reason to consider rebuilding the website in Elm…

[brian]

Do you have any plans to implement an editor for this? For example, elm-markup’s Mark.Edit looks really useful for building pseudo-wysiwyg editors. I’d love to do that but keep to mostly Markdown syntax that my audience (internal team at work) already knows.

[dillonkearns]

Hey Brian!

The content editing experience is definitely something I’ve been thinking about. I think I need some concrete use cases to help drive out functionality like that. I’m not sure exactly what needs someone would have when they go to the effort to build a WYSISYG editor since it’s quite a bit of effort. I would imagine that for internal content editing, in most cases it probably makes sense to use a CMS system. For example, Netlify CMS lets you define custom widgets that generate whatever underlying markup you want. So you can effectively get the same result but without building the entire editor from scratch.

https://www.netlifycms.org/docs/custom-widgets/

The relevant portion there is the toPreview function:

  toPreview: function(obj) {
    return (
      '<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
    );
  }

The Netlify CMS workflow is really awesome, and it already works great with elm-pages (here’s a starter template I created: https://github.com/dillonkearns/elm-pages-netlify-cms-starter)!

For external users creating/editing content, you probably want much more fine-grained control over the look and feel, so in those cases you would probably want a custom editor.

I don’t think I have a good enough understanding of what people’s actual needs would be to build anything like that at this point, so I would very much welcome concrete use cases from people who need this kind of functionality to help me with the design!

The nice thing with this library is that the editing experience is already quite good to start with because there is so much existing tooling (both Markdown editing tools, and rich text editing tools that turn into Markdown). And for using the nested HTML with rich Markdown within the HTML tags, I’m curious to explore that more and see how that evolves. I think that hooking into existing CMS editors like Netlify CMS’s custom widgets is really promising. Thanks for the question!