Highlight.js с Blogger: невозможно отключить автоматический перенос строки

Я пытаюсь интегрировать 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 styles overflow-x на scroll без каких-либо изменений. Я предполагаю, что Blogger перезаписывает это свойство во всем мире.

Кто-нибудь знает способ преодоления этого и избегать строк кода от обертывания/разбиения в конце области кода, показывая горизонтальную полосу прокрутки?

Ответы

Ответ 1

После открытия этой проблемы на странице GitHub автор подтвердил, что перенос строк не был выполнен его скриптами.

После этого я немного пошатнулся в 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>

Я изменил display на inline-block и добавил overflow-x: scroll и padding-right: 100%. По-видимому, прокладка препятствует сокращению области кода до размера самой длинной строки текста.

Ответ 2

Это сработало для меня

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

Ответ 3

Одна вещь, которую я сделал, решила проблему, заключалась в том, чтобы установить ширину элемента hljs очень большой. Это не оптимальное решение, но оно работает.

.hljs { width: 2300px; }

Ответ 4

Настройте стиль .hljs из github.css и поместите его после github.css на своих страницах.

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