Всё началось с того, что в блогере нет тэга для оформления программного кода. А ведь хочется, что-бы всё было по взрослому. Поле с отдельным фоном и рамкой, с отдельным шрифтом и размером, с нужными отступами и длинной строки. Гугл, почему то, этого не предусмотрел. Но, они разрешают писать свои CSS стили. Значит есть хорошая возможность и CSS начать учить... и на практике применить.
Что мне надо было:
1 - Отдельный фон и рамка.
2 - Поле должно быть ограничено по ширине но не по высоте.
3 - Если строка длиннее ширины поля, то должен быть горизонтальный скрол.
4 - Своя стилистика шрифта и пробелов.
5 - Лёгкое применение.
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 который делает горизонтальный скрол. А всё остальное по вкусу.
Вот получилась такая приятная штука :)
Всем удачи!!
Комментариев нет:
Отправить комментарий