On Anki 2.1.50, arrows are not properly rendered when writing chemical reactions

Anki Help
1

On the new version of Anki, 2.1.50, arrow are not rendered properly when using MathJax chemistry. For example when I write the below reaction;

\ce{MgCl2(s) <=> Mg^2+(aq) + 2Cl-(aq)}

Anki automatically replaces ‘<’ and ‘>’ with ‘{\lt}’ and ‘{\gt}’ respectively. So the above line becomes;

\ce{MgCl2(s) {\lt}={\gt} Mg^2+(aq) + 2Cl-(aq)}

Therefore ‘<’ and ‘>’ are rendered as regular less than and greater than signs. The expected behavior is to render the arrows as chemical reaction arrows, which was the case before the update. This behavior started after the 2.1.50 update. It replaces the signs whenever I try to review my cards. How can I make it so that Anki does not replace the signs?

2

This looks like a bug. I’m seeing the same behaviour, and the HTML editor doesn’t help (still changes it back).

It is possible to implement a temporary fix using custom definitions. Add something like this to the top of your cards front template…

\(
\def \arrow {\ce{<=>}}
\)

…and \arrow will then be replaced with ⇌ on those cards. Note that it needs to be on the card template, above the relevant field, not inside the field itself. Also note that something like this doesn’t seem to work:

\(
\def \arrow {<=>}
\)

With the above, putting \ce{\arrow} results in <=> as before. However, you can put the first version inside a larger \ce expression and it seems to work fine.

This solution isn’t ideal of course, but it won’t break when the problem is fixed in a later version so you can just leave it in place, and you can use find and replace to fix a large number of cards (and change them back later if you prefer). Obviously if you use a lot of different arrows that could get annoying, although being able to define your own custom names for symbols you use a lot might be useful to you in the long run?

If you do use this, post here if you run into any trouble.

3

Thank you for your explanation. I can confirm that this works. However I do use a lot of different arrows and also some of the arrows have text on top or below them. Like so:

\ce{<=>[{Text above}][{Text below}]}

I think I would have to write a lot of \def definitions to cover for all the different types of arrows. I am not that familiar with Latex to know if there is an easier way.

I think I will wait for a fix and use find and replace to fix my cards once the fix arrives. For now, it is not that big of a deal breaker for me. So, I will leave my cards as is.

4

After looking into the source code, I was able to figure out why this problem might have been introduced in the first place. I think it was added in order to prevent conflict with HTML tags. There are two functions in ts/editable/mathjax-element.ts and ts/editor/mathjax-overlay/MathjaxEditor.svelte that replace < and > signs with {\lt} and {\gt}. I commented out the relevant functions and compiled the software. Here is a patch of what I did…

diff --git a/ts/editable/mathjax-element.ts b/ts/editable/mathjax-element.ts
index f2b24e335..0bba3bba5 100644
--- a/ts/editable/mathjax-element.ts
+++ b/ts/editable/mathjax-element.ts
@@ -20,7 +20,8 @@ const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
  * be first translated to entities.
  */
 function translateEntitiesToMathjax(value: string) {
-    return value.replace(/&lt;/g, "{\\lt}").replace(/&gt;/g, "{\\gt}");
+    /* return value.replace(/&lt;/g, "{\\lt}").replace(/&gt;/g, "{\\gt}"); */
+    return value;
 }

 export const Mathjax: DecoratedElementConstructor = class Mathjax
diff --git a/ts/editor/mathjax-overlay/MathjaxEditor.svelte b/ts/editor/mathjax-overlay/MathjaxEditor.svelte
index dfd74f6a4..873408a5a 100644
--- a/ts/editor/mathjax-overlay/MathjaxEditor.svelte
+++ b/ts/editor/mathjax-overlay/MathjaxEditor.svelte
@@ -92,7 +92,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
      * Escape characters which are technically legal in Mathjax, but confuse HTML.
      */
     export function escapeSomeEntities(value: string): string {
-        return value.replace(/</g, "{\\lt}").replace(/>/g, "{\\gt}");
+        /* return value.replace(/</g, "{\\lt}").replace(/>/g, "{\\gt}"); */
+        return value;
     }
 </script>

… After compiling the software, I did not notice any problems. Everything seems to work fine and I don’t get any kind of errors. I don’t know if the two lines I commented out were absolutely essential. I would really appreciate it if someone with knowledge about the source code could look into it. For now, my arrows work as intended.

5

It’s possible to include arguments like so:

\(
\def \arrow#1#2{\ce{<=>[{#1}][{#2}]}}
\)

And then have this on your card:

\arrow{text above}{text below}

And still have a blank arrow like this:

\arrow{}{}

But that certainly does make more work for you.

6

@hengiesel Sorry for the tag, but seems like your area of expertise. Is there any way to suppress < and > getting changed to {\lt} and {\gt} inside a MathJax block? (tl;dr they’re required for chemical equations)

Perhaps they can be changed to &lt; and &gt; instead? Those values seem to be accepted by the MathJax renderer since

\(
\def \arrow {\ce{&lt;=&gt;} }
\)

produces ⇌ as desired, but they also get changed to {\lt} and {\gt} when written inside a MathJax block in the editor like a regular < or >.

2 Likes
7

Hm, this seems to be a feature I wasn’t aware of.

As a workaround, the ⇌ symbol is producible with \rightleftharpoons for me.
Transforming to &lt; instead might work.

3 Likes
8

Fix is in 2.1.52rc1, thanks to @hengiesel

1 Like