使用 jekyll、kramdown 和 rouge 防止代码块换行

Question

在 jekyll 博客中使用 kramdown 和 rouge 进行 markdown 语法高亮显示，我想防止长行代码换行。我希望能够使用水平滚动条来显示其余内容。

这里是 jekyll 配置：

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

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

这是一个示例代码用法：

```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````

Answer 1

您在某个地方有一个 CSS 规则，该规则为 code 元素设置 white-space: pre-wrap。添加以下规则以覆盖它：

code {
    white-space: pre;
}

Answer 2

Boostrap 正在添加 white-space: pre-wrap 规则以提高代码块的可读性。

如果您希望您的代码块避免这种换行，您可以编辑您的 css/data-creative。css 并添加

pre code{
  white-space: pre;
}

Answer 3

我是这样解决的：

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

Prevent line-wraps of code blocks using jekyll, kramdown, and rouge