Различный стиль применяется к разным языкам подсветки синтаксиса

Question

У меня есть сайт на jekyll, где я публикую множество примеров оболочек в блоках кода. Я изо всех сил пытаюсь визуально разграничить команды script / shell и их вывод команд.

Сгенерированный HTML:

<pre><code class="language-powershell">
function DemoCode {
    return 'rab', 'oof'
}
DemoCode

rab
oof
</code></pre>

В этом примере последние две строки, очевидно, должны быть выходными данными первых четырех строк.

В настоящее время Markdown - это обычный тройной обратный удар с тегом powershell:

```powershell
function DemoCode {
    return 'rab', 'oof'
}

DemoCode

rab
oof
```

Я бы предпочел не разбивать его на второй блок кода. Wordpress позволил мне сделать это с помощью встроенных тегов стиля, но это была свинья работы.

Это не очень хорошее решение для меня, но у меня мог бы быть отдельный блок кода с тегом "обычный текст" для подсветки синтаксиса:

Лучшее, что у меня есть, - это отдельные блоки кода. Если я добавлю тег "открытый текст" в румяна, то, по крайней мере, у меня не будет подсветки синтаксиса, что помогает. Но сгенерированный HTML все еще наследует тот же CSS от.highlight.

Markdown:

```powershell
function Write-Stuff {
    Write-Output $Stuff
}
```

```plaintext
Output I would like with different color and background-color
```

Мне все еще нужно это наследовать другой CSS, хотя. Сгенерированный HTML:

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#this is formatted with md code block and powershell tag</span>
</code></pre></div></div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#formatted with md code block and plaintext tag
</code></pre></div></div>

Answer 1

Если вы хотите использовать отдельные блоки кода, вы можете использовать IAL для блоков, чтобы установить собственный класс для выделенных блоков синтаксиса:

{:.my-custom-class}
``` powershell
function Write-Stuff {
    Write-Output $Stuff
    }
```

Это вставило бы my-custom-class прямо рядом с language-powershell highlighter-rouge, что позволяет вам настроить свой CSS соответствующим образом.

Что касается того, чтобы избежать разделения блока: это невозможно с kramdown. Тем не менее, вы могли бы реализовать пользовательскую подсветку синтаксиса, которая знает, как это сделать.