Skip to content

HTML: use <kbd> and <samp> #355

@chris34

Description

@chris34

Use

  • <kbd> for keyboard shortcuts
  • <samp> for sample output from a computer

So the HTML could look like

<pre>
<samp>$ <kbd>git status<kbd>
# On branch master
nothing to commit, working directory clean</samp>
</pre>

As an idea for styling, some CSS:

kbd {
    display: inline-block;
    padding: 2px 6px 3px;
    background: #fff;
    color: #3B3E43;
    border: 1px solid #7d8186;
    line-height: 1em;
    box-shadow: 0 2px 0 -1px #fff,0 2px 0 #828282;
    font-size: 0.8em;
}

code {
    border: 1px solid #cccbcb;
    background-color: #eef;
    padding: 1px 5px;
    font-size: 0.8em;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions