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

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

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

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

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

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

CSS

.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

<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>...

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

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

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	09.05.2015, 15:09	3
	Сообщение от TRos Не получается выровнять див с кодом по центру (не помогают ни margin: 0 auto, ни text-align: center) Через класс .news p можно выставить text-align:center для выравнивания текста по центру... Сообщение от TRos Не получается сделать отступ основного текста кода от столбика с цифрами. Пробовал добавлять margin-right для псевдокласса :before, но он не срабатывает, хотя паддинг отображается корректно (пока решил за счет того, что задал столбику с цифрами цвет фона блока, однако, хотелось бы имитировать серенький фон, как в текстовом редакторе). Через класс .codesheet p:before можно увеличить отступ слева изменив padding, а через класс .codesheet p:after можно увеличить отступ справа... 0

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

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	09.05.2015, 16:14	5
	Сообщение от TRos Через .news p нельзя, поскольку тогда все абзацы на странице будут выравниваться по центру Какой вопрос задали - такой ответ и получили... Тогда добавьте дополнительный класс, тем элементам которые будете выравнивать по центру и будет Вам счастье... Сообщение от TRos Есть еще какие-то соображения? Сделайте вёрстку нумерованным списком <ol>... 1

@TRos 0 / 0 / 2 Регистрация: 08.05.2015 Сообщений: 11
	09.05.2015, 17:05 [ТС]	6
	Тогда добавьте дополнительный класс, тем элементам которые будете выравнивать по центру и будет Вам счастье... Вот за эту идею - спасибо Сделайте вёрстку нумерованным списком <ol>... Как раз первой мыслью было. Но в этом случае я не могу отдельно управлять стилями цифр, поэтому - не вариант 0