1

当我有这样嵌套的代码时（直接取自 prism 的首页），language-css当我在浏览器中检查 DOM 时，pre 标记也会获取类。这是我编写的代码：

<pre><code class="language-css">p { color: red }</code></pre>

当我在浏览器中检查它时，它是这样的：

<pre class="language-css"><code class="language-css">p { color: red }</code></pre>

我的示例略有不同（与 CSS 不同的语言），但元素的结构对我来说非常接近<pre><code/><textarea/></pre>

如果我 1）删除 index.html 中的 prism.js 行（从而删除 prism.js 功能）或 2）从标签中删除类（<code>也删除此示例的功能），当我在 Firefox 中检查它。<pre>language-css

4

1 回答 1

1

将类添加到这两个元素允许主题作者区分代码块 ( <pre><code>) 和内联代码 ( <p><code>)。例如，默认的 Prism 主题包含以下三个规则：

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

作为一个用例，一些主题作者可能希望根据他们的语言将不同的样式应用于代码块。例如，在我的网站上（在关于页面之类的地方），我使用生成的内容将标签添加到我的代码块中——这可以像这样添加到默认主题中：

@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css');

pre[class*="language-"] {
  position: relative;
  padding-top: 2.5em;
}

pre[class*="language-"]::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-family: sans-serif;
  background-color: #fff;
  border-bottom-right-radius: 0.5em;
  padding: 0.25em 0.5em;
}

pre.language-html::before { content: 'HTML'; }
pre.language-css::before { content: 'CSS'; }
<pre><code class="language-html">&lt;!DOCTYPE html>
&lt;title>HTML&lt;/title>
&lt;p>Prism example</code></pre>

<pre><code class="language-css">pre[class*="language-"] {
  position: relative;
  padding-top: 1.5em;
}

pre[class*="language-"]::before {
  display: block;
  font: 0.8em sans-serif;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

pre.language-html::before { content: 'HTML'; }
pre.language-css::before { content: 'CSS'; }</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.min.js"></script>

于 2018-04-20T03:00:39.110 回答