<div>で<pre>を模倣する方法

18

pythonコードをWebサイト（CMS）で公開しています。任意のpythonスクリプトを読み取り、それから構文色のHTMLを作成するpythonスクリプトがあります。次に、このHTMLをCMS編集ウィンドウにコピーして貼り付けます。

問題は、私のPython構文強調表示スクリプトが<pre>タグを使用して、Pythonで非常に重要なタブ/スペースを保持することです。ただし、CMSはいくつかの不明な理由により、<pre>タグを削除します。管理者は、<div>代わりにを使用すべきだと言った<pre>。<div>wihte-spaceの書式設定を維持するためのスタイル設定を手伝ってもらえますか？

html css

— tnorgd
ソース

ジョンの答えは、特定の質問に対しては問題ありませんが、コンテンツのセマンティクスが少し低下します。preタグを削除する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与えられるべきです。

— ヤリケイネン

「Courier New」を省略します。デフォルトのフォントは、ブラウザーの事前により厳密に一致します。

— access_granted

4

書式設定するにはDIVなどをPRE、あなたが必要とするwhite-space: pre;ためにDIV。さらに、最初の回答で述べたように、等幅フォントを使用する必要があります。

white-space: nowrap;タブを表示せず、複数のスペースを折りたたむ（@John Conde）ため、ソリューションは正しくありません。

nowrap：nowrapを指定すると、空白のシーケンスが単一のスペース文字に折りたたまれますが、改行は抑制されます。
pre：preを指定すると、空白のシーケンスが崩壊しないことが保証されます。行は、マークアップの新しい行（または生成されたコンテンツでの「\ a」の出現）でのみ壊れます。

from：http : //reference.sitepoint.com/css/white-space

— フィーエラ
ソース

1

あなたはそうであるwhite-spaceべきでpreあり、そうではないという値については正しいnowrap。答えを修正しました。

— ジョンコンデ