How I Format Keyboard Keys Text Using Templater and CSS

Share & showcase
,
1

Many of my notes consist of technical guides that include keyboard shortcuts. for example:

Show Explorer/Toggle focus: Ctrl + Shift + E

Wrapping the keys with HTML tag <kbd> will render them initially to stand out and be more visually pleasing:

Show Explorer/Toggle focus: Ctrl + Shift + E

Now, typing <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> for each key is too much work, so I wrote a simple Templater script

<%*
const selectedKey = tp.file.selection();
if (selectedKey) {
	tR = `<kbd>${selectedKey}</kbd>`;
} else {
	tR = `<kbd></kbd>`;
}
%>

Running the template via Templater: Open Insert Template Modal will wrap the selected text in the note with <kbd> tag, or simply bind it to a hotkey (In my case Ctrl + K). If text is NOT selected, it will simply insert <kbd></kbd> into the cursor position.

Since <kbd> is an HTML tag, it can be targeted with with a custom CSS snippet, as I wanted it to look more like a keyboard key. I created kbd.css file with the following and placed it in folder .obsidian/snippets/

kbd {
    /* Define custom properties for easy management */
    --key-text-color: #6d6f76;
    --key-shadow: inset 0 -2px 0 0 #cdcde6, 
                  inset 0 0 1px 1px #fff, 
                  0 1px 2px 1px rgba(30, 35, 90, 0.4);
    --key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
  
    /* Styling for <kbd> element */
    border: none;
    background: var(--key-gradient);
    border-radius: 3px;
    box-shadow: var(--key-shadow);
    color: var(--key-text-color);
    text-align: center;
    padding: 0.2em 0.6em;
    display: inline-block;
    font-weight: bold;
    font-size: 0.85em;
    min-width: 1em;
  }

Styling credits go to pipic1’s button

This will result in keys to look like this:

kbd-after

Note that the css snippt will style keyboard shortcuts in the command palette:

My editing flow of keys now is:

  • I select the text of the key (using Shift+ keyboard arrows)
  • Then use Ctrl + K to run the Templater’s template which will wrap the key text with <kbd> tags.
1 Like
2

Any particular reason why you don’t split the text on space and add each word in a <kdb> tag? (Potentially with the addition of + between each word? )

Then you could select the entire Ctrl Shift Y and get it to display as: Ctrl Shift Y or Ctrl + Shift + Y

4

No specific reason other than most of my notes have the shortcuts written formatted as Key + Key.

The way you suggested is practical and effeciant if your notes had shortcuts written in the way you mentioned CTRL Shift Y, it can be done using:

<%*
const selectedText = tp.file.selection();
if (selectedText) {
  const words = selectedText.split(' '); // Split the selection into words
  const wrappedWords = words.map(word => `<kbd>${word}</kbd>`); // Wrap each word in <kbd> tags
  tR = wrappedWords.join(' '); // Join the wrapped words back into a single string with spaces
} else {
  tR = "<kbd></kbd>";
}
%>

It will produce:
Ctrl Shift Y

If you want them to be seprated with + instead of space:

<%*
const selectedText = tp.file.selection();
if (selectedText) {
  const words = selectedText.split(' '); // Split the selection into words
  const wrappedWords = words.map(word => `<kbd>${word}</kbd>`); // Wrap each word in <kbd> tags
  tR = wrappedWords.join('+'); // Join the wrapped words back into a single string with "+" between them
} else {
  tR = "<kbd></kbd>";
}
%>

It will produce:
Ctrl+Shift+Y

1 Like