<div>로 <pre>를 흉내내는 방법

18

웹 사이트 (CMS)에 파이썬 코드를 게시하고 있습니다. 파이썬 스크립트를 읽고 파이썬 스크립트를 읽고 구문 색 HTML을 만듭니다. 그런 다음이 HTML을 복사하여 CMS 편집 창에 붙여 넣습니다.

문제는 내 파이썬 구문 강조 스크립트가 <pre>태그를 사용 하여 파이썬에서 매우 중요한 탭 / 공백을 유지한다는 것입니다. 그러나 CMS는 명확하지 않은 이유로 <pre>태그를 제거합니다 . 관리자가 <div>대신 대신 사용해야한다고 말했습니다 <pre>. <div>wihte-space 형식을 유지하기 위해 a 스타일링을 도와 주 시겠습니까?

html css

— tnorgd
소스

John의 답변은 특정 질문에 적합하지만 콘텐츠의 의미가 약간 저하됩니다. 프리 태그를 제거하는 CMS와 관련하여 일부 응용 프로그램에는 컨텐트에 허용되는 HTML을 지정하는 설정이 있습니다. 미리 서식이 지정된 텍스트를 많이 게시하는 경우 관리자에게 임의의 임시 해결책을 사용하도록 지시하는 대신 응용 프로그램에 존재하는 경우이를 조정하도록 요청하는 것이 좋습니다.

— Su '

24

CSS white-space규칙 을 사용하여이를 수행 할 수 있습니다 .

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

언급 <code>과 의미론 +1 참고 <code>이 할당해야하므로 랩은 기본적으로 공백 white-space:nowrap이 너무 그것. 또한 <pre>블록 요소 <code>인라인된다; 그래서 모방에 <pre>, display:block주어져야한다.

— Jari Keinänen

"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. 내 대답을 수정했습니다.

— John Conde