ETML 是 Emacs Text Markup Language 的缩写，其形式是 elisp 列表，用来表达 etaf 组件的基本结构。ETML 可以等价的转换为 HTML 和 DOM，下面是一个例子:

HTML

<div class="rounded-xl bg-white p-10">
  <div class="space-y-6">
    <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
    <ul class="space-y-3">
      <li>
        <p class="ml-3">Customizing your theme with
          <code class="text-gray-950">@theme</code></p>
      </li>
      <li>
        <p class="ml-3">Adding custom utilities with
          <code class="text-gray-950">@utility</code></p>
      </li>
      <li>
        <p class="ml-3">Adding custom variants with
          <code class="text-gray-950">@variant</code></p>
      </li>
      <li class="flex">
        <p class="ml-3">Code completion with instant preview</p>
      </li>
    </ul>
    <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
  </div>
  <hr class="my-6 w-full"/>
  <p class="mb-3">Want to dig deeper into Tailwind?</p>
  <p class="font-semibold">
    <a href="https://tailwindcss.com/docs" class="text-gray-950">
      Read the docs →</a>
  </p>
</div>

ETML

(div :class "rounded-xl bg-white p-10"
  (div :class "space-y-6"
    (p "An advanced online playground for Tailwind CSS, including support for things like:")
    (ul :class "space-y-3"
      (li (p :class "ml-3" "Customizing your theme with"
            (code :class "text-gray-950" "@theme")))
      (li (p :class "ml-3" "Adding custom utilities with"
            (code :class "text-gray-950" "@utility")))
      (li (p :class "ml-3" "Adding custom variants with"
            (code :class "text-gray-950" "@variant")))
      (li :class "flex"
        (p :class "ml-3" "Code completion with instant preview")))
    (p "Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online."))
  (hr :class "my-6 w-full")
  (p :class "mb-3" "Want to dig deeper into Tailwind?")
  (p :class "font-semibold"
    (a :href "https://tailwindcss.com/docs" :class "text-gray-950" "Read the docs →")))

DOM

(div ((class . "rounded-xl bg-white p-10"))
  (div ((class . "space-y-6"))
    (p nil
      "An advanced online playground for Tailwind CSS, including support for things like:")
    (ul ((class . "space-y-3"))
      (li nil
        (p ((class . "ml-3"))
          "Customizing your theme with"
          (code ((class . "text-gray-950")) "@theme")))
      (li nil
        (p ((class . "ml-3"))
          "Adding custom utilities with"
          (code ((class . "text-gray-950")) "@utility")))
      (li nil
        (p ((class . "ml-3"))
          "Adding custom variants with"
          (code ((class . "text-gray-950")) "@variant")))
      (li ((class . "flex"))
        (p ((class . "ml-3"))
          "Code completion with instant preview")))
    (p nil
      "Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online."))
  (hr ((class . "my-6 w-full")))
  (p ((class . "mb-3"))
    "Want to dig deeper into Tailwind?")
  (p ((class . "font-semibold"))
    (a ((href . "https://tailwindcss.com/docs") (class . "text-gray-950"))
      "Read the docs →")))

ETML 基本结构

从上面的例子，我们可以发现 ETML 作为直接给用户使用的 DSL，相较于 HTML 和 DOM 更加简洁，总结其基本结构如下：

`(组件名 ,@属性列表 &rest 子组件列表)