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

Question

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

我也尝试过使用 the reveal.js mechanism for inserting Markdown, but to no avail -- the word SPACE just shows up as regular text. reveal.js relies marked.js but I could not find anything about this in its documentation。我很难弄清楚 SO 和 Github 是如何做到这一点的。

Answer 1

您需要定义CSS样式来告诉浏览器如何显示<kdb>标签的内容。例如，使用我的浏览器的 inspect 开发工具，我可以看到 SO 使用许多 CSS 规则来创建标签的 border/background color/shadow。

如果没有这些 CSS 规则，标签也会在 SO 上简单地显示为纯文本。事实上，使用这个简单的文档：

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
  <p>
    I would like to insert the keyboard symbols like those provided by
    SO and Github by using the <kbd>SPACE</kbd> syntax resulting in this 
    glyph: <kbd>SPACE</kbd>.
  </p>
  </body>
</html>

我们可以看到浏览器提供的唯一"default"样式是设置font-family: monospace:

Answer 2

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

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

How to insert the SO-like <kbd> effect into my HTML-based presentation?

html

markdown

reveal.js