html - 将值列表传递给 emmet 生成器表达式

Question

我正在 emmet 工具包的帮助下编写 HTML 代码，想知道是否有办法将唯一文本值(预定义为某种列表)传递到 emmet html 元素生成器表达式中。

<!-- Example:  -->

  span.myClass{textValue$}*4

 <!--Will yield:  -->
  <span class="myClass">textValue1</span>
  <span class="myClass">textValue2</span>
  <span class="myClass">textValue3</span>
  <span class="myClass">textValue4</span>

<!--Desired: -->

  textValues = ["as","gh","xc"];

  <!-- Some generator expression, G(textValues), that yields this -->
    <span class="myClass">as</span>
    <span class="myClass">gh</span>
    <span class="myClass">xc</span>

我想知道是否有可以实现这一点的内置方法或巧妙的生成器表达式。

Answer 1

当您有现有文本并想用 HTML 标签将其包裹时
仅供引用，我的示例我使用 CodePen 作为现有文本正文的包装缩写，下面的一些示例和一些示例我只是用乘数生成它们。

textValue
textValue
textValue
textValue

熟悉 Emmet 命令

突出显示文本

然后按(⇧+⌘+A 在 macOS 上，⇧+CTRL+A 在 Windows 上)

您将在模式中看到一个带有“输入缩写”的输入字段
弹窗

无序列表和列表示例:
在“输入缩写”中输入: ul>li*或者如果您想放置自定义文本 {}或数字 $或者你在无序列表的自定义文本的前面或后面有什么。有序列表 ol将给出默认编号列表。如果需要，您可以自定义文本，然后运行查找和替换。 ul>li{textValue $}*例如，它会像这样出来

<ul>
    <li>textValue 1</li>
    <li>textValue 2</li>
    <li>textValue 3</li>
    <li>textValue 4</li>
</ul>

您想要的解决方案
在“输入缩写”中输入您想要的解决方案以环绕现有文本: span.myClass>li*对于您想要的使用有序数字生成自定义文本的解决方案 span.myClass{textValue $}*4

<span class="myClass">textValue 1</span>
<span class="myClass">textValue 2</span>
<span class="myClass">textValue 3</span>
<span class="myClass">textValue 4</span>

据我所知，您可以为自己的文本编辑器创建自己的 Emmet 片段。您还可以在 CodePen 中创建自己的自定义选项卡触发器(查看链接) https://blog.codepen.io/documentation/tab-triggers/
这是用于添加书签的 Emmet 备忘单 https://docs.emmet.io/cheat-sheet/