Question

我有一个jekyll网站，我在代码块中发布了很多shell示例。我很难在视觉上描述脚本/ 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让我使用内联样式标签来做这件事，但这是一份工作。

这对我来说不是一个好的解决方案，但我可以使用＆＃39;明文＆＃39;标记语法高亮显示：

到目前为止，我所拥有的最好的确是使用单独的代码块。如果我应用＆＃39;明文＆＃39;标记到胭脂，然后至少我没有得到语法高亮，这有帮助。但是生成的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在突出显示语法的块上设置自定义类：

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

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

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

有不同的风格适用于不同的语法荧光笔语言

1 个答案: