CSS: select text between <kbd>…</kbd> in editor?

[Moonbase59]

I cannot find a reliable way to select text between <kbd>…</kbd> tags in edit mode.

Other things have a cm-something class (like highlight, bold, italic, …) but I couldn’t find anything for this case.

Reason: I need to use fonts with keyboard symbols for documentation. These often use characters in the private use area so when displayed in edit mode, we get odd (and wrong) characters displayed, depending on what the current editor font uses in the PUA.

So I thought I could come up with a CSS snippet that would allow selecting whatever was in between <kbd> and </kbd> and apply the right font to it, so one could see what she’s typing in edit mode.

See also: Meta Post - Common CSS Hacks - Linux : Keyboard & mouse symbols

If all else fails, maybe we could make this into a FR to tag <kbd>…</kbd> content with a separate class (much like span.cm-inline-code, cm-em, cm-strong and so forth). I would suggest cm-kbd, of course.

But let’s see what ideas you have.

I think I would probably have to select a sequence of

• span.cm-tag.cm-bracket.cm-hmd-html-begin
• followed by span.cm-tag with content kbd
• followed by span.cm-tag.cm-bracket
• then take whatever is in there, up to but not including
• followed by span.cm-tag.cm-bracket
• followed by span.cm-tag with content kbd
• followed by span.cm-tag.cm-bracket.cm-hmd-html-end

and apply a font-family: 'Linux Biolinum Keyboard O'; to it.

Problem seems to be the inner HTML isn’t enclosed by a <span> like with <span class="cm-em">…</span> and so can’t really be CSS-selected.

I’m not so much of a CSS guy, so could anyone knowledgeable please help?

[Moonbase59]

See link in 1st post—I already have a kbd-targetting CSS snippet for preview but I need to (also) target edit mode. Especially with PUA, I’d otherwise get totally misleading symbols in the editor:

That’s why I need to target the content within <kbd>…</kbd> in edit mode so I can see the correct symbols while editing (by applying some CSS):

• The font name is of course correct. Have been using it for years.
• I usually don’t use fancy GUI “show character” apps but instead hack in the Unicode code point using Ctrl+Shift+U, number, Enter (because I have this font’s docs & source) or use some other keyboard macros. Or in case of <kbd>Ctrl</kbd>, simply use the built-in ligature features of this font.

[Scribe]

I understand now. I’ve spent the last hour trying to do what you’ve already tried. Looking forward to an authoritative reply. Sorry I couldn’t help.

[Moonbase59]

Thanks for trying, anyway, @Geffrey & @Scribe!

Hope that someone has “the great idea” — or the devs can find the heart to introduce something like a cm-kbd span to Obsidian/Codemirror so that it gets CSS-selectable in edit mode, and keyboard characters can be displayed in the keyboard font!