Generate Markdown that gets interpreted into the current page

[Martien]

How do I generate Markdown that gets interpreted into the page from within a JS code block within an index.md file?

For example, from within a JS code block, this:

["cat", "dog", "bat"].map(k => `1. ${k}`).join("\n")

shows up in the page as:

`1. cat
1. dog
1. bat`

but what i need is:

1. cat
2. dog
3. bat

I want the built-in Markdown to process it, including applying any extensions like markdown-it-wikilinks, as configured in observable-config.js.

I know that Page Loaders emit Markdown that gets interpreted, but that is not what I need.

Tried many approaches, yet failed. Please enlighten me and untangle my brain.

[Fil]

you could use markdown-it as a client library.
https://observablehq.observablehq.cloud/pangea/party/markdown-it

[Martien]

Thank you. Will investigate.

Then again, it also feels like I am making it more complicated than needed. Is there a better way to generate a list, say, from a code block in a markdown page?

[Fil]

Use html?

display(html`<ol>${["cat", "dog", "bat"].map(k => html`<li>${k}</li>`)}</ol>`);

[Martien]

Ah, well, I need it to be parsed by the markdown-it config as set in observable.config.js.

I assumed that md as defined in observable.config.js is also available inside a JS code block in an md file.

Is this a logical assumption? Is it something that may be available in Framework some day?

[Fil]

No it's not available on the client-side, but please upvote #895

[Martien]

Thanks. Upvoted #895.

[mbostock]

To add to @Fil’s answer, you can use markdown-it on the client, and upvote #895 if you are interested in this feature. We don’t yet provide a md tagged template literal because — without a bunch of work for us to implement it smartly — it’s unsafe: anything you interpolate into the Markdown is treated as Markdown (or HTML depending on context, or both), which makes it hard to use correctly.

Therefore to generate content on the client, we recommend instead using Hypertext Literal which is available as the html (and svg) tagged template literal. Alternatively you can use JSX and React.

Lastly you can use page loaders to generate Markdown at build time which is probably the best user experience for this use case because the content is rendered statically, searchable, with no reflow or delay on load, etc. We are also working on page fragment loaders in #1807 that will make it easier for part of the page to be generated at build time without needing to move the whole page into a page loader.

[Martien]

Thank you. And yes, I have read about it being unsafe and respect your choices in this.

The thing is, I want to create paragraphs with text, intermingled with short enumerated list of 1 to 10 entries or so, coming from a complete list of over 200 entries; each bunch of items relates to the introductory paragraph above.

The most elegant way, TMO, is simply writing these texts in md, and each time invoke some JS that generates a snippet of the list as md – using 1. for each item. Instead of generating Markdown, I can also generate an HTML block of course.

I have tried using a Page Loader as another option, but then I need to generate the introductory texts as well. This feels somewhat backwards.

Anyway, I’ll sleep on it and figure out a way that makes it human friendly and easy to use and maintain.