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

Question

问题

我的 post 包含一些代码块，将它们呈现为 "box in a box"。这是post：https://telatin.github.io/N50-with-conda/ and here what I see from 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，您会看到嵌套块具有相同的 class .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 块元素的样式。

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

Problem rendering code blocks with Jekyll in .github.io site

jekyll

github-flavored-markdown