Using zero-md and HTML editor and symbols: <, >, &

Anki Card Design
1

I have an issue that drives me crazy.

I insert this code example in editor in Html mode as recommended here: https://forums.ankiweb.net/t/markdown-support/52895

    md.addEventListener("zero-md-rendered", () => {
      md.shadowRoot.querySelectorAll("pre, code").forEach(el => {
        el.innerHTML = el.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
      });
    });

Anki replaces it to:

    md.addEventListener("zero-md-rendered", () =&gt; {
      md.shadowRoot.querySelectorAll("pre, code").forEach(el =&gt; {
        el.innerHTML = el.innerHTML.replace(/&lt;/g, "&lt;").replace(/&gt;/g, "&gt;");
      });
    });

My card template is:

<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>

<zero-md>
<script type="text/markdown">
<div style="font-weight: bold; font-size: 12px; margin-bottom: 10px;">
  {{Deck}}
</div>

{{Front}}

</script>
</zero-md>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const md = document.querySelector("zero-md");
  if (md) {
    md.addEventListener("zero-md-rendered", () => {
      md.shadowRoot.querySelectorAll("pre, code").forEach(el => {
        el.innerHTML = el.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
      });
    });
  }
});
</script>

Unfortunately my Anki cards are rendered with "&lt;" instead of “<”.
Is there any simple way to fix it?

2

Have you tried typing into the HTML view directly?

3

As I mentioned I use editor in HTML view.

If I enter code between tickers ie: ``` my_code < 100 ``` editor changes character ‘<’ into ‘&lt;’ and than renders it as ‘>’ in preview mode.

If the same text is put outside of ``` tickers HTML editor also changes character ‘<’ into ‘&lt;’ but renders it correctly as ‘<’ in preview mode.

4

Could you attach a screenshot of how it looks for you? I think there might be a misunderstanding about which editor is being referred to.

5

Anki Editor - HTML Mode

CleanShot 2025-07-05 at 16.30.15@2x
CleanShot 2025-07-05 at 16.30.15@2x1600×538 37 KB

Anki Card Preview

CleanShot 2025-07-05 at 16.31.53@2x
CleanShot 2025-07-05 at 16.31.53@2x1364×542 33.1 KB

6

I don’t think there is any solution to that. You do have the option of starting a new post with a suggestion in Anki > Suggestions category.

As for existing workarounds, there was someone else with the same issue in discord (I suggested HTML view to even them). They posted a workaround there that involves some extra code.

Final solution, for anyone interested. I just have to decode the html entities manually.

Probably more reliable to render {{Front}} / {{Back}} to templates initially, but this works for me.

Link to discord message: Discord

Invite Link: Anki

7

I suppose the script takes it into account, as this section replaces &lt; back with “<”:

The only issue with the piece of code you tried to place in the field might be the literal &lt; and &gt; it contains, but you can avoid them being modified by escaping the ampersand the second time and replacing it with &amp; (&lt; should become &amp;lt;, for example).

Or does this still not look right when viewing cards in the reviewer?

8

Yeah, that is the solution I was looking for.
Thanks a lot.

1 Like
9

To be more precise. I updated my whole script into:

<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>

<zero-md>
<script type="text/markdown">
<div style="font-weight: bold; font-size: 12px; margin-bottom: 10px;">
{{Deck}}
</div>

{{Front}}

</script>
</zero-md>

<script>
(function() {
  // Poczekaj aż zero-md pojawi się w DOM
  function onReady() {
    const md = document.querySelector("zero-md");
    if (!md) {
      setTimeout(onReady, 100); // Spróbuj ponownie za 100ms
      return;
    }
    md.addEventListener("zero-md-rendered", () => {
      // Sprawdź, czy shadowRoot istnieje 
      if (md.shadowRoot) { 
        //alert('shadowRoot istnieje');
        md.shadowRoot.querySelectorAll("pre").forEach(el => {
          //alert('element istnieje');
          el.innerHTML = el.innerHTML.replace(/&amp;lt;/g, "<").replace(/&amp;gt;/g, ">").replace(/&amp;/g, "&");
        });
      } else {
        alert('Brak shadowRoot!');
      }
    });
  }
  onReady();
})();
</script>

It works on my Desktop App and on my iOS App as well.

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.