Моё оформление тега — pre

Этот стиль создаёт красиво оформленный блок
с сетчатым фоном, округлыми углами и хорошей читаемостью текста. Он также заботится о том, чтобы содержимое оставалось доступным через прокрутку, если оно выходит за пределы элемента.

pre { 
display: grid;
 border: 3px solid teal; 
border-radius: 10px; 
font-family: monospace; 
font-size: 1.2em; 
line-height: 1.5; 
overflow: auto; 
color: lightgreen; 
margin: 2%; 
padding: 2%; 
max-height: 300px; 
background: linear-gradient( teal, transparent 1px), linear-gradient( 90deg, teal, transparent 1px); 
background-size: 15px 15px; 
background-position: center center;
background-color: black; 
}

/*---можно добавить если растягивает окно-----*/

pre {
	white-space: pre-wrap;
	max-width: 100%;
}

CSS-стиль для элемента
. Вот краткое объяснение каждого из свойств:

display: grid;

Устанавливает сеточную модель отображения для элемента, что позволяет легко размещать дочерние элементы в виде сетки.

 

border: 3px solid teal;

Добавляет рамку вокруг элемента с толщиной 3 пикселя и цветом teal.

 

border-radius: 10px;

Округляет углы рамки элемента с радиусом 10 пикселей.

 

font-family: monospace;

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

 

font-size: 1.2em;

Увеличивает размер шрифта на 20% относительно размера шрифта родительского элемента.

 

line-height: 1.5;

Устанавливает высоту строки в 1.5 раза больше размера шрифта, что улучшает читаемость.

overflow: auto;

Добавляет полосы прокрутки, если содержимое выходит за пределы элемента.

color: lightgreen;

Устанавливает цвет текста на светло-зелёный.

margin: 2%;

Добавляет отступ вокруг элемента, равный 2% от ширины родительского элемента.

padding: 2%;

Добавляет внутренние отступы внутри элемента, равные 2% от ширины родительского элемента.

max-height: 300px;

Ограничивает максимальную высоту элемента до 300 пикселей, чтобы предотвратить его слишком большое увеличение.

background: linear-gradient(teal, transparent 1px), linear-gradient(90deg, teal, transparent 1px);

Устанавливает фоновое изображение в виде двух градиентов, создавая эффект сетки. Первый градиент создаёт вертикальные линии, а второй — горизонтальные.

background-size: 15px 15px;

Устанавливает размер фона, чтобы градиенты повторялись каждые 15 пикселей по обеим осям.

background-position: center center;

Центрирует фоновое изображение по горизонтали и вертикали.

background-color: black;

Устанавливает основной цвет фона элемента на чёрный.

На 9 октября 2024 года я дополнительно начал использовать плагин : Prismatic

Рекомендую, мне очень понравилась его подсветка кода.

Метки: pre, вордпресс, грид