Emmet: Преобразование HTML в аббревиатуру

Созданный на 13 окт. 2012  ·  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 {Заголовок} +. text {Текст} ^. footer

??

Почему? ну, во-первых, со вторым кодом проще работать, а потом уже возвращать его в норму. И, что наиболее важно, если возможно, использовать javascript на стороне клиента - или даже код на стороне сервера добровольцами для записи _directly_ на HTML-страницах с кодом emmet.

Подумайте о том, какое влияние это окажет.

Ну это просто мысль :)

Еще раз спасибо,

Развлекайся,
Яннис,
Афины, Греция, Европа, Мир.


Итак, вот и все, голосование за идею: +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 {Заголовок} +. text {Текст} ^. footer

??

Почему? ну, во-первых, со вторым кодом проще работать, а потом уже возвращать его в норму. И, что наиболее важно, если возможно, использовать javascript на стороне клиента - или даже код на стороне сервера добровольцами для записи _directly_ на HTML-страницах с кодом emmet.

Подумайте о том, какое влияние это окажет.

Ну это просто мысль :)

Еще раз спасибо,

Развлекайся,
Яннис,
Афины, Греция, Европа, Мир.


Итак, вот и все, голосование за идею: +1: и надежду, что это будет сделано :)

Получите мой голос за! Представьте, что мы можем закодировать страницы в HTML, перевести его в emmet, а затем написать PHP-код, включающий код emmet, который динамически расширяется в HTML.

: hand: Мой проездной на два цента:

@ icb931023 Сначала я подумал, что то, что вы сказали, звучит круто, но на самом деле, какая от этого польза? Ваш PHP наверняка будет иметь дело с более короткой строкой, представляющей ваш HTML, но тогда ему придется больше работать с ней.

Думаю, не нужно так сильно беспокоиться об опечатках (например, об отсутствии косой черты в закрывающем теге), поскольку все теги будут сгенерированы для вас, но вы работаете с расширенным HTML, как я предполагаю (хотя и начиная с краткий синтаксис), поэтому я не уверен, что это веский аргумент в пользу этого. Или, может быть, я ошибаюсь, предполагая, что вы не будете работать полностью с кратким / свернутым синтаксисом.

Я хочу этого. Я просто не вижу убедительного варианта использования. Это не так очевидно, как, например, предварительная обработка CSS.

Было бы иначе, если бы браузеры / движки шаблонов понимали синтаксис Emmet. Было бы интересно!

Ммм, довольно интересно создать JS-библиотеку, чтобы передать это;)

Вот начало с точки зрения клиента; Усы Эммета . Не стесняйтесь вносить свой вклад.

@vabatta :)

любые обновления?

Мне бы тоже это понравилось. Я использую страницу руководства по стилю, на которой я храню все свои элементы, для управления этим у меня есть гигантский файл JSON, использующий строки Emmet для представления элементов, и я создал инструмент JavaScript, чтобы размещать их на странице. Но прямо сейчас мне нужно преобразовать их все вручную, чтобы этот файл постоянно обновлялся каждый раз, когда создается что-то новое. Хотел бы способ преобразовать HTML в строку Эммета.

_удар_

Я хотел бы иметь возможность конвертировать 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/]

Вы также должны отметить, что если ваши повторяющиеся элементы содержат различное содержимое (как вы описали как «изменить позже»), обратная строка аббревиатуры не будет такой же, как вы использовали для генерации кода.

Проголосуйте за меня. Эммет был новичком, и это был бы фантастический способ улучшить мои навыки.

Очень нужна была эта функция, вот мой случай:

Я получаю несколько блоков вроде
<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}+... , что не очень полезно.

У нас есть микросервис, который отображает строку Html из объекта шаблона + JSON с данными и отвечает на запросы POST с помощью визуализированной строки HTML. Необходимость отправки огромной HTML-строки в HTTP-ответе создает узкое место в потоке нашего приложения.

Если есть способ взять этот обработанный HTML-код и преобразовать его в аббревиатуру Emmet, которая вместо этого отправляется в качестве ответа, это устранит наше узкое место, поскольку размер данных ответа занимает меньшее количество байтов. Микрослужба, которая получает ответ, может затем развернуть аббревиатуру для отрисовки на стороне клиента.

@kizzlebot кажется жизнеспособным вариантом использования, но вы должны учитывать следующее:

  • Преобразование огромного HTML в Emmet также может быть узким местом, но в этом случае на стороне процессора
  • Решает ли сжатие вывода проблему?
  • Расширение Emmet на стороне клиента означает, что для рендеринга требуется специальная среда выполнения. Итак, похоже, что в вашем микросервисе вообще нет необходимости, потому что вы можете отправлять свой собственный шаблон и данные JSON прямо клиенту и отображать их, используя свою собственную среду выполнения.

@kizzlebot, а почему бы не Messagepack и / или Apache Avro?

@sergeche, чтобы быть более конкретным, "рендеринг" может быть неправильным словом для использования. мы используем html для создания документа PDF через микросервис, который получает только полезные данные html и преобразует его в PDF. Следовательно, если можно будет перейти от сокращения html к сокращению Emmet, клиент, получивший сокращение emmet, должен иметь возможность просто расширить его, используя текущий модуль Emmet npm. Нам не нужна среда выполнения для рендеринга, потому что HTML никогда не рендерится на стороне клиента. Нам просто нужна компактная полезная нагрузка, чтобы перемещаться по проводу.

Я хотел бы создать образцы сайтов и преобразовать их обратно в фрагменты кода emmet, чтобы ускорить набор текста в презентации (и это демонстрационный процесс emmet).

Вероятно, можно использовать Hyperscript / JSX и AST.

У этого действительно большой потенциал.
На днях я возился с фреймворками HTML, такими как Jade и HAML, и подумал, что они являются отличной заменой нечеткого синтаксиса HTML. Но я не мог использовать их для своих проектов, потому что для этого требовалась лишь дополнительная установка и преобразование. Я всегда использовал Emmet, который был почти так же хорош (только поддерживает немного меньше и не требует установки).
Но сегодня, когда я создавал шаблон сайта, я решил использовать отступы при написании на Emmet и придумал следующее:

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

Это намного более читабельно, чем HTML.
И, посмотрев на это, я подумал, было бы здорово, если бы Эммет поддерживал отступы.
И после этого я подумал, а что, если есть инструмент преобразования, который конвертирует Emmet в HTML с отступами. Таким образом, писать и читать HTML намного интереснее.
Я имею в виду, что с XML случился JSON.
Пора HTML двигаться дальше ...

Вы имеете в виду веб-компоненты, гиперкрипт, JSX и мопс? Что ж, имхо это не очень легко читать.

Emmet в основном используется для быстрого прототипирования и завершения / создания команд, например, в проектах PhpStorm. Таким образом, синтаксис Emmet обычно не сохраняется ни в каких проектах, а только в окончательном html.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

planetoftheweb picture planetoftheweb  ·  3Комментарии

midgethoen picture midgethoen  ·  8Комментарии

fversepuy picture fversepuy  ·  5Комментарии

DanielRuf picture DanielRuf  ·  5Комментарии

deathmood picture deathmood  ·  15Комментарии