Looking for an add-on that inserts user defined HTML into a field in the add card dialog

Anki Add-ons
1

Feature Description

In the add card dialog, there are buttons that you can use to e.g. make the text bold. It works by enclosing the highlighted text in <b> </b>. I am looking for an addon that adds such a button to the add card dialog. But instead of enclosing the text with <b> </b>, it should provide a drop down of user defined HTML. Here are a few examples of HTML that I’d like to insert:

  • <span class="lang-marker"> </span>
  • <code class="code-inline"> </code>
  • <span class="file-marker"> </span>

Their classes are defined in my CSS on a template level. The advantage of this is that I can style certain parts of the cards depending on what they are and they all get updated simultaneously once I update my template’s CSS. The downside is that I always have to find a note that has the HTML I need, so that I can enclose my text properly.

Question

Does someone know of an existing add-on that allows me to create those HTML snippets, safes them so that I can use them across sessions and allows me to enclose highlighted text by clicking on the wanted HTML in a dropdown?

Thank you in advance!

2 Likes
2

https://ankiweb.net/shared/info/396502676

https://ankiweb.net/shared/info/1899278645

2 Likes
3

Thank you! I tried the quoted one above and achieved the desired result like this:

  1. Navigate to ~/.local/share/Anki2/addons21/396502676/.
  2. Open config.json.
  3. To the buttons object, add the following:
"addLangMarker": {
    "action": "wrap2",
    "beginWrap": "<span class=\"lang-marker\">",
    "endWrap": "</span>",
    "style": {
    	"icon": "languages.png",
    	"tip": "Add language marker class to selection"
    },
    "visible": true
}
  1. Find a .png for the icon. I just used this one for now.
  2. Restart Anki and the button works as it should.
1 Like
4

This is all well and good. But there’s still a lot of code in the fields. You can simply write any tag, for example, <w1>, without wrapping it with different codes over and over. In fact, this can be done with a single command: `web.eval(“wrap(”). Adding code will be very, very short.
But if you don’t have many classes, I would avoid adding them altogether. You can use the standard

<b>, <i>

and combinations of them, and then modify the CSS as you see fit. And to see these different CSS, use the “Live Preview” add-on and see how it looks right away.
Ideally, you should avoid formatting altogether, so that each word has its own field and leave the design to the CSS. In some cases, code is necessary, but if you introduce your own classes, you can introduce your own tags; they will work everywhere, as long as the HTML specification allows.
What you do is up to you, but I generally prefer simple and flexible solutions.

5

You immediately found a solution that suited you, so I decided not to create a similar add-on that day.
It’s simple, literally 200 lines of code, and will be useful to anyone interested in something like this.

Insert HTML wrapper for your style

But since I liked editing during the review, I looked for an add-on for the “Edit Field During Review” modification. I wanted to embed my own commands there. I found one; it was apparently intensively developed by someone studying medicine. But the author never responded, and for some reason, their account is no longer active. I had to do it myself, without consulting them. It took a long time, and the code is more than 200 lines long :slight_smile:
You can view it here.

Edit Field During Review (Cloze) Enhanced - mod kaiu 2026

Perhaps someone will like either option 1 or option 2, or even both.

1 Like