如何用<div>模仿<pre>

19

我正在网站（即CMS）上发布python代码。我有一个python脚本，它可以读取任何python脚本并从中生成语法彩色的HTML。然后，我将此HTML复制/粘贴到CMS编辑窗口中。

问题是我的python语法突出显示脚本使用<pre>标记来保留制表符/空格，这在python中非常重要。但是，由于某些不清楚的原因，CMS会删除<pre>标签。管理员告诉我，我应该使用<div>而不是<pre>。您能帮我设计样式<div>以保持白空间格式吗？

html css

— 诺格德
source

John的回答对于所提出的特定问题很好，尽管这确实会使您内容的语义有所降低。关于CMS剥离pre标签，某些应用程序具有一个设置，该设置指定内容中允许使用的HTML。如果您发布了许多预格式化的文本，可能值得要求管理员考虑调整它是否适用于您的应用程序，而不是告诉您（坦率地）使用任意解决方法。

— Su

25

您可以使用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>标记，但在语义上对于显示代码是正确的。

— 约翰·康德
source

2

+1用于提及<code>和语义。请注意，<code>默认情况下会包装空格，因此您也必须为其分配空格white-space:nowrap。也是内联<pre>的块元素<code>；所以要模仿<pre>，display:block应该给予。

— 贾里·凯纳嫩（JariKeinänen）2011年

省略“ Courier New”，默认字体与您的浏览器的pre更紧密匹配。

— access_granted

4

要格式化DIV一样的PRE，你需要white-space: pre;的DIV。此外，您应该使用第一个答案中所述的等宽字体。

该解决方案white-space: nowrap;不正确，因为它不显示选项卡，并且仍然会折叠多个空格（@John Conde）。

— 费埃拉
source

1

您对white-space应该pre和不是的值是正确的nowrap。我已经纠正了我的答案。

— 约翰·康德