Highlight.js 对于 Blogger：无法禁用自动换行

Question

我正在尝试将 Highlight.js 与 Blogger 集成。到目前为止，语法突出显示效果很好，但我似乎无法找到一种方法来防止 <pre><code> 元素内的代码行自动换行。我需要的是让浏览器显示水平滚动条。

我已将以下内容添加到博客模板中，在 <head> 的末尾，如网站中所述：

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

我所有的使用实例是：

<pre><code class='cpp'>
   // code here; 'class' changed according to language.
</code></pre>

我尝试编辑 Highlight.js CSS 文件，但没有成功。我还尝试将 pre 和 code 样式 overflow-x 属性设置为 scroll ，但没有任何更改。我的猜测是 Blogger 会在全局范围内覆盖属性。

有谁知道解决这个问题并避免代码区域末尾 wrapping/breaking 的代码行显示水平滚动条的方法吗？

Answer 1

打开这个issue on the GitHub page后，作者确认换行不是他的脚本做的

在那之后，我在 CSS 中做了更多的修改，并且能够通过覆盖 highlight.js 的 .hljs 样式来解决问题。这是我设法防止文本换行并允许滚动的唯一方法。它可能不是最好的或唯一的修复方法，但就我对 CSS 的了解而言，这就是这些。以下是我添加到 Blogger 模板的代码。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<style type='text/css'>
pre, code {
    white-space: pre;
    overflow-x: scroll;
}
.hljs {
    display: inline-block;
    overflow-x: scroll;
    padding: 0.5em;
    padding-right: 100%;
    background: #002b36;
    color: #839496;
    -webkit-text-size-adjust: none;
}
</style>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

我已将 display 更改为 inline-block 并添加了 overflow-x: scroll 和 padding-right: 100%。填充似乎可以防止代码区域缩小到最长文本行的大小。

Answer 2

我解决问题的一件事是将 hljs 元素的宽度设置得非常大。这不是最佳解决方案，但它有效。

.hljs { width: 2300px; }

Answer 3

这对我有用

.hljs {
    white-space: pre;
    overflow-x: auto;
}

Answer 4

自定义 github.css 的 .hljs 样式并将其放在页面中的 github.css 之后。

.hljs {
  display: inline-block;
  white-space: pre;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

Highlight.js 对于 Blogger：无法禁用自动换行

Highlight.js with Blogger: can't disable auto line wrap

javascript

css

blogger

syntax-highlighting

highlight.js