如何使用 Jade 显示多行 HTML 代码块答案

【问题标题】：How to show multi-line HTML code block with Jade如何使用 Jade 显示多行 HTML 代码块
【发布时间】：2016-09-06 09:49:52
【问题描述】：

我正在使用 Jade 和 Node js，并希望在引导网页中显示 HTML 代码块。

我试过这个

  p
    | Copy and paste the following HTML code in a web page.

  code
    | <div class="container">
    |    <iframe src="http://ea-studio.forexsb.com"
    |         style="width: 100%; min-height: 1500px" >
    |    </iframe>
    | </div>

但它没有显示代码，而是执行了它。结果真的很有趣。我的应用程序本身集成了 :) 但这不是我的意图。

Jade 显示多行源代码的方式是什么？

编辑：

转义 HTML 会显示代码，但在一行中：

  code
    | &lt;div class=&quot;container&quot;&gt;
    |    &lt;iframe src=&quot;http://ea-studio.forexsb.com&quot;
    |         style=&quot;width: 100%; min-height: 1500px&quot; &gt;
    |    &lt;/iframe&gt;
    | &lt;/div&gt;

生产：

<div class="container"> <iframe src="http://ea-studio.forexsb.com" style="width: 100%; min-height: 1500px" > </iframe> </div>

【问题讨论】：

标签： html node.js twitter-bootstrap pug

【解决方案1】：

这对我有用：

p.
  Copy and paste the following HTML code in a web page.

pre
  code
    | &lt;div class="container">
    |    &lt;iframe src="http://ea-studio.forexsb.com"
    |         style="width: 100%; min-height: 1500px">
    |    &lt;/iframe>
    | &lt;/div>

http://codepen.io/antibland/pen/wGOeeo?editors=1000

【讨论】：

优秀。我发现只有pre 标签就足够了，没有code 标签。