Горизонтальная прокрутка для фрагментов кода в кварто. Только первые фрагменты кода страницы работают ⇐ CSS

[Anonymous]

Я строю блог в Кварто, поставляя код непосредственно из ноутбуков Юпитера.
рендер блог очень хорошо работает на компьютере (Chrome и Safari). < /p>
Когда на мобильных устройствах (Chrome), код не может быть прокрут горизонтально. Горизонтальная прокрутка на мобильном телефоне делает прокрутку всей страницы, а не просто фрагмент кода. Форматы все еще имеют старое поведение и все еще не работают. о том, как иметь все фрагменты кода, прокручивать горизонтально. class = "lang-markdown prettyprint-override">

Код: Выделить всё

---
title: Snippet
subtitle: testing
categories: [snippet]
toc: true
draft: false
css: hscroll.css
---
< /code>
def a_very_very_long_function_name_that_would_go_out_of_the_right_margin_of_the_page_when_it_is_rendered_in_quarto(some_input_value: float) -> float:
return some_input_value
< /code>
def here_another_very_very_long_function_name_that_would_go_out_of_the_right_margin_of_the_page_when_it_is_rendered_in_quarto(some_input_value: float) -> float:
return some_input_value

Сохраните этот файл в той же папке, что и hscroll.css :

Код: Выделить всё

.hscroll {
overflow: auto;
white-space: nowrap;
}

Затем рендеринг с Quarto через Quarto Preview Index.ipynb и открыть в локальном браузере или в мобильном телефоне. Преамбула, то есть удаление строки CSS: hscroll.css < /code> из первой ячейки отметки, вы обнаружите, что при мобильном развертывании ни один из проникновений кода не будет прокручивать горизонтально. Снаски "src =" https://i.sstatic.net/mb60na4p.png " /> < /p>

мобильный скрининговый скриншот: < /h4>



Подробнее здесь: https://stackoverflow.com/questions/797 ... snippets-o