Jekyll 中围栏代码块的水平滚动条

Question

如何使用 kramdown 和 rouge 在 jekyll 中为我的围栏代码块启用水平滚动条？

是否有任何参数可以添加到我的 _config.yml 文件中？本质上我想模仿 GitHub 中的代码块，如下所示

但这就是我最终得到的

有什么想法吗？

Answer 1

这是一个 CSS overflow 问题，而不是 Jekyll 问题。

将以下内容添加到您的 pre 元素中：

pre {
  overflow-x: auto;
}

Answer 2

正如 Brad West 所说，这毕竟不是 kramdown 问题。我只需对基本 CSS 文件

进行以下修改

pre {
  overflow: auto; /* I added this */
  padding: 15px;
  margin-bottom: 0;
  font-size: 14px;
 /* white-space: pre-wrap; I deleted this
  word-wrap: break-word;  and this
  word-break: break-all; and also this */ 
}

Jekyll 中围栏代码块的水平滚动条

Horizontal scrollbar for fenced code blocks in Jekyll

jekyll

kramdown

rouge