在 Pug 中编写多行转义 HTML 的最短方法是什么？答案

【问题标题】：What is the shortest way to write multiline escaped HTML in Pug?在 Pug 中编写多行转义 HTML 的最短方法是什么？
【发布时间】：2021-12-29 20:15:39
【问题描述】：

我正在尝试在 Pug 中输出一些 HTML 代码列表，但标签符号转换为 HTML 实体（到 & gt; 等...）。到目前为止，我已经通过使用像这样的字符串插值来实现这一点

pre
 code.
  #{'<li><a href="#">Anchor tag text</a></li>'}
  #{'<li><a href="#">Anchor tag text</a></li>'}

另一个例子：

pre
  code.
    #{'<body>'}
      #{'<div class="divclass">'}
        #{'<h1 class="class1 class2 class3" id="id1">Heading</h1>'}
        #{'<p class="class2 class3 class1" id="id2">Para1</p>'}
      #{'</div>'}
    #{'</body>'}

有没有更快或更简单的方法来达到相同的结果？提前谢谢。

【问题讨论】：

标签： pug

【解决方案1】：

更简单的方法是将标记存储在变量中，就像使用模板文字一样，然后插入变量：

-
  const markup =
  `<body>
    <div class="divclass">
      <h1 class="class1 class2 class3" id="id1">Heading</h1>
      <p class="class2 class3 class1" id="id2">Para1</p>
    </div>
  </body>`

pre
  code #{markup}

【讨论】：

【解决方案2】：

@Sean 首先感谢您的回答。我发现你的方法有点烦人（更不用说我必须跟踪变量名称，不断进行更改，并且在以前的代码列表之间添加了代码列表）所以我最终将代码合并到模板文字中但是在 mixin 参数中，如下所示：

mixin htmlCode(codeBlock)
  pre.html-icon: code= codeBlock
          
+htmlCode(
`<body>
    <div class="divclass">
      <h1 class="class1 class2 class3" id="id1">Heading</h1>
      <p class="class2 class3 class1" id="id2">Para1</p>
    </div>
</body>`)

我还尝试让 mixin 不带参数，并将 mixin 块用于内容，但它需要插值。我找不到该版本的解决方案。

//doesn't work as is. It again needs string interpolation on every line
mixin htmlCode
  pre.html-icon: code: block
          
+htmlCode.
  <body>
    <div class="divclass">
      <h1 class="class1 class2 class3" id="id1">Heading</h1>
      <p class="class2 class3 class1" id="id2">Para1</p>
    </div>
  </body>

【讨论】：