使用jekyll、kramdown和rouge防止代码块的行包装。

Question

在jekyll博客中使用kramdown和rouge进行标记语法高亮显示，我希望防止长行代码被包装到新行。我希望能够使用水平滚动条来显示其余的内容。

以下是jekyll配置：

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

我正在使用由base16.solarized.dark命令生成的rougify css主题。

下面是一个代码使用示例：

```` js

Console.log(“一些代码”) //和一个非常长的注释，我不想再转到下一行

```

Answer 1

Boostrap正在添加一个white-space: pre-wrap规则，以帮助代码块可读性。

如果希望代码块避免此包装，则可以编辑css/data-creative.css并添加

pre code{
  white-space: pre;
}

Answer 2

您有一个用于code元素设置white-space: pre-wrap的CSS规则。添加以下规则来覆盖它：

code {
    white-space: pre;
}

Answer 3

我就这样解决了：

pre {
    ...
    overflow-x: scroll;
}