Как обернуть текст, но не блоки кода, в Jekyll, используя Bootstrap? - PullRequest
Новая
       29

Как обернуть текст, но не блоки кода, в Jekyll, используя Bootstrap?

0 голосов
/ 28 октября 2018

Проблема

У меня есть блог на страницах GitHub: https://silvuss.github.io. Он построен с помощью Bootstrap 4.1, использует уценку и визуализируется с помощью Jekyll (по умолчанию на страницах Github).Я оставил все параметры Jekyll по умолчанию.

Проблема в том, что сейчас каждая страница корректно отображается на более широких экранах, но не на более узких (мобильных).Единственные страницы, которые некорректно отображаются на более узких экранах (например, 375 x 667), - это страницы, содержащие блок кода уценки (```).Я заметил, что Jekyll отображает блоки кода уценки как <pre><code>.

Я хочу, чтобы текст статьи был перенесен, но не код в блоках кода.

Что я сделал до сих пор

(1) До сих пор я пытался использовать CSS, чтобы обернуть весь контент (как текстовые, так и кодовые блоки).Используя приведенный ниже код, текст обернут примерно наполовину, а блоки кода не обернуты вовсе: 

<style>
    pre, code {
        white-space: pre-wrap;
    }
</style>

(2) Я также экспериментировал с различными значениями word-break свойство как для <pre>, так и <code>, но результат не изменяется ни для одного значения.

(3) Поскольку Jekyll по умолчанию использует Kramdown, я также попытался изменить его *Опция 1030 * в файле _config.yml (пока локально, не нажимая на GitHub).Но ни одно из его значений не работает.Я попробовал следующие комбинации (как с опцией markdown: kramdown, так и без нее): 

# One try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: span

# Another try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: div

# Another try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: nil

ОБНОВЛЕНИЕ: Извините, я исправил код CSS, изменив preдо pre, code.

...