Jekyll：行号不是从第一行开始答案

【问题标题】：Jekyll: line numbers are not starting from first lineJekyll：行号不是从第一行开始
【发布时间】：2017-12-05 15:09:53
【问题描述】：

我使用 Jekyll 创建了我的网站，准确地说是使用了 Beatiful-Jekyll 主题。对于语法高亮，我使用了 Rouge。当我不显示行号时，一切都很好。当我显示行号时，有时行号不是从第一行代码开始（最后相同，它们在结束前停止了一些行）。有时它们与代码一致，有时则不然。

这是一个一切正常的例子：

works_fine

这是一个示例，其中行号与行代码对齐，但缺少第一行和最后一个行号（在另一个示例中，缺少前三个和最后三个）。

lines_missing

最后一个例子是行号与行代码不一致的地方：

lines_not_aligned

我相信问题出在亚麻布上。要显示行号，我使用

{% highlight <language> linenos %}
<code>
{% endhighlight %}

因为我在_config.yml文件中尝试了如下配置：

kramdown:
  input: GFM
  syntax_highlighter: rouge

  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

在这种情况下，默认显示的行号显示正确，但使用 {% highlight linenos %} 显示的行号仍然不好。

default_line_numbering_without_linenos

提前致谢

【问题讨论】：

请发布一个您尝试过的示例以及您使用的设置。
我刚刚做了，希望现在更清楚了。

标签： css jekyll blogs rouge

【解决方案1】：

我知道这是一篇旧帖子，但我很难找到答案，所以我在这里发布我的发现。

TL;DR 将 minify_html 设置为 false 并在下面使用液体缩小 html 页面。这适用于 Jekyll 版本 4.0.0

编辑 1。

进一步调查显示，代码括号内的尾随空格也会导致类似的行为。

text
text

在缩小 html 时，最后一个空行会中断 pre 标记。当捕获输出 html 并将换行符转换为 br 并使用 br 标记拆分整个 html 字符串时，就会发生这种情况，因此尾随的空行会丢失。（可能会使用空格而不是空行，但我没有尝试）

结束编辑 1。

我遇到了同样的问题。我的本地“jekyll serve”服务器很好，但 Gitlab 页面显示它就像问题中的示例一样。这让我意识到我通常在本地运行站点时将“minify_html”设置为 false，事实证明，当我将 minify_html 设置为 true 时，本地版本也崩溃了。我完全删除了 jekyll 默认 minify_html 并使用了下面的代码。

创建一个新布局，不管你怎么称呼它。
将以下代码粘贴到其中。

{%- capture to-compress -%}
    {{ content }}
{%- endcapture -%}

{%- assign inside-code-block = false -%}
{%- capture to-remove-br -%}
    {%- assign lines = to-compress | newline_to_br | split: '<br />' -%}
    {%- for line in lines -%}

        {%- if line contains "<code>" -%}
            {%- assign inside-code-block = true -%}
        {%- elsif line contains "</code>" -%}
            {%- assign inside-code-block = false -%}
        {%- endif -%}

        {%- if inside-code-block == true -%}
            {{ line }}
        {%- else -%}
            {{ line | lstrip }}
        {%- endif -%}

    {%- endfor -%}
{%- endcapture -%}
{{ to-remove-br }}

转到您现有的布局并将您刚刚创建的布局添加到它们的前端，如下所示：
layout: <name of the layout you made>

代码是我缩小 html 的个人实验，它似乎有效。该代码忽略了<code> 标签内的所有内容，因此``` markdown 语法应该可以正常工作。

我在尝试让 https://jch.penibelst.de/ 布局工作时想到了这个想法（我没能做到）。

液体语法帮助：
- https://shopify.github.io/liquid/basics/whitespace/
- https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

【讨论】：

【解决方案2】：

我只是用这些选项遇到了这个问题：

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

我使用了一个开头有一个空行的代码块。空行是问题所在。因为我想要空行（关于代码格式问题的帖子），我发现只需在行上放一个空格就可以解决对齐问题。

【讨论】：