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

Question

我正在尝试在 Pug 中 output 一些 HTML 代码列表，但标签符号转换为 HTML 实体（< 到 & lt; | > 到 & 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>'}

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

Answer 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}

Answer 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>

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

问题描述

2 个解决方案

解决方案1
0 2021-12-30 18:40:54

解决方案2
0 2022-01-31 19:28:01

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

问题描述

2 个解决方案

解决方案1 0 2021-12-30 18:40:54

解决方案2 0 2022-01-31 19:28:01

解决方案1
0 2021-12-30 18:40:54

解决方案2
0 2022-01-31 19:28:01