Простой Code Block для блога на CSS



Всё началось с того, что в блогере нет тэга для оформления программного кода. А ведь хочется, что-бы всё было по взрослому. Поле с отдельным фоном и рамкой, с отдельным шрифтом и размером, с нужными отступами и длинной строки. Гугл, почему то, этого не предусмотрел. Но, они разрешают писать свои CSS стили. Значит есть хорошая возможность и CSS начать учить... и на практике применить.

Что мне надо было:
1 - Отдельный фон и рамка.
2 - Поле должно быть ограничено по ширине но не по высоте.
3 - Если строка длиннее ширины поля, то должен быть горизонтальный скрол.
4 - Своя стилистика шрифта и пробелов.
5 - Лёгкое применение.

После долгих проб и ошибок (потому-что я понятия не имел что такое CSS), я "нарисовал" вот такое поле:
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); .zloicode { display: block; font-family: 'Source Code Pro', monospace; width: auto; background-color: black; color: rgb(211, 211, 211); font-size: 20px; border: 1px solid grey; padding: 5px 10px 5px 10px; white-space: pre; overflow: auto; }

Отдельной строкой импортирую шрифт. В блогере нельзя загружать свои файлы (кроме картинок) - так-что Гугл Фонт пришли на помощь.
И самое главное это white-space: pre который сохраняет все пробелы, и overflow: auto который делает горизонтальный скрол. А всё остальное по вкусу.

Вот получилась такая приятная штука :)

Всем удачи!!

Комментариев нет:

Отправка комментария