Почему prism.js модифицирует DOM, вставляя языковой класс в окружающий тег <pre>?

Question

Когда у меня есть код, подобный этому (взятый прямо с главной страницы призмы), тег pre также получает language-css класс, когда я проверяю DOM в моем браузере. Вот код, который я написал:

<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) удаляю строку prism.js в моем index.html (таким образом удаляя функциональность prism.js), либо 2) удаляю класс из <code> тег (также удаляя функциональность для этого примера) <pre> тег больше не будет language-css когда я проверяю это в Firefox.

Answer 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>