Your favorite Markdown renderer?

[PhilLovesToCode]

Hi voraciousdev,
I'm thinking about making an extension to ink-mde that would render the Markdown document in finished/presentation form whenever the editor loses focus, or upon some other developer-defined event. The renderer would allow the user or developer a choice of CSS for the rendering. Do you have a favorite Markdown renderer Vue component? Or perhaps have you written your own?
Thanks,
Phil

[davidmyersdev]

Hi @PhilLovesToCode!

Having the ability to render the markdown based on some user-defined event is a great idea, and I have some thoughts about the implementation. As for the tool, I'd like to go with remark for its speed, size, and ecosystem. I had started on an implementation for this in Octo a while back, but I think it makes sense to offer this as an extension to Ink instead (it has evolved quite a bit since then). The main thing to keep in mind is that the renderer should be framework-agnostic so that it can be used with or without Vue.

Here are some loose specs that come to mind so far:

• Built on remark and rehype with an interface to accept options and plugins for those tools (I can help spec this out)
• Disabled by default and code-split to reduce bundle size
• Default implementation (when enabled) should be a "preview" button in the toolbar (to match most other editors)
• Should be able to toggle preview/edit modes externally (new methods on the instance interface)

I'd also love to give the user the ability to specify a separate element to render the preview under, but that can be a follow-up item to keep the scope smaller for now. I'm curious to hear your thoughts on this, and I'm happy to work with you to create an issue with more detailed requirements/specs for this feature. 😄