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会全局覆盖该属性。

有没有人知道如何克服这个问题并避免代码行在代码区末尾包装/破坏，而是显示水平滚动条？

Answer 1

这对我有用

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

Answer 2

在打开此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 3

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

.hljs { width: 2300px; }

Answer 4

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

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

使用Blogger的Highlight.js：无法禁用自动换行

4 个答案: