为什么 prism.js 通过将语言 class 插入周围的 <pre> 标签来修改 DOM?
Why does prism.js modify the DOM by inserting the language class into a surrounding <pre> tag?
当我像这样嵌套代码时(直接取自 prism 的首页),当我在浏览器中检查 DOM 时,pre 标签也会得到 language-css
class。这是我编写的代码:
<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) 从 [=18] 中删除 class =] 标签(也删除了此示例的功能)当我在 Firefox 中检查时,<pre>
标签将不再具有 language-css
。
将 class 添加到两个元素允许主题作者区分代码块 (<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;
}
作为一个用例,一些主题作者可能希望根据他们的语言将不同的样式应用于代码块。例如,在我的网站上(在 About page 等地方),我使用生成的内容向我的代码块添加了标签——这可以像这样添加到默认主题:
@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"><!DOCTYPE html>
<title>HTML</title>
<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>
当我像这样嵌套代码时(直接取自 prism 的首页),当我在浏览器中检查 DOM 时,pre 标签也会得到 language-css
class。这是我编写的代码:
<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) 从 [=18] 中删除 class =] 标签(也删除了此示例的功能)当我在 Firefox 中检查时,<pre>
标签将不再具有 language-css
。
将 class 添加到两个元素允许主题作者区分代码块 (<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;
}
作为一个用例,一些主题作者可能希望根据他们的语言将不同的样式应用于代码块。例如,在我的网站上(在 About page 等地方),我使用生成的内容向我的代码块添加了标签——这可以像这样添加到默认主题:
@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"><!DOCTYPE html>
<title>HTML</title>
<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>