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

Question

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

这是 jekyll 配置：

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

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

这是一个示例代码用法：

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

score 7 · Accepted Answer

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

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

pre code{
  white-space: pre;
}

score 2 · Accepted Answer

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

code {
    white-space: pre;
}

score 2 · Accepted Answer

2

我是这样解决的：

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

于 2020-10-27T12:40:58.490 回答

3 回答 3