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

【问题标题】：Prevent line-wraps of code blocks using jekyll, kramdown, and rouge使用 jekyll、kramdown 和 rouge 防止代码块的换行
【发布时间】：2016-08-05 09:39:33
【问题描述】：

在 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
````

【问题讨论】：

不可能在没有看到你的 css 堆栈的情况下进行调试。你能提供一个存储库链接吗？
github.com/data-creative/data-creative.github.io 使用 twitter bootstrap 和 base16.solarized.dark 作为 css - 谢谢！

标签： css jekyll jekyll-extensions kramdown rouge

【解决方案1】：

我是这样解决的：

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

【讨论】：

【解决方案2】：

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

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

pre code{
  white-space: pre;
}

【讨论】：

我之前尝试过设置此属性，但可能我将其应用于错误的元素/元素集。谢谢！

【解决方案3】：

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

code {
    white-space: pre;
}

【讨论】：