Properly render markdown using remarkablejs?

So we have an HTML that's generated from a YAML. We then process part of the DOM tree in the browser with remarkablejs. Namely, we get all elements with a "markdown" tag, parse its text with remarkablejs, and then replace its innerHTML. Unfortunately, either we don't render HTML entities correctly or we don't render HTML tags correctly.

Is there a recommended way to parse markdown in the browser?

// sample text:
// - markdown list with <b>`bold &amp;`</b>

var elements = document.getElementsByClassName('markdown');
var count = elements.length;

// generates HTML entities correctly but not HTML tags
for (let index = 0; index < count; index++) {
  var newText = md.render(elements[index].textContent);
  elements[index].innerHTML = newText;
}

// generates HTML tags correctly but not HTML entities
for (let index = 0; index < count; index++) {
  var newText = md.render(elements[index].innerHTML);
  elements[index].innerHTML = newText;
}

Update: I think I understand what happens, remarkable treats & as & followed by amp;, and therefore, what I get back is & which doesn't render correctly. But then even if I change the input to just &, innerHTML changes that back to &.

Update: i was able to repo: https://jsfiddle.net/v1o7hLnr/. What's breaking remarkable is two things: 1) using the innerHTML to get the text to parse, and 2) wrapping the HTML entity in a code block. See here: https://jsfiddle.net/vLr1qbfc/

Here's what's happening (see https://jsfiddle.net/k8hy2mtf/):

1. We get the text to parse from the innerHTML.
2. The innerHTML encodes & to &.
3. Because the text is wrapped in a code block, ex: `x&y`, remarkable receives `x&y`.
4. remarkable then promptly ignores the HTML entity
5. (This is why textContent worked.)

So then my original question stands... what's the best way to properly render an HTML document with remarkable? Should we be parsing at build time instead?