gregorias / anki-code-highlighter

Anki plugin for code syntax highlighting.
GNU Affero General Public License v3.0
54 stars 3 forks source link

Anki freezes when highlighting code in cards using MathJax #48

Closed sudogoku closed 1 year ago

sudogoku commented 1 year ago

Hi! First off, just want to say thank you for an awesome Anki plugin. This is super helpful for a lot of CS-related studying.

Bug description When syntax highlighting code, on some notes it causes Anki's browse window to become unresponsive. The main Anki window still works, but I am unable to close the browse window without force quitting Anki. After reopening the card I was trying to add code highlighting to, I can see the selected text generated this code (which is incomplete compared to working code blocks I have in other Anki notes).

<span id="5115">text to highlight</span>

rather than:

<pre style="display:flex; justify-content:center;"><code class="language-typescript">text to highlight</code></pre>

Reproduction steps Steps to reproduce the behavior:

  1. Open the Anki browse window
  2. Important: choose a card that is using MathJax (HTML outputs to <anki-mathjax>text</anki-mathjax>.
  3. Highlight some additional plain text that is not MathJax.
  4. Use the shortcut or click the button in the UI
  5. After choosing highlight.js or pygments & the programming language, the edit portion of the Anki browse window becomes unresponsive & the window cannot be closed without force quitting.
  6. Cancelling instead of applying the highlight also results in an unresponsive window.
  7. Additional detail: Upon reopening, the addon no longer remembers what the previously used language was.

Card template Not sure if this is relevant, but supplying in case it helps.

Expected behavior Edit window should still be responsive and the correct HTML should be applied to the selected text.

Card template My card template is pretty simple. Front:

{{Front}}

Back:

{{FrontSide}}
<hr id=answer>
{{Back}}

Styling is also simple, so likely unrelated:

.card {
  font-family: arial;
  font-size: 20px;
}

Additional information

sudogoku commented 1 year ago

Also just adding that this plugin works perfectly for me otherwise! If I remove all MathJax, apply the code highlighting, and then add the MathJax back in, everything works as expected.

Additionally, manually pasting the HTML around the text I'm trying to highlight works as well.

gregorias commented 1 year ago

Thank you for reporting. I'll take a look as soon as I have available time.

gregorias commented 1 year ago

Mhm, I can reproduce it, looking into the root cause.