Имитация вывода кода в текстовом редакторе на чистом CSS

@TRos · Регистрация: 08.05.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Недавно писал статью для ресурса BestFREE.ru и там потребовалось организовать вывод фрагмента кода в читабельном виде. В Интернете нашел несколько готовых JS-плагинов для красивой разметки различных языков программирования (вроде, Snippet). Однако, эти плагины довольно громоздкие и, думаю, что нет особой нужды в них, если разметка требуется не так часто. Посему, решил обойтись чистым CSS.

Вот CSS-код, который у меня получился:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.codesheet{
background-color: #FFFCEF;
display:inline-block;
padding: 10px 15px 10px 15px;
border: 1px dashed #E3D3AD;
border-radius: 5p
}
.codesheet p{
font-size:1em; 
font-family: monospace; 
counter-increment: section;
display:table-row
}
.codesheet p:nth-child(even){
background: #f0f0f0
}
.codesheet p:nth-child(odd){
background: #FFFCEF
}
.codesheet p:before{
content: counter(section) " ";
background-color: #FFFCEF;
color:#808080;
padding-right: 10px;
display:table-cell;
-moz-user-select: -moz-none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.codesheet p:after{
margin-right: 10px;
content:" ";
padding: 0 10px;
display:table-cell;
-moz-user-select: -moz-none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none
}

А вот пример разметки текста под него:

HTML5
1
2
3
4
5
6
7
8
<div class="codesheet">
<p>&lt;IfModule mod_gzip.c></p>
<p>mod_gzip_on Yes</p>
<p>mod_gzip_item_include file \.js$</p>
<p>mod_gzip_item_include file \.css$</p>
<p>mod_gzip_item_include file \.php$</p>
<p>&lt;/IfModule></p>
</div>

Результат можно посмотреть на этой страничке: http://www.bestfree.ru/uslugi/web/page-speed.php

А теперь, собственно, вопросы:

1. Не получается выровнять див с кодом по центру (не помогают ни margin: 0 auto, ни text-align: center).

2. Не получается сделать отступ основного текста кода от столбика с цифрами. Пробовал добавлять margin-right для псевдокласса :before, но он не срабатывает, хотя паддинг отображается корректно (пока решил за счет того, что задал столбику с цифрами цвет фона блока, однако, хотелось бы имитировать серенький фон, как в текстовом редакторе).

3. Наверное, этот вопрос вытекает из предыдущего: не получается также сделать отступ справа от текста (решил вставкой пробела через псевдокласс :after, но подозреваю, что это огромный костыль...)

Также буду благодарен, если Вы укажете мне на чисто эстетические нюансы, поскольку, дизайнер из меня не ахти какой

@TRos · 09.05.2015, 12:21 **[ТС]**

Решил добавить еще и скриншот, чтобы было понятнее, что требуется:

@Fedor92 · 09.05.2015, 15:09

Сообщение от TRos

Не получается выровнять див с кодом по центру (не помогают ни margin: 0 auto, ни text-align: center)

Через класс .news p можно выставить text-align:center для выравнивания текста по центру...

Сообщение от TRos

Не получается сделать отступ основного текста кода от столбика с цифрами. Пробовал добавлять margin-right для псевдокласса :before, но он не срабатывает, хотя паддинг отображается корректно (пока решил за счет того, что задал столбику с цифрами цвет фона блока, однако, хотелось бы имитировать серенький фон, как в текстовом редакторе).

Через класс .codesheet p:before можно увеличить отступ слева изменив padding, а через класс .codesheet p:after можно увеличить отступ справа...

@TRos · 09.05.2015, 15:36 **[ТС]**

Через .news p нельзя, поскольку тогда все абзацы на странице будут выравниваться по центру

Про :before, похоже, я не совсем точно описал проблему

Суть в том, что я хочу сделать столбик с цифрами со светло-серым фоном. Если я это делаю, то все получается, но текст кода вплотную прилипает к блоку с цифрами, а нужен хотя бы небольшой отступ... Правый же отступ - вообще мистика. Без content ни маргины, ни паддинги для него не работают

Есть еще какие-то соображения?

@Fedor92 · 09.05.2015, 16:14

Сообщение от TRos

Через .news p нельзя, поскольку тогда все абзацы на странице будут выравниваться по центру

Какой вопрос задали - такой ответ и получили...

Тогда добавьте дополнительный класс, тем элементам которые будете выравнивать по центру и будет Вам счастье...

Сообщение от TRos

Есть еще какие-то соображения?

Сделайте вёрстку нумерованным списком <ol>...

@TRos · 09.05.2015, 17:05 **[ТС]**

Тогда добавьте дополнительный класс, тем элементам которые будете выравнивать по центру и будет Вам счастье...

Вот за эту идею - спасибо

Сделайте вёрстку нумерованным списком <ol>...

Как раз первой мыслью было. Но в этом случае я не могу отдельно управлять стилями цифр, поэтому - не вариант

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@TRos 0 / 0 / 2 Регистрация: 08.05.2015 Сообщений: 11
	09.05.2015, 12:21 [ТС]
	Решил добавить еще и скриншот, чтобы было понятнее, что требуется: Миниатюры 0

@TRos 0 / 0 / 2 Регистрация: 08.05.2015 Сообщений: 11
	09.05.2015, 15:36 [ТС]
	Через .news p нельзя, поскольку тогда все абзацы на странице будут выравниваться по центру Про :before, похоже, я не совсем точно описал проблему Суть в том, что я хочу сделать столбик с цифрами со светло-серым фоном. Если я это делаю, то все получается, но текст кода вплотную прилипает к блоку с цифрами, а нужен хотя бы небольшой отступ... Правый же отступ - вообще мистика. Без content ни маргины, ни паддинги для него не работают Есть еще какие-то соображения? 0