有不同的样式适用于不同的语法高亮语言

Question

我有一个 jekyll 站点，其中 post 代码块中有很多 shell 示例。我很难在视觉上区分 script/shell 命令和它们的命令输出。

生成html:

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

rab
oof
</code></pre>

在此示例中，最后两行显然需要是前 4 行的输出。

Markdown 目前只是带有 powershell 标签的普通三重反引号：

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

DemoCode

rab
oof
```

我宁愿避免将其拆分为第二个代码块。 Wordpress 允许我使用内联样式标签来执行此操作，但这是一项艰巨的工作。

这对我来说不是一个好的解决方案，但我可以有一个单独的代码块，其中带有 'plaintext' 标记的语法突出显示：

到目前为止，我最好的确实是使用单独的代码块。如果我将 'plaintext' 标记应用于 rouge，那么至少我不会得到语法高亮显示，这很有帮助。但是生成的 html 仍然从 .highlight.

继承相同的 CSS

降价：

```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 在语法高亮块上设置自定义 class：

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

这会在 language-powershell highlighter-rouge 旁边插入 my-custom-class，允许您适当地自定义 CSS。

至于避免分割块：kramdown 是不可能的。但是，您可以实现一个知道如何执行此操作的 custom syntax highlighter。

有不同的样式适用于不同的语法高亮语言

Have different style apply to different syntax highlighter languages

jekyll

kramdown