我正在尝试在 Pug 中输出一些 HTML 代码列表，但将标签符号转换为 HTML 实体（< to & lt; | > 到 > 等...）。到目前为止，我已经通过使用像这样的字符串插值来完成这个
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>'}
有没有更快或更简单的方法可以达到相同的结果？提前谢谢。
一种更简单的方法是使用模板文字将标记存储在变量中，然后插入变量：
-
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}
@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>