Emmet: 将 HTML 转换为缩写

创建于 2012-10-13  ·  25评论  ·  资料来源: emmetio/emmet

创建将解析 HTML 块并将其转换为表达式的转换器(反“扩展缩写”)。

想要支持这个问题吗? 悬赏吧! 我们通过Bountysource接受赏金。

Enhancement

最有用的评论

我已经向创建者发送了一封电子邮件,但我在此处重新发布,只是为了对请求进行投票:


你好,

首先,感谢您的出色工作,您做得非常出色,我真的很欣赏这个结果。

我对你的程序的一个想法:

是否可以进行“反向编码”?

即采取

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

并将其转换为

容器>.header+.body>.title{Title}+.text{Text}^.footer

??

为什么? 好吧,首先,使用第二个代码更容易,然后让它恢复正常。 而且,最重要的是,如果可能的话,使用客户端 javascript - 甚至是志愿者在 emmet 代码 html 页面中_直接_编写的服务器端代码。

想想会产生什么影响。

好吧,这只是一个想法:)

再次感谢,

玩得开心,
詹尼斯,
雅典,希腊,欧洲,世界。


所以,就是这样,赞成这个想法:+1:并希望看到它完成:)

所有25条评论

我已经向创建者发送了一封电子邮件,但我在此处重新发布,只是为了对请求进行投票:


你好,

首先,感谢您的出色工作,您做得非常出色,我真的很欣赏这个结果。

我对你的程序的一个想法:

是否可以进行“反向编码”?

即采取

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

并将其转换为

容器>.header+.body>.title{Title}+.text{Text}^.footer

??

为什么? 好吧,首先,使用第二个代码更容易,然后让它恢复正常。 而且,最重要的是,如果可能的话,使用客户端 javascript - 甚至是志愿者在 emmet 代码 html 页面中_直接_编写的服务器端代码。

想想会产生什么影响。

好吧,这只是一个想法:)

再次感谢,

玩得开心,
詹尼斯,
雅典,希腊,欧洲,世界。


所以,就是这样,赞成这个想法:+1:并希望看到它完成:)

有我的赞成! 想象一下,如果我们可以用 HTML 对页面进行编码,将其转换为 emmet,然后编写包含 emmet 代码的 php 代码,该代码会动态扩展为 HTML。

:hand: 我的驱动器两美分:

@icb931023首先我觉得你说的话听起来很酷,但真的,有什么好处? 您的 PHP 将不得不处理代表您的 HTML 的较短字符串,但它随后必须使用它做更多的工作。

我想不必担心拼写错误(例如在结束标签中缺少斜线),因为将为您生成所有标签,但是您正在使用我假设的扩展 HTML(尽管从简洁的语法)所以我不确定这是否也是一个强有力的论据。 或者,我假设您不会完全使用简洁/折叠的语法是错误的。

我想要这个。 我只是看不到令人信服的用例。 例如,它不像 CSS 预处理那样明显有益。

如果浏览器/模板引擎理解 Emmet 语法,那就是另一回事了。 那会很有趣!

嗯,创建一个 JS 库来解释它非常有趣;)

这是从客户的角度开始的; 埃米特的小胡子。 随意贡献。

@瓦巴塔:)

任何更新?

也会喜欢这个。 我使用一个样式指南页面来存储我所有的元素,为了管理它,我有一个巨大的 JSON 文件,使用 Emmet 字符串来表示元素,并且我创建了一个 JavaScript 工具来将它们吐出在页面上。 但是现在我必须手动转换它们,以在每次创建新文件时保持此文件最新。 想要一种将 HTML 转换为 Emmet 字符串的方法。

_撞_

我希望能够将 HTML 转换为 emmet。 这对于制作我经常使用的代码块的备忘单非常有用。

任何改变?

@Kcko没有更新。 此功能对我来说优先级最低

这将是一个不错的功能。 层次结构在 emmet/zen 语法中很容易阅读,有时在迭代 HTML 片段设计时在缩写中有一种粗略的草稿会很有帮助。

将是一个很棒的功能!
想象一下使用 *n 功能创建多个块,然后发现您需要更改块。 现在您必须删除块并再次重写 emmet 代码。 回去,只修改一部分然后让它再次生成会快得多!

@MarcoWilli Emmet 有足够的方法来快速修改现有代码:

  • (用缩写包裹)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (更新标签)[http://emmet.io/blog/beta-v1-1/]

您还应该注意,如果您的重复元素包含不同的内容(如您所描述的“稍后修改”),则反向缩写字符串将与您用于生成代码的不同

从我点赞。 Emmet 的新手,这将是提高我技能的绝佳方式。

真的需要这个功能,这是我的情况:

我收到一些像
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

所以我想使用第一个生成更多记录,所以现在我尝试复制缩写以获得记录缩写,然后输入类似(record...)*10

谢谢

@chermed ...或者您可以简单地复制粘贴代码片段。 请注意,您提供的代码是一个非常简单但非常罕见的用例。 在大多数情况下,你最终会得到类似record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+...缩写,这不是很有用

我们有一个微服务,它从带有数据的模板 + JSON 对象呈现 Html 字符串,并使用呈现的 html 字符串响应 POST 请求。 必须在 HTTP 响应中发送一个巨大的 HTML 字符串会给我们的应用程序流程带来瓶颈。

如果有一种方法可以将呈现的 HTML 转换为 Emmet 缩写作为响应发送,那么它将消除我们的瓶颈,因为我们的响应数据大小需要更少的字节数。 接收到响应的微服务然后可以对渲染客户端的缩写进行 emmet-expand。

@kizzlebot似乎是一个可行的用例,但您应该考虑以下几点:

  • 将巨大的 HTML 转换为 Emmet 也可能是一个瓶颈,但在这种情况下在 CPU 方面
  • 输出 gzipping 能解决问题吗?
  • 在客户端扩展 Emmet 意味着它需要一个特殊的运行时进行渲染。 因此,您的微服务似乎根本不需要,因为您可以将自己的模板和 JSON 数据直接发送给客户端并使用您自己的运行时呈现它

@kizzlebot为什么不用 Messagepack 和/或 Apache Avro?

@sergeche更具体地说,“渲染”这个词可能是错误的。 我们使用 html 通过微服务创建 PDF 文档,该微服务仅接收 html 有效负载并将其转换为 PDF。 因此,如果可以从 html 转换为 Emmet 缩写,接收 emmet 缩写的客户端应该能够使用当前的 Emmet npm 模块简单地扩展它。 我们不需要运行时来呈现,因为 html 永远不会在客户端呈现。 我们只需要一个紧凑的有效载荷就可以通过电线传递。

我想建立示例站点并将它们转换回 emmet 片段,以使演示文稿输入更快(以及流程演示 emmet)。

可能可以使用 Hyperscript / JSX 和 AST。

这确实有很大的潜力。
前几天我在搞乱像 Jade 和 HAML 这样的 HTML 框架,我认为它们是不明确的 HTML 语法的一个很好的替代品。 但是我无法在我的项目中使用它们,因为它只需要额外的安装和转换。 我一直使用 Emmet,它几乎一样好(它只支持少一点,不需要安装)。
但是今天当我在构建站点模板时,我决定在使用 Emmet 编写时使用缩进,然后我想出了这个:

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

这比 HTML 更具可读性。
看了之后,我想,如果Emmet支持缩进是不是很棒。
之后我想,如果有一个转换工具可以将 Emmet 转换为带有缩进的 HTML 呢? 这样,编写和阅读 HTML 会更有趣。
我的意思是 XML 遇到了 JSON。
是时候让 HTML 继续前进了……

你的意思是 webcomponents、hyperscript、JSX 和 pug? 好吧,恕我直言,这不是很容易阅读。

Emmet 主要用于快速原型设计和命令完成/脚手架,例如在 PhpStorm 项目中。 所以 Emmet 语法通常不会存储在任何项目中,只存储最终的 html。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

renatorib picture renatorib  ·  26评论

fversepuy picture fversepuy  ·  5评论

corysimmons picture corysimmons  ·  5评论

midgethoen picture midgethoen  ·  8评论

DanielRuf picture DanielRuf  ·  5评论