Color formatting for custom meaning/reading notes

こんにちは!
Not sure if this is already known or not, but I just realized that you could color-code radicals / kanji / readings in your own meaning / reading notes.
(after months of using all sort of symbols like back ticks (`) and others to differentiate them)

For example, in the strawberry kanji (苺), the bottom part is the mother (母) kanji, which is easier to reason about… but there’s no “mother” radical (maybe you could say the closest is “window”, but I find this better).
So in my meaning notes I wanna treat “mother” as a radical of its own, and of course color everything else properly:

The way to do this is pretty simple: if you look at the HTML for the mnemonic text, they use a mark HTML element with a class to style it:

<mark class="radical-highlight" title="Radical">strawberry</mark>

And apparently WK doesn’t do any escaping of the custom notes, so you can literally write this in your notes:

The <mark class="radical-highlight">mother</mark> of all <mark class="radical-highlight">flowers</mark> is the <mark class="kanji-highlight">strawberry</mark> flower.

This will give you the result above.

Note that you can omit the title attribute, that seems to be there only for accessibility purposes. class is what really matters.

This could probably be made better with some sort of userscript that enables a WYSIWYG editor for this (and since meaning notes accept any HTML, you could potentially do a lot more with it). However this would definitely cause issues for native WK clients, unless they strip the HTML or try to parse it (or use a web view).

5 Likes

Funnily enough, the radical combination (& mnemonic) for strawberry (苺) was updated just a few hours after I made this post :see_no_evil_monkey: So my example is now obsolete :sweat_smile:

1 Like