如何在 github 页上使用 jekyll markdown 显示带有自动换行和行号的代码块

Question

我正在使用 github 个页面来托管我的博客。它使用 GitHub Flaword Markdown。这是_config.yml的一部分：

markdown: kramdown
# Use Github Flavored Markdown
kramdown:
  input: GFM

我的文章经常包含很长的代码行，我想用自动换行（这样不用滚动就可以看到）和行号（可以区分新行和自动换行）来显示它。

我发现，如果我将这个 css 属性用于 <pre> 标签：white-space: pre-wrap，我可以启用自动换行。但是如何显示行号呢？我正在寻找可以让我继续使用 github-pages 内置 jekyll 的解决方案，它会自动为我生成博客页面。

Answer 1

抱歉，但是在代码突出显示中换行长行 对行号不起作用。

{% highlight ruby linenos %}
def dosomething
  delegate :some, :thing, :with, :unicorns, :and, :shrimps => :yolo, :someother key => true, :maybeonemore => true
end
{% endhighlight %}

参见 Jekyll documentation。

和CSS 长行换行：

.highlight pre{
  white-space: pre-wrap;
}

但最后这个问题不能只用jekyll或kramdown/rouge配置来解决。

这是因为，行号堆叠在代码 <td> 附近的 <td> 中。

如果你可以换行代码，行号不会相应地换行，结果是这样的：

  def foo
1    wrapped very long line
2  wrapped very long line continues here
3
  end

Answer 2

Code::Blocks version 20.03 for wrap code line settings

如何在 github 页上使用 jekyll markdown 显示带有自动换行和行号的代码块

How to display code blocks with word wrap and line number with jekyll markdown on github-pages

css

jekyll