如何将类似 <kbd> 的效果插入到我基于 HTML 的演示文稿中？

Question

我正在使用 Reveal.js 创建基于 HTML 的演示文稿。我想通过使用<kbd>SPACE</kbd>生成此字形的语法来插入 SO 和 Github 提供的键盘符号：SPACE。

我尝试过使用插入 Markdown 的机制，reveal.js但无济于事——单词 SPACE 仅显示为常规文本。reveal.js依赖，但我在其文档marked.js中也找不到任何有关此的内容。我很难弄清楚 SO 和 Github 是如何实现这一目标的。

Answer 1

您可以使用 CSS 来设置标签的样式。有一篇文章介绍了如何像 StackOverflow 一样设置kbd标签样式。

例子：

kbd {
  padding:0.1em 0.6em;
  border:1px solid #ccc;
  font-size:11px;
  font-family:Arial,Helvetica,sans-serif;
  background-color:#f7f7f7;
  color:#333;
  -moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
  -webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
  box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  display:inline-block;
  margin:0 0.1em;
  text-shadow:0 1px 0 #fff;
  line-height:1.4;
  white-space:nowrap;
}

<kbd>Space</kbd>