html - 如何将类似 SO 的 效果插入到我基于 HTML 的演示文稿中？

Question

我正在使用 reveal.js 创建基于 HTML 的演示文稿。我想使用 <kbd>SPACE</kbd> 插入键盘符号，如 SO 和 Github 提供的那样。产生此字形的语法:SPACE。

我试过使用 the reveal.js mechanism for inserting Markdown ，但无济于事 - SPACE 一词仅显示为常规文本。 reveal.js依靠 marked.js但我在 its documentation 中找不到任何相关信息任何一个。我很难弄清楚 SO 和 Github 是如何做到这一点的。

Answer 1

您可以使用 CSS 来设置标签的样式。有一个 article关于如何像 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>