Предотвращение переноса строк блоков кода с помощью jekyll, kramdown и rouge

Используя kramdown и rouge для подсветки синтаксиса уценки в блоге jekyll, я хотел бы предотвратить перенос длинных строк кода на новую строку. Я хотел бы иметь возможность использовать горизонтальную полосу прокрутки, чтобы показать остальную часть содержимого.

Вот конфиг Джекилла:

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Я использую тему CSS base16.solarized.dark, созданную командой rougify.

Вот пример использования кода:

```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````

jekyll css kramdown rouge jekyll-extensions
person s2t2    schedule 14.04.2016    source источник
comment
Невозможно отладить, не видя ваш стек css. Можете дать ссылку на репозиторий?   -  person David Jacquel    schedule 14.04.2016
comment
github.com/data-creative/data-creative.github.io используя twitter bootstrap и base16.solarized.dark для css — спасибо!   -  person s2t2    schedule 14.04.2016

Ответы (3)


arrow_upward
7
arrow_downward

Boostrap добавляет правило white-space: pre-wrap, чтобы улучшить читаемость блока кода.

Если вы хотите, чтобы блок кода избегал этого переноса, вы можете отредактировать свой css/data-creative.css и добавить

pre code{
  white-space: pre;
}
person David Jacquel    schedule 14.04.2016
comment
Я пытался установить это свойство раньше, но, возможно, я применил его к неправильному элементу/набору элементов. Благодарю вас! - person s2t2; 15.04.2016

arrow_upward
2
arrow_downward

У вас где-то есть правило CSS, которое для элемента code устанавливает white-space: pre-wrap. Добавьте следующее правило, чтобы переопределить его:

code {
    white-space: pre;
}
person Alex Palcuie    schedule 14.04.2016

arrow_upward
2
arrow_downward

Я решил это так:

pre {
    ...
    overflow-x: scroll;
}
person Enes Başpınar    schedule 27.10.2020
comment
переполнение-х: авто; также работает - person Vlad A. Ionescu; 05.01.2021