# Suggestion - Highlight cloze in card when selected in browser

**URL:** <https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726>\
**Category:** Suggestions\
**Created:** [June 7, 2024, 8:16pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726 "2024-06-07T20:16:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnKingMed](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ankingmed/32/32686_2.png) [@AnKingMed](https://forums.ankiweb.net/u/AnKingMed)\
**Post date:** [June 7, 2024, 8:16pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/1 "2024-06-07T20:16:05Z")

</div>

One suggestion I had to improve usability would be to make it so the cloze in the editor highlights somehow when switching to that card in the browser. For example, if I’m using arrow keys to look through cards 1, 2, 3, when I switch from card 1 to card 2 it would change the highlight from c1 to c2 (by changing font color or underlining or something to highlight it).

---

<div class="post-metadata">

**Author:** ![AnKingMed](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ankingmed/32/32686_2.png) [@AnKingMed](https://forums.ankiweb.net/u/AnKingMed)\
**Post date:** [June 8, 2024, 12:10pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/2 "2024-06-08T12:10:55Z")

</div>

@Shigeyuki do you think an addon could do this? Or are you interested in building it into Anki? Happy to fund the project if anyone is interested

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 8, 2024, 7:12pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/3 "2024-06-08T19:12:46Z")

</div>

Hello, thanks for the mention.  
If you exclude the developer Abdo (Since I think he is a member of Anking), I think you may want to contact the developer Kleinerpirat.

He is a contributor to Anki for desktop and has developed some advanced add-ons for the editor, so he is the most knowledgeable Add-ons developer for the latest Anki editor and should be able to embed Anki.

However, he does not seem to be looking for work and has been busy and inactive recently, so I do not know if a request is possible.

- [Github : kleinerpirat/Matthias Metelka](https://github.com/kleinerpirat)
- [AnkiForums : kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat/summary)

---

<div class="post-metadata">

**Author:** ![AnKingMed](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ankingmed/32/32686_2.png) [@AnKingMed](https://forums.ankiweb.net/u/AnKingMed)\
**Post date:** [June 8, 2024, 7:17pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/4 "2024-06-08T19:17:23Z")

</div>

No worries! It’s not urgent by any means just something that may help improve quality of life

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 9, 2024, 8:00am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/5 "2024-06-09T08:00:46Z")

</div>

Hmmm, I see.

> [@AnKingMed](#):
>
> do you think an addon could do this?

I think it’s probably technically possible, but a bit difficult. Editor works a little differently, so there are not many developers working on advanced add-ons for Editor.

> [@AnKingMed](#):
>
> Or are you interested in building it into Anki?

For now I am not active to incorporate features into the official Anki. If I wanted to incorporate it, I guess I need to test it for a year or so with add-ons.

> [@AnKingMed](#):
>
> Happy to fund the project if anyone is interested

I am looking for Add-ons ideas and Patoreon ([$5/month](https://www.patreon.com/Shigeyuki)), however I am not accepting any work requests. (Because if I did, I would not be able to develop content for my patrons.)

So if possible I will try to develop that when I feel like it.  
(For example, when I repair the Editor add-on, or when I am developing a game add-on, I may be able to develop it along with it.)

And some of my patrons are medical students, so Add-ons that are in demand by medical students are a bit higher priority for my development.  
(This idea of yours has nothing to do with medicine, but since you are a medical professional, what you think you need and what medical students need may be close.)

however I am not sure if I can develop new add-ons, because sometimes I fail to develop new add-ons by simply not having the technical skills to do so.

---

<div class="post-metadata">

**Author:** ![CravingCrates](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/cravingcrates/32/16194_2.png) [@CravingCrates](https://forums.ankiweb.net/u/CravingCrates)\
**Post date:** [June 10, 2024, 7:09pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/6 "2024-06-10T19:09:31Z")

</div>

I’m not sure if this aligns with what you’re looking for, but I essentially forked Glutanimate’s Search Highlight Addon and rewrote one function to work on cloze deletions instead of the search bar input.

Example:  
 ![Animation](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/e/c/ecbceb27953c51cb1e2b6aa676790adee81aca76.gif)

A few caveats:

- The `qtWebViewer.findText` function only works on one occurrence at a time. Unfortunately, there doesn’t seem to be an easy workaround for this. I suspect you would need to inject a JavaScript snippet into the browser to highlight all cloze deletions.
- The same function also malfunctions when the result contains HTML elements (like italic or bold styles). I’m not sure why this happens.

If anyone is interested, feel free to experiment with it and possibly fix a bug or two. The code can be found [here](https://github.com/CravingCrates/highlight-cloze-in-browser). Note the `browser.py` file.

I probably won’t spend any more time on it, but maybe shige can pick up on this.

---

<div class="post-metadata">

**Author:** ![AnKingMed](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ankingmed/32/32686_2.png) [@AnKingMed](https://forums.ankiweb.net/u/AnKingMed)\
**Post date:** [June 10, 2024, 8:01pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/7 "2024-06-10T20:01:22Z")

</div>

Looks like a really good start! Maybe @glutanimate would have an idea on why it gives an error with HTML elements (or how to make it highlight all cloze deletions).

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 10, 2024, 9:18pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/8 "2024-06-10T21:18:39Z")

</div>

> [@CravingCrates](#):
>
> I’m not sure if this aligns with what you’re looking for, but I essentially forked Glutanimate’s Search Highlight Addon and rewrote one function to work on cloze deletions instead of the search bar input.

Wow, that’s great! I had completely forgotten about Search Highlight.

> [@CravingCrates](#):
>
> If anyone is interested, feel free to experiment with it and possibly fix a bug or two. The code can be found [here](https://github.com/CravingCrates/highlight-cloze-in-browser). Note the `browser.py` file.

It seems that “checkAnkiVersion” cannot be imported (browser.py line 41).  
If I remove it, it almost works correctly.  
There is one error of some kind but I have not looked into it yet.

> [@CravingCrates](#):
>
> The `qtWebViewer.findText` function only works on one occurrence at a time. Unfortunately, there doesn’t seem to be an easy workaround for this.

On my device it seems to highlight everything in orange and yellow, so it looks like it is already working fine.

> [@CravingCrates](#):
>
> The same function also malfunctions when the result contains HTML elements (like italic or bold styles). I’m not sure why this happens.

I am not clear about this. Can you provide HTML for the card to reproduce this issue?

> [@CravingCrates](#):
>
> I probably won’t spend any more time on it, but maybe shige can pick up on this.

What would you like to do about uploading the add-on?  
If you are very busy, I can fix it and upload the Fork.  
Otherwise (e.g. you upload it, or Anking will do it) I will try to send you a pull request.

---

<div class="post-metadata">

**Author:** ![CravingCrates](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/cravingcrates/32/16194_2.png) [@CravingCrates](https://forums.ankiweb.net/u/CravingCrates)\
**Post date:** [June 10, 2024, 9:43pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/9 "2024-06-10T21:43:58Z")

</div>

You can upload it if you want. I don’t mind 🙂

For me some cards like this didn’t work properly. Not sure why.

`A(n) {{c1::<i>atrial</i>}} <b>pacemaker</b> will generate a spike followed by a P-wave, a {{c2::<u>normal</u>}} <b>PR-interval</b>, and a {{c3::<u>normal</u>}} <b>QRS complex</b>.`

removing the `<i>` element from the c1 made the highlight work fine though. They were all picked up fine by the regex, so I just assumed it had to be the WebView function that’s causing the issue.

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 11, 2024, 7:51am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/10 "2024-06-11T07:51:04Z")

</div>

> [@CravingCrates](#):
>
> You can upload it if you want. i don’t mind 🙂.

Thanks, I’ll try to upload it once it’s repaired and adjusted.  
Perhaps you are a medical student, so will you be busy with graduation etc. soon?

> [@CravingCrates](#):
>
> For me some cards like this didn’t work properly. not sure why.

Thanks for the code and information, I was able to reproduce the issue.  
I will look into the cause.

* * *

The “checkAnkiVersion” issue I mentioned seems to be out of date in the libaddon, I updated the code and that solved it.

---

<div class="post-metadata">

**Author:** ![glutanimate](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/glutanimate/32/97_2.png) [@glutanimate](https://forums.ankiweb.net/u/glutanimate)\
**Post date:** [June 11, 2024, 8:29am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/11 "2024-06-11T08:29:53Z")

</div>

> [@CravingCrates](#):
>
> For me some cards like this didn’t work properly. Not sure why.
> 
> `A(n) {{c1::<i>atrial</i>}} <b>pacemaker</b> will generate a spike followed by a P-wave, a {{c2::<u>normal</u>}} <b>PR-interval</b>, and a {{c3::<u>normal</u>}} <b>QRS complex</b>.`

Qt’s find text works on rendered text, so you will have to strip any markup from the query.

> [@Shigeyuki](#):
>
> The “checkAnkiVersion” issue I mentioned seems to be out of date in the libaddon, I updated the code and that solved it.

The `browser` module seems to be out-of-date / from an older build of the add-on. See `main` for the latest version (last updated 8 months ago for 23.x)

* * *

Generally speaking, I really like this idea and good thinking on repurposing highlight search results @CravingCrates. For now this approach seems like the most viable and maintainable option.

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 11, 2024, 8:58am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/12 "2024-06-11T08:58:04Z")

</div>

> [@glutanimate](#):
>
> Qt’s find text works on rendered text, so you will have to strip any markup from the query.

Yay thank you genius, solved the issue.

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/f/9/f9a0ba6ffd2cae461d74008c141a0e2767305d6d.png)

---

<div class="post-metadata">

**Author:** ![AnKingMed](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ankingmed/32/32686_2.png) [@AnKingMed](https://forums.ankiweb.net/u/AnKingMed)\
**Post date:** [June 11, 2024, 9:35am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/13 "2024-06-11T09:35:19Z")

</div>

Super cool! Thank you all for finding something that works. @Shigeyuki once you’ve uploaded it let me know and I’ll share on my socials. I’ll share your patreon as well to support!

---

<div class="post-metadata">

**Author:** ![CravingCrates](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/cravingcrates/32/16194_2.png) [@CravingCrates](https://forums.ankiweb.net/u/CravingCrates)\
**Post date:** [June 11, 2024, 9:52am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/14 "2024-06-11T09:52:36Z")

</div>

> [@Shigeyuki](#):
>
> Perhaps you are a medical student, so will you be busy with graduation etc. soon?

haha, no I’m not graduating any time soon but exam season is coming up and I have enough on my plate already. Glad I was able to help kick things off.

What Qt Version are you on? I found the highlighting in orange and yellow to work inconsistently over time (Qt6.6, Anki 24.06.01) and from what I read in the Qt Docs it’s not “supposed” to work on all occurences but rather the first one like a browser search would. Not sure why it works for you lol

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 12, 2024, 9:46am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/15 "2024-06-12T09:46:54Z")

</div>

I have finished the repairs and adjustments and uploaded it to AnkiWeb.

- [🖌Auto Highlight Cloze in Browser (Fork by Shige)](https://ankiweb.net/shared/info/210078606)  
Add-on code : `210078606`

> [@AnKingMed](#):
>
> once you’ve uploaded it let me know

Hmm, I was able to upload it, but I had a problem with multiple cloze not highlighting properly for a bit. Not good enough, but usable anyway.

> [@AnKingMed](#):
>
> and I’ll share on my socials. I’ll share your patreon as well to support!

Wow, that would be super helpful!

> [@CravingCrates](#):
>
> haha, no I’m not graduating any time soon but exam season is coming up and I have enough on my plate already. Glad I was able to help kick things off.

Good luck with your exam season! 🙂

> [@CravingCrates](#):
>
> I found the highlighting in orange and yellow to work inconsistently over time

I fixed it, but it might flicker a bit.

> [@CravingCrates](#):
>
> from what I read in the Qt Docs it’s not “supposed” to work on all occurences but rather the first one like a browser search would. Not sure why it works for you lol

This seems to be a problem with my card sample. Simply put, it only highlights in yellow when the text is an exact match.  
(I copied the text so it matches, if I change the text it doesn’t.)  
So normal cards don’t highlight as you say. I added a workaround, but still not enough.

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 12, 2024, 9:56am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/16 "2024-06-12T09:56:17Z")

</div>

Not fully highlighted, like this.

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/1/c11d4f9e39039c53a1faa4ed0e431d837e4200cd.png)

---

<div class="post-metadata">

**Author:** ![sorata](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/sorata/32/34115_2.png) [@sorata](https://forums.ankiweb.net/u/sorata)\
**Post date:** [June 12, 2024, 10:02am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/17 "2024-06-12T10:02:56Z")

</div>

There might be a tiny mistake then,

> only {{c0::: will be highlighted

There should be two colons If I’m not wrong. Actually, I was confused by this until I saw the image here. So If you don’t mind, an image would be nice. This one here is good. What do you think?

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 12, 2024, 10:10am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/18 "2024-06-12T10:10:48Z")

</div>

Thanks, I corrected the AnkiWeb page, it may take a bit time to reflect.

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 12, 2024, 10:18am UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/19 "2024-06-12T10:18:38Z")

</div>

The source code was barely used, so it was finally worked only by ` __init__.py` (137 lines, about half comments).  
The additional files are for my changelog and options(no options yet), so they are not needed for working.

- [Github : Auto-Highlight-Cloze-in-Browser, ＿init＿.py](https://github.com/shigeyukey/Auto-Highlight-Cloze-in-Browser-Fork-by-Shige/blob/main/src-auto-highlight-cloze/ __init__.py)

---

<div class="post-metadata">

**Author:** ![Shigeyuki](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/shigeyuki/32/23878_2.png) [@Shigeyuki](https://forums.ankiweb.net/u/Shigeyuki)\
**Post date:** [June 12, 2024, 10:51pm UTC](https://forums.ankiweb.net/t/suggestion-highlight-cloze-in-card-when-selected-in-browser/45726/20 "2024-06-12T22:51:13Z")

</div>

Now the highlight is not perfect. Ideally, highlight everything.

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/8/0/80f9c057acc775f4dee0aaaa75f531894eb73f1a.png)

* * *

About this I already tried various ways, but all did not work.

PyQt → No way found to work around Qt limitation.  
PyQt → When highlighted in sequence (0.5 sec), Anki freezes and scrolls.  
PyQt → Qt can highlight yellow only for exact match text.  
PyQt -\>There is no way to change the color in PyQt  
JavaScript → When adding colors, the field is permanently edited. No workaround found.

* * *

So to implement this, I think it is necessary to edit the HTML of the card fields in batch.

For example,

1. Handle Cloze note types in batch
2. Cloze deletions enclosed like `<span...`
3. When selected in browser, add color by JavaScript.

Perhaps this way the color can be customized as well.  
However, this is a lot of development and debugging workload, so I don’t know when I will develop it.

Github issues : [Perfect highlights + Change color #8](https://github.com/shigeyukey/Auto-Highlight-Cloze-in-Browser-Fork-by-Shige/issues/8)
