Add the HTML "mark" tag (e.g. for highlights) as a whitelisted tag when pasting

Suggestions
1

Hi!

I absolutely love Anki and can’t wait to contribute more to the project and to the software itself.

I was trying to copy some notes to Anki when I realized that the HTML mark tag was being stripped.

For example:

<mark>highlighted text</mark>

I’m pretty sure this is because it’s not whitelisted here: anki/ts/html-filter/element.ts

Is there any chance we can allow the “mark” tag when pasting formatted text?

Of course, I know that I can manually use the “mark” tag without it getting stripped, but being able to paste formatted content that uses the “mark” tag would be great.

Does this sound feasible? Thank you!

2

I’m afraid that’s likely to cause confusion, as the layperson who doesn’t understand HTML may try to change the color using the color buttons or the remove formatting button, neither of which work with marks.

3

Thank you for your reply!

I see your point, but I still wonder how we could make it work nevertheless.

If popular markdown apps like Obsidian are rendering highlights in HTML (plain, with no user defined color) with the mark tag, we could either whitelist it or maybe transform it to whatever Anki prefers (such as a span with background-color). Of course, the mark tag supports background colors as well.

I think using mark is quite elegant in comparison to other markup, as it’s also the W3C recommended tag introduced over ten years ago for this purpose. If dealing with the many ways that different software renders rich text, why not follow standards as an example?

Of course, I don’t have a good answer for the layperson who doesn’t understand HTML and copies highlighted text from Obsidian into Anki, and then tries to change the highlight color, but maybe is a special case that can be worked out.

1 Like
4

If Anki didn’t allow changing the font color, I’d be all for the <mark> element, because it has semantic meaning → better accessibility. Also, <mark> uses black font color in both themes, so it is more readable in dark mode by default.

But if users were to change the color of marked text, we’d then need two elements:

<mark style="background-color: red;">
  <span style="color: yellow;">McDonalds</span>
</mark>

With our current approach, we can do this with a single <span>:

<span style="color: rgb(255, 255, 0); background-color: rgb(255, 0, 0);">McDonalds</span>

Improvement

I’d love to see hex values / names over rgb whenever possible. RGB bloats the HTML and looks ugly. Our upper example should look like this:

<span style="color: yellow; background-color: red;">McDonalds</span>

All of a sudden, non-robot users would be able to tell a texts color just by looking at the HTML.

5

Regarding the semantic meaning, that’s what I was trying to convey.

Maybe we can have Anki automatically convert <mark> to <span> with a default color, for non-technical users?

My main issue is losing highlights when copying from (semantically valid) HTML, so a conversion wouldn’t be ruled out as a possible solution.

As for the use of hex or names, the only benefit I can think of using RGB values is also defining an alpha value, but I don’t think that’s a typical use either.

6

A clean solution that converts the mark tags to color spans on paste sounds like a good compromise to me.

7

How can I help to make it happen? :heart:

8

I imagine it will require a transformation step to be added to ts/html-filter - once you have something going, please send through a PR.

9

Excellent. I’ll check that out. Thanks!