Introduction

Hey everyone!

I regularly use anki-editor to create Anki cards. But after upgrading Emacs, my math formulas started looking really messed up.

Specifically, I had these two problems:

  1. In the desktop Anki browser’s preview for each field, the formulas weren’t rendering as formulas. They just showed up as plain LaTeX code.
  2. Formulas were being displayed as PNG images. (They used to be rendered inline with MathJax.)

Since I rarely edit cards directly in the desktop Anki app, the first issue was somewhat tolerable. But the second one was really bugging me. The image resolution of the formulas was lower, and they didn’t match the size of the surrounding text.

The Solution

Adding the following to my config.org fixed everything:

(use-package! anki-editor
  :after org
  :init
  (setq-default anki-editor-latex-style 'mathjax))

How I Figured It Out

Cards pushed by anki-editor are saved as HTML. When I looked at the HTML of a card where the formulas were working correctly, the math was wrapped in a special anki-mathjax tag, like this:

<anki-mathjax block="true">1 + 1 = 3</anki-mathjax>

However, in the cards with the problem, the formulas were surrounded by a p tag and [$$] delimiters:

<p>[$$] 1 + 1 = 3 [/$$]</p>

This made it pretty clear that the issue was happening during the part where anki-editor converts the org text to HTML.

Digging into anki-editor.el, I found a variable called anki-editor-latex-style that controls the LaTeX rendering style. And that’s how I arrived at the solution above!

(defun anki-editor--translate-latex-env (latex-code)
  (setq latex-code (replace-regexp-in-string "\n" "<br>" (org-html-encode-plain-text latex-code)))
  (cl-ecase anki-editor-latex-style
    (builtin (concat "[latex]<br>" latex-code "[/latex]"))
    (mathjax (concat "\\[<br>" latex-code "\\]"))))

Thanks for reading!

Reference

Math & Symbols - Anki Manual