使用Blogger强调.js：无法禁用自动换行

I'm trying to integrate Highlight.js with Blogger. So far, the syntax highlighting works great, but I can't seem to find a way of preventing the code lines inside the <pre><code> elements to wrap automatically. What I need instead is for the browser to display a horizontal scroll bar.

我正在尝试将Highlight.js与Blogger集成。到目前为止,语法突出显示效果很好,但我似乎找不到阻止

 元素内的代码行自动换行的方法。我需要的是浏览器显示水平滚动条。

I have added the following to the blog template, at the end of <head>, as explained in the site:

我已将以下内容添加到末尾的博客模板中,如网站中所述:

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

And all my usage instances are:

我的所有使用实例都是:

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

I have tried to edit the Highlight.js CSS file to no avail. I have also tried setting the pre and code styles overflow-x property to scroll with no change whatsoever. My guess is that Blogger overwrites that property globally.

我试图编辑Highlight.js CSS文件无济于事。我也试过设置pre和代码样式overflow-x属性滚动而不做任何改变。我的猜测是Blogger全局覆盖了该属性。

Does anyone know of a way to overcome this and avoid the code lines from wrapping/breaking at the end of the code area, showing the horizontal scroll bar instead?

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

4 个解决方案

#1

This worked for me

这对我有用

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

#2

After opening this issue on the GitHub page, the author confirmed that the line wrapping was not done by his scripts.

在GitHub页面上打开此问题后,作者确认换行不是由他的脚本完成的。

After that, I did some more fiddling in the CSS and was able to fix the problem by overriding the .hljs style of highlight.js. This was the only way I've managed to prevent the text wrap and allow scrolling. It is probably not the best or only fix, but that's as far as my knowledge of CSS goes. Following is the code I've added to the Blogger template.

之后,我在CSS中做了一些更多的摆弄,并通过重写.hljs样式的highlight.js来解决问题。这是我设法阻止文本换行并允许滚动的唯一方法。它可能不是最好或唯一的修复,但就我对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>

I've changed display to inline-block and added overflow-x: scroll and padding-right: 100%. The padding seems to prevent the code area from shrinking to the size of the longest line of text.

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

#3

One thing I did that solved the problem was to set the width of the hljs element to be very large. This isn't an optimal solution, but it works.

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

.hljs { width: 2300px; }

#4

Customize .hljs style from github.css and place it after github.css in your pages.

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

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

#1