Как имитировать <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. Я исправил свой ответ.
Джон Конде