Отдельный стиль для уценки в одиночных обратных кавычках по сравнению с тройными обратными кавычками с использованием темы Minima для Jekyll

Question

Я пытаюсь настроить тему минимума для Джекилла. Я хотел бы иметь темный фон для кода между тройными обратными галочками (то есть в своем собственном абзаце), но я не хочу влиять на фон встроенного кода между одиночными обратными галочками. Есть ли способ сделать это?

Answer 1

Блок встроенного кода в Markdown отображается как:

<code>Lorem ipsum</code>

Блок огороженного кода - тройной обратный трюк - отображается как:

<pre><code>Lorem ipsum</code></pre>

Ниже приведен пример селекторов CSS, нацеленных на эти шаблоны. Вы можете увидеть это поведение в моем примере:

• <code> тег сам по себе менее специфичен, чем <pre><code> pattern, цвет фона стиля изолированного кода переопределяет цвет фона встроенного блока
• <code> шаблон также соответствует <pre><code> шаблон, как подмножество, поэтому правило жирного шрифта применяется к <code> Правило CSS, также применяется к <pre><code>
• так как color: Blue; атрибут относится только к <pre><code> Единственный с синим текстом

code {
    font-weight: bold;
    background-color: GreenYellow;
}

pre > code {
  background-color: AliceBlue;
  color: Blue;
}

<code>Lorem ipsum</code>

<pre><code>Lorem ipsum</code></pre>

Таким образом, если вы хотите применить правило к блоку изолированного кода, но не к блоку встроенного кода, используйте более конкретный селектор CSS, например pre > code, Этот селектор соответствует <code> блоки, где родительский <pre> тег.