Jekyll/Rouge-嵌套的突出显示代码块 [英] Jekyll/Rouge - highlighted code blocks nested

问题描述

我已经从github页面切换到托管自己的网站.迁移的结果是，突出显示了要嵌套的bloc语法.

I have switched from github pages to hosting my own site. As a result of this migration I got the syntax highlighting blocs to be nested.

<div class="highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
        <code>
        ... ... ...
        </code>
    </pre>
  </div>
</div>

渲染后，它看起来像:

_config.yml中与样式相关的设置为:

The style related settings in _config.yml are:

kramdown:                                         
  syntax_highlighter: rouge                                      

sass:                                                     
  style: :expanded

设置syntax_highlighter: none会删除与突出显示相关的类(这只是为了提供更多信息，代码只是逐字显示，而不是在块中突出显示):

Setting syntax_highlighter: none removes the highlighting related classes (this is just to give more info, the code is just verbatim then, not highlighted in a block):

<pre>
  <code>
  ... ... ...
  </code>
</pre>

正在寻找有关如何进一步诊断的想法?

Looking for ideas on how to diagnose this further?

推荐答案

以前似乎已经对此进行了相关讨论

There seems to have been a related discussion about this previously happening here.

解决方案是修改_sass/_highlights.scss中的css条目，以便将.highlight替换为pre.highlight

The solution is to modify a css entry in _sass/_highlights.scss so that .highlight is replaced with pre.highlight

这篇关于Jekyll/Rouge-嵌套的突出显示代码块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！