Jak naśladować <pre> za pomocą <div>

19

Publikuję kod python na stronie internetowej (czyli CMS). Mam skrypt w języku Python, który odczytuje dowolny skrypt w języku Python i tworzy z niego HTML w kolorze składni. Następnie kopiuję / wklejam ten HTML do okna edycji CMS.

Problem polega na tym, że mój skrypt podświetlania składni Pythona używa <pre>tagów do przechowywania tabulatorów / spacji, które są dość ważne w Pythonie. Jednak z niektórych niejasnych powodów CMS usuwa <pre>tag. Administrator powiedział mi, że powinienem użyć <div>zamiast <pre>. Czy mógłbyś mi pomóc w stylizacji, <div>aby zachować formatowanie w przestrzeni kosmicznej?

html css tnorgd
źródło
Odpowiedź Johna jest odpowiednia na konkretne zadane pytanie, choć nieco to obniża semantykę treści. Jeśli chodzi o CMS usuwający tag wstępny, niektóre aplikacje mają ustawienie określające, jaki HTML jest dozwolony w treści. Jeśli publikujesz dużo wstępnie sformatowanego tekstu, warto poprosić administratora, aby zastanowił się nad dostosowaniem go, jeśli istnieje dla Twojej aplikacji, zamiast zalecać stosowanie (szczerze) arbitralnych obejść.
Su '

Odpowiedzi:

25

Możesz to zrobić za pomocą white-spacereguły CSS :

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

Czcionki zawarte w tej regule sprawiają, że każdy znak ma tę samą szerokość, co wspólne formatowanie tekstu w <pre>znaczniku.

Pamiętaj, że dzięki temu wszystkie <div>tagi będą się tak zachowywać. Idealnie nadajesz tym <div>znacznikom klasę, która ma wpływ tylko na te, które chcesz naśladować <pre>. Coś jak:

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

Lub jeszcze lepiej, użyj <code>tagu, jeśli nie jest usuwany przez CMS. Działa jak <pre>znacznik, ale jest semantycznie poprawny do wyświetlania kodu.

John Conde
źródło
2
+1 za wzmiankę <code>i semantykę. Zauważ, że <code>domyślnie otacza spacje, więc musisz także je przypisać white-space:nowrap. Ponadto <pre>znajduje się element bloku, w którym <code>jest wbudowany; więc naśladować <pre>, display:blocknależy podać.
Jari Keinänen
Pomiń „Courier New”, domyślna czcionka bardziej odpowiada wcześniejszej przeglądarce.
access_granted
4

Aby sformatować DIVjak PRE, potrzebujesz white-space: pre;do DIV. Ponadto należy użyć czcionki o stałej szerokości, jak podano w pierwszej odpowiedzi.

Rozwiązanie white-space: nowrap;jest nieprawidłowe, ponieważ NIE wyświetla kart i nadal zwinie wiele spacji (@John Conde).

  • nowrap: Określenie nowrap zapewnia, że ​​sekwencje białych znaków zostaną zwinięte w pojedynczy znak spacji, ale łamanie linii zostanie pominięte.
  • pre: Określenie pre gwarantuje, że sekwencje białych znaków nie zostaną zwinięte. Linie są przerywane tylko w nowych wierszach znaczników (lub w wystąpieniach „\ a” w generowanej treści).

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

feeela
źródło
1
Masz rację, jeśli chodzi o wartość white-spacepowinna być prei nie nowrap. Poprawiłem swoją odpowiedź.
John Conde