Including HTML(and tex) into markdown

Community Help
1

Hey there, I am trying to do this very simple thing (see notebook)

{
  const array = [tex`A=1`, tex`A=2`]

  return md`# Breaking Markdown

Not broken:
- ${array[0]}
- ${array[1]}

Broken
${array.map(a => `- ${a}\n`)}

Broken
${array.map(a => `- ${a}`).join('\n')}
`
}

However this renders

[object HTMLSpanElement]
[object HTMLSpanElement]

How do I avoid this?

2 Likes
2

Here’s a guide in response to your question:

And the solution:

md`A list of elements:

<ul>
  ${array.map(a => html`<li>${a}`)}
</ul>`
4 Likes
3

You need to use html`- ${a}\n` or md`- ${a}\n` instead of `- ${a}\n`. It sometimes gets a bit tricky if you want the stuff inside to be parsed correctly by the outer markdown template. Generally safer to use raw html to define nested elements in sub-templates instead of using markdown syntax.

Edit: you can also do:

{
  const array = [tex`A=1`, tex`A=2`];
  const between = Array(array.length - 1).fill("\n- ");

  return md`# Breaking Markdown

Not broken:
${ md(["- ", ...between, ""], ...array) }
`;
}

P.S. One other issue here is that you are re-using your array = [tex`A=1`, tex`A=2`] array which just has a single node for each of those tex templates; If you want to re-use that in multiple places you need to render new nodes each time.

2 Likes
4

Hey mike this is fantastic, thank you!

1 Like
5

All of your suggestions work for lists but I cant make them work for tables :S, any hint?

6

Hmm, seems to work for me? What are you trying?

md`A column of elements:

<table>
  ${array.map(a => html`<tr><td>${a}`)}
</table>`

md`A row of elements:

<table><tr>
  ${array.map(a => html`<td>${a}`)}
</tr></table>`