Как адаптивно сверстать данный блок?

Для адаптивной верстки блока кода на сайте можно использовать следующие подходы:

1. Использование медиа-запросов: можно задать различные стили для блока кода в зависимости от ширины экрана. Например, для мобильных устройств можно уменьшить размер шрифта и отступы, чтобы блок кода занимал меньше места на экране.

Пример использования медиа-запросов в CSS:

@media only screen and (max-width: 600px) {
    pre {
        font-size: 14px;
        padding: 10px;
    }
}

2. Использование относительных величин: вместо фиксированных значений (например, пикселей) для размеров шрифта, отступов и других параметров, лучше использовать относительные величины, такие как проценты или em. Это позволит блоку кода более гибко адаптироваться к разным размерам экранов.

Пример использования относительных величин в CSS:

pre {
    font-size: 1em;
    padding: 1em;
}

3. Использование flexbox или grid layout: эти технологии позволяют легко управлять расположением элементов на странице, в том числе и блоков кода. С их помощью можно легко создать адаптивные макеты, в которых блок кода будет занимать нужное количество места на экране.

Пример использования flexbox в CSS:

.container {
    display: flex;
    flex-wrap: wrap;
}
 
pre {
    flex: 1 1 50%; /* блок кода занимает 50% ширины контейнера */
}

Эти подходы помогут сделать блок кода на сайте адаптивным и удобным для просмотра на различных устройствах.