在 .github.io 站点中使用 Jekyll 渲染代码块时出现问题

Question

>问题

我的帖子包含一些代码块，将它们呈现为"盒子中的盒子"。 这是帖子：https://telatin.github.io/N50-with-conda/这是我从Firefox看到的：http://prntscr.com/oujb6u

代码

这是源代码：https://raw.githubusercontent.com/telatin/telatin.github.io/master/_posts/2019-08-19-N50-with-conda.md

我是使用 Jekyll 的新手，我尝试了三个反引号(就像我通常在 GitHub 中所做的那样(，以及行首的四个空格(当前实现(。两者的渲染相同。

问题

我不明白问题出在我编写的代码还是我正在使用的模板中。我应该怎么做才能获得更好的输出(单帧(？

Answer 1

如果你检查生成的 HTML，你会看到有具有相同类.highlight的嵌套块：

<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code>CHECK=$(n50 contigs.fasta)</code>
</pre>
</div>
</div>

你可以做的是改变你的CSS更具体：

即代替.highlight，使用div.highlight作为基本代码块样式，并在需要时使用div.highlight > pre.highlight来
设置pre块元素的样式。