Using Observable's "md" markdown wrapper in Framework

Community Help
1

In an Observable notebook if we type:

md`**Hello**`

it gets neatly rendered into the following HTML code:

<p>
  <strong>Hello</strong>
</p>

Is there a way we can import this markdown wrapper as a function in Framework?
Ideally calling it on a markdown formatted variable like:

md(my_markdown_text)

Thanks a lot!

2

OK I actually found in Observable’s documentation that under the hood it uses a Markdown compiler called “Marked”:

Leaving the solution here in case its useful for anyone:

```js
import {marked} from "npm:marked"
var tmp = `**Hello**`
console.log(marked.parse(tmp))

Outputs: <p><strong>Hello</strong></p>

3

Please see (and upvote) this related issue:

Our recommended workaround uses markdown-it (which is what Framework uses) instead of Marked.

We haven’t added support for this in Framework yet since typically you just write static Markdown. Can you share a little bit about why you want to parse and render dynamic Markdown?

4

Thanks for the info @mbostock - just upvoted.

My use case was to build slides in Framework:

  • I want to display a lot of charts, but using a single page is overwhelming;
  • The data loading relies on an expensive API call, so didn’t split the charts into multiple pages to avoid duplicated API calls.
  • I ported over the functionality from @jerryjappinen/slides, but the only way to get the markdown content rendered in the slides in Framework was using the library mentioned.
  • I also tried reveal.js, which worked fine out of the box.

Happy to share more detail if it helps.

FWIW I think native slides within Framework would be really nice; I am far from a JS expert but I guess this could build upon the scrollytelling example?