Как имитировать <pre> с помощью <div>

18

Я публикую код Python на веб-сайте (то есть CMS). У меня есть сценарий Python, который читает любой сценарий Python и делает из него цвет синтаксиса HTML. Затем я копирую / вставляю этот HTML в окно редактирования CMS.

Проблема в том, что мой скрипт подсветки синтаксиса Python использует <pre>тег для хранения табуляции / пробелов, которые довольно важны в Python. Однако CMS по некоторым неясным причинам удаляет <pre>тег. Админ сказал мне, что я должен использовать <div>вместо <pre>. Не могли бы вы помочь мне в оформлении, <div>чтобы сохранить форматирование wihte-space?

html css

— tnorgd
источник

Ответ Джона подходит для конкретного заданного вопроса, хотя это немного ухудшает семантику вашего контента. Что касается CMS, удаляющего предварительный тег, некоторые приложения имеют настройку, которая указывает, какой HTML-код разрешен в содержимом. Если вы публикуете много предварительно отформатированного текста, возможно, стоит попросить вашего администратора настроить его, если он существует для вашего приложения, а не предлагать вам (откровенно) произвольные обходные пути.

— Вс

24

Вы можете сделать это с помощью white-spaceправила CSS :

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Шрифты, включенные в это правило, делают каждый символ одинаковой ширины, что является обычным форматированием текста в <pre>теге.

Имейте в виду, что все ваши <div>теги будут вести себя таким образом. В идеале вы должны назначить этим <div>тегам класс, который будет влиять только на те, которые вы хотите имитировать <pre>. Что-то вроде:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Или, что еще лучше, используйте <code>тег, если он не удален вашей CMS. Он действует как <pre>тег, но семантически корректен для отображения кода.

— Джон Конде
источник

2

+1 за упоминание <code>и семантику. Обратите внимание, что <code>пробелы по умолчанию переносятся через пробел, поэтому вы также должны назначить white-space:nowrapих. Также <pre>является блочным элементом, где <code>находится в строке; так, чтобы подражать <pre>, display:blockдолжно быть дано.

— Яри Кейнянен

Пропустите "Courier New", шрифт по умолчанию более точно соответствует браузеру.

— access_granted

4

Чтобы отформатировать DIVкак PRE, вам нужно white-space: pre;для DIV. Кроме того, вы должны использовать моноширинный шрифт, как указано в первом ответе.

Решение white-space: nowrap;не правильное, так как оно НЕ отображает вкладки и все равно свернет несколько пробелов (@John Conde).

nowrap: Указание nowrap гарантирует, что последовательности пробелов будут объединены в один символ пробела, но разрывы строк будут подавлены.
pre: Указание pre гарантирует, что последовательности пробелов не будут разрушаться. Строки разбиваются только на новых строках в разметке (или при появлении «\ a» в сгенерированном контенте).

от: http://reference.sitepoint.com/css/white-space

— feeela
источник

1

Вы правы в отношении значения white-spaceдолжно быть, preа не nowrap. Я исправил свой ответ.

— Джон Конде