How to add inline keyboard keys and highlighting in Hugo

Yihui’s latest blog post on styling keyboard keys and shortcuts revealed a brutal fact to me: I’ve been misusing the <pre>, <kbd>, and <code> tags for years. The inline code markdown syntax really spoiled me. I tend to overuse inline code a lot and do not want to aggressively replace the syntax with <kbd> tag single-handedly¹, so I decide to differentiate them by creating separate styles.

Keys!

First, we need to enable raw HTML support in Hugo by adding the following to config.toml:

[markup.goldmark.renderer]
unsafe = true

Then, we can add the following CSS to your dedicated CSS file. (For hugo-bearblog, it’s inside style.html)

kbd {
    border: 2px solid #ccc;
    box-shadow: 2px 2px #999;
    display: inline-block;
    padding: 0 5px;
    border-radius: 0.25em;
    min-width: 1.5em;
    text-align: center;
    margin-right: 0.15em;
}

kbd:hover {
    position: relative;
    top: 2px;
    left: 2px;
}

Command Shift R

It looks pretty compatible with the dark theme too.

Highlights!

Another idea just popped up in my mind: I really want the highlighting syntax ==highlighted== to be usable in Hugo. Now I can at least use <mark> tag as a workaround.

mark {
    background-color: #98ff98;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    mark {
        background-color: gold;
        color: #333;
    }
}

This should be a good start to make the highlights look different from default highlighting.

Ideally, it’s better to render ==highlighted== as <mark>. And I’ll try to implement it in the future.