Pacharapol Withayasakpunt Pacharapol Withayasakpunt
Mon, March 15, 2021

Most Featureful Markdown Parser

My favorite implementation is Markdown Preview Enhanced, to be exact, @shd101wyy/mume, but I want a little more features…

shd101wyy/mume

Powerful markdown tool. Contribute to shd101wyy/mume development by creating an account on GitHub.

Another one that I love, is Discourse's (forum).

Discourse - Civilized Discussion

Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!

Not only HTML, but also CSS (preprocessor) and JS enabled

I know there are security concerns, but you write your own text; so why care?

<style>
h2 {
  color: red;
}
</style>
<script>
alert('hello')
</script>

Isolated CSS styling, and reusable components

With the power of Shadow DOM, CSS is not penetrated to the outside. (But JavaScript still do.)

It is used in WebComponents, and I made one too.

Web enabled, with server-side enhancements

I made an online playground, here. It is made from pasting bare URL - https://github.com/patarapolw/make-html.

patarapolw/make-html

Make HTML from Markdown or Hyperpug. Contribute to patarapolw/make-html development by creating an account on GitHub.

However, when it is online, you need to care about security. (And avoid XSS injection, for example.)

Securely embed YouTube and other iframe elements in Markdown

You can use any markdown implementation, including MarkdownIt, but first you have to make it insecure first, by allowing HTML.

Live editor

If you have slow-to-render components, or reactive with JavaScript; like IFrame; you can prevent flickering with incremental DOM.

How to prevent flickering in Live Markdown Editor

Especially, for items that shouldn't load too often, like <iframe>. In short, incremental-dom…

You can save as PDF

See this post.

Markdown to PDF: missing pieces from various approaches, and beyond HTML

et me say this first, the best way to create PDF from markdown is via web technology (Chrome / Puppeteer), because it is the closest to WSYIWYG (What You See Is What You Get), but it is not perfect.