Switch to markdown-it from marked

[rufuspollock]

Why?

• Commonmark by default
  • fenced code blocks by default
• Very extensible with plugins and this means support for stuff like:
  • toc - https://www.npmjs.com/package/markdown-it-table-of-contents
  • info sections

Other projects I've looked at seem to use it / consider it e.g. hackmd

Acceptance criteria

• we use markdown-it to convert markdown into html
• supports headers as anchors
• supports block containers (:::info)

Tasks

• use markdown-it instead of marked here - https://github.com/datahq/frontend/blob/master/lib/utils/index.js#L58
• user markdown-it-anchor for supporting headers as anchors
• use markdown-it-container for supporting block containers
• ensure all tests are passing

[rufuspollock]

@anuveyatsu have we checked markdown-it can do everything we are using marked for see e.g. the docs route for an example of full usage.

[anuveyatsu]

@rufuspollock yes.
Headings can have an embedded anchor tag like on GitHub using plugins:

• https://github.com/valeriangalliat/markdown-it-anchor
• https://github.com/medfreeman/markdown-it-toc-and-anchor

markdown-it also discussing having it as built-in feature here - markdown-it/markdown-it#28 - but probably not soon.

Re other options we're using with marked:

• GFM and tables are enabled by default in markdown-it
• smartLists - not sure what exactly does this option in marked - behaves similarly to me with either turned on/off.
• smartypants - there is something similar called typographer in markdown-it.

[anuveyatsu]

FIXED. We do CSS stuff in a separate issue, e.g., for block containers. Atm, behavior is as the following:

:::info
some info message
:::

==>

<div class="info">
  <p>some info message</p>
</div>