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样式，以告诉浏览器如何显示<kdb>标记的内容。例如，使用浏览器的inspect开发工具，我可以看到SO使用了许多CSS规则来创建标签的边框/背景色/阴影。

如果没有这些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>

我们可以看到浏览器提供的唯一“默认”样式是设置font-family: monospace：

Answer 2

您可以使用CSS设置标签样式。有一种article关于如何设置kbd标签的样式，就像StackOverflow。

示例：

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>

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

2 个答案: