Як наслідувати <pre> за допомогою <div>

19

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

Проблема полягає в тому, що мій сценарій виділення синтаксису python використовує <pre>тег, щоб зберігати вкладки / пробіли, які є досить важливими в python. Однак CMS з незрозумілих причин видаляє <pre>тег. Адмін сказав мені, що я повинен використовувати <div>замість цього <pre>. Чи можете ви допомогти мені в розробці стилю, <div>щоб зберегти формат вітте-простору?

html css

— tnorgd
джерело

Відповідь Джона чудово відповідає на задане запитання, хоча це дещо погіршує семантику вашого вмісту. Щодо знімання CMS попереднього тегу, деякі програми мають налаштування, яке визначає, який HTML дозволений у вмісті. Якщо ви публікуєте багато заздалегідь відформатованого тексту, можливо, варто попросити свого адміністратора розібратися, якщо він існує для вашої програми, а не сказати вам використовувати (відверто) довільні обхідні шляхи.

— Су '

25

Це можна зробити за допомогою 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: Вказівка норапу гарантує, що послідовності пробілів згортаються в єдиний пробільний символ, але розриви рядків будуть придушені.
pre: Визначення попередньо гарантує, що послідовності пробілів не згортаються. Рядки порушуються лише в нових рядках у розмітці (або при появі "\ a" у створеному вмісті).

з: http://reference.sitepoint.com/css/white-space

— тамела
джерело

1

Ви вірно оцінюєте значення того, що white-spaceмає бути, preа не nowrap. Я виправив свою відповідь.

— Джон Конде