Emmet: Konversi HTML ke singkatan

Dibuat pada 13 Okt 2012  ·  25Komentar  ·  Sumber: emmetio/emmet

Buat konverter yang akan mem-parsing blok HTML dan mengubahnya menjadi ekspresi (kontra-"Perluas Singkatan").

Ingin mendukung masalah ini? Posting hadiah di atasnya! Kami menerima bounty melalui

Enhancement

Komentar yang paling membantu

saya telah mengirim email ke pembuatnya tetapi saya memposting ulang di sini, hanya untuk meningkatkan permintaan:


Hai,

Pertama-tama, terima kasih atas pekerjaan hebat Anda, Anda telah melakukan pekerjaan yang luar biasa, saya sangat mengagumi hasilnya.

Sebuah pemikiran yang saya miliki tentang program Anda:

Apakah mungkin untuk melakukan 'pengkodean terbalik'?

yaitu mengambil

<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>

dan ubah menjadi

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

??

Mengapa? baik, pertama-tama, lebih mudah untuk bekerja dengan kode kedua, dan kemudian membuatnya kembali normal. Dan, yang paling penting dan, jika memungkinkan untuk menggunakan javascript sisi klien - atau bahkan kode sisi server oleh sukarelawan untuk menulis, _directly_, di halaman html kode emmet.

Pikirkan dampak yang akan terjadi.

Yah, itu hanya pemikiran :)

Terima kasih lagi,

Selamat bersenang-senang,
Giannis,
Athena, Yunani, Eropa, Dunia.


Jadi, begitulah, upvoting idenya :+1: dan berharap bisa selesai :)

Semua 25 komentar

saya telah mengirim email ke pembuatnya tetapi saya memposting ulang di sini, hanya untuk meningkatkan permintaan:


Hai,

Pertama-tama, terima kasih atas pekerjaan hebat Anda, Anda telah melakukan pekerjaan yang luar biasa, saya sangat mengagumi hasilnya.

Sebuah pemikiran yang saya miliki tentang program Anda:

Apakah mungkin untuk melakukan 'pengkodean terbalik'?

yaitu mengambil

<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>

dan ubah menjadi

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

??

Mengapa? baik, pertama-tama, lebih mudah untuk bekerja dengan kode kedua, dan kemudian membuatnya kembali normal. Dan, yang paling penting dan, jika memungkinkan untuk menggunakan javascript sisi klien - atau bahkan kode sisi server oleh sukarelawan untuk menulis, _directly_, di halaman html kode emmet.

Pikirkan dampak yang akan terjadi.

Yah, itu hanya pemikiran :)

Terima kasih lagi,

Selamat bersenang-senang,
Giannis,
Athena, Yunani, Eropa, Dunia.


Jadi, begitulah, upvoting idenya :+1: dan berharap bisa selesai :)

Dapatkan upvote saya! Bayangkan jika kita dapat mengkode halaman dalam HTML, menerjemahkannya menjadi emmet, dan kemudian menulis kode php yang menyertakan kode emmet yang diperluas menjadi HTML secara dinamis.

:hand: Drive-oleh saya dua sen:

@icb931023 Pertama saya pikir apa yang Anda katakan terdengar keren tapi sungguh, apa manfaatnya? PHP Anda harus berurusan dengan string yang lebih pendek yang mewakili HTML Anda, tetapi kemudian harus melakukan lebih banyak pekerjaan dengannya.

Saya kira tidak perlu terlalu khawatir tentang kesalahan ketik (seperti garis miring yang hilang pada tag penutup misalnya) karena semua tag akan dibuat untuk Anda, tetapi Anda bekerja dengan HTML yang diperluas, saya berasumsi (walaupun dimulai dengan sintaks ringkas) jadi saya tidak yakin apakah itu argumen yang kuat untuk itu juga. Atau mungkin saya salah dalam menganggap Anda tidak akan bekerja sepenuhnya dalam sintaks yang ringkas/diciutkan.

Saya ingin menginginkan ini. Saya tidak bisa melihat kasus penggunaan yang meyakinkan. Ini tidak jelas bermanfaat seperti preprocessing CSS misalnya.

Akan menjadi cerita yang berbeda jika browser / mesin templating memahami sintaks Emmet. Itu akan menarik!

Mmm, cukup menarik untuk membuat perpustakaan JS untuk memperdagangkannya;)

Berikut adalah awal dari perspektif klien; Kumis Emmet . Jangan ragu untuk berkontribusi.

@vabatta :)

ada pembaruan?

Akan menyukai ini juga. Saya menggunakan halaman panduan gaya tempat saya menyimpan semua elemen saya, untuk mengelola ini saya memiliki file JSON raksasa menggunakan string Emmet untuk mewakili elemen dan saya telah membuat alat JavaScript untuk mengeluarkannya di halaman. Tetapi sekarang saya harus mengonversi semuanya dengan tangan agar file ini tetap mutakhir setiap kali sesuatu yang baru dibuat. Akan senang cara untuk mengonversi HTML ke string Emmet.

_menabrak_

Saya ingin sekali dapat mengubah HTML menjadi emmet. Akan sangat berguna untuk membuat lembar contekan dari blok kode yang sering saya gunakan.

Ada perubahan?

@Kcko tidak ada pembaruan. Fitur ini memiliki prioritas terendah untuk saya

itu akan menjadi fitur yang bagus. hierarki mudah dibaca dalam sintaks emmet/zen dan terkadang sangat membantu untuk memiliki semacam konsep kasar dalam singkatan saat mengulangi desain fragmen HTML.

Akan menjadi fitur yang hebat!
Bayangkan membuat beberapa blok dengan fitur *n dan mengetahui nanti Anda perlu mengubah blok. Sekarang Anda harus menghapus blok dan menulis ulang kode emmet lagi. Kembali, memodifikasi hanya sebagian dan kemudian membiarkannya menghasilkan lagi akan jauh lebih cepat!

@MarcoWilli Emmet memiliki metode yang cukup untuk dengan cepat mengubah kode yang ada:

  • (Bungkus dengan singkatan)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (Perbarui tag)[http://emmet.io/blog/beta-v1-1/]

Anda juga harus mencatat bahwa jika elemen berulang Anda berisi konten yang berbeda (seperti yang Anda jelaskan sebagai "ubah nanti"), string singkatan terbalik tidak akan sama seperti yang Anda gunakan untuk menghasilkan kode

Suara positif dari saya. Baru di Emmet dan itu akan menjadi cara yang fantastis untuk meningkatkan keterampilan saya.

Sangat membutuhkan fitur ini, ini kasus saya:

Saya menerima beberapa blok seperti
<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>

Jadi saya ingin menghasilkan lebih banyak catatan menggunakan yang pertama, jadi sekarang saya mencoba mereproduksi singkatan untuk mendapatkan singkatan catatan dan kemudian saya mengetik sesuatu seperti (record...)*10

Terima kasih

@chermed ...atau Anda cukup menyalin dan menempelkan cuplikan kode. Harap perhatikan bahwa kode yang Anda berikan adalah kasus penggunaan yang sangat sederhana namun sangat jarang. Dalam kebanyakan kasus Anda akan berakhir dengan sesuatu seperti singkatan record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... , yang tidak terlalu berguna

Kami memiliki layanan mikro yang merender string Html dari template + objek JSON dengan data dan merespons permintaan POST dengan string html yang dirender. Harus mengirim string HTML besar dalam respons HTTP memperkenalkan hambatan aliran aplikasi kami.

Jika ada cara untuk mengambil HTML yang dirender ini dan mengubahnya menjadi singkatan Emmet yang dikirim sebagai respons, itu akan menghilangkan hambatan kami karena ukuran data respons kami membutuhkan jumlah byte yang lebih kecil. Layanan mikro yang menerima respons kemudian dapat memperluas singkatan untuk merender sisi klien.

@kizzlebot sepertinya kasus penggunaan yang layak, tetapi Anda harus mempertimbangkan yang berikut:

  • Mengubah HTML besar menjadi Emmet mungkin juga menjadi hambatan, tetapi di sisi CPU dalam kasus ini
  • Apakah output gzipping memecahkan masalah?
  • Memperluas Emmet di sisi klien berarti memerlukan runtime khusus untuk rendering. Jadi, sepertinya tidak ada kebutuhan di layanan mikro Anda sama sekali karena Anda dapat mengirim template dan data JSON Anda sendiri langsung ke klien dan merendernya menggunakan runtime Anda sendiri

@kizzlebot mengapa tidak Messagepack dan/atau Apache Avro?

@sergeche untuk lebih spesifik, "render" mungkin salah kata yang digunakan. kami menggunakan html untuk membuat dokumen PDF melalui layanan mikro yang hanya menerima muatan html dan mengubahnya menjadi PDF. Oleh karena itu, jika memungkinkan untuk beralih dari html ke singkatan Emmet, klien yang menerima singkatan emmet harus dapat memperluasnya menggunakan modul Emmet npm saat ini. Kami tidak memerlukan runtime untuk merender karena html tidak pernah dirender di sisi klien. Kami hanya membutuhkan muatan yang ringkas untuk melewati kabel.

Saya ingin membangun situs sampel dan mengonversinya kembali menjadi cuplikan emmet untuk membuat pengetikan presentasi lebih cepat (dan itu proses demo emmet).

Mungkin mungkin menggunakan Hyperscript / JSX dan AST.

Ini memang memiliki banyak potensi.
Suatu hari saya bermain-main dengan kerangka kerja HTML seperti Jade dan HAML dan saya pikir mereka adalah pengganti yang bagus untuk sintaks HTML yang tidak jelas. Tetapi saya tidak dapat memasukkannya untuk proyek saya karena itu hanya membutuhkan instalasi dan konversi tambahan. Saya selalu menggunakan Emmet yang hampir sama baiknya (hanya mendukung sedikit dan tidak memerlukan instalasi).
Tetapi hari ini ketika saya sedang membangun templat situs, saya memutuskan untuk menggunakan lekukan saat menulis di Emmet dan saya menemukan ini:

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

Ini jauh lebih mudah dibaca daripada HTML.
Dan setelah melihatnya, saya pikir, bukankah bagus jika Emmet mendukung indentasi.
Dan setelah itu saya berpikir, bagaimana jika ada alat konversi yang mengubah Emmet menjadi HTML dengan lekukan. Dengan begitu, menulis dan membaca HTML akan jauh lebih menyenangkan.
Maksud saya XML memiliki JSON yang terjadi padanya.
Saatnya HTML untuk melanjutkan ...

Maksud Anda komponen web, hyperscript, JSX dan pug? Yah, imho ini tidak terlalu mudah dibaca.

Emmet sebagian besar digunakan untuk pembuatan prototipe cepat dan penyelesaian perintah / perancah misalnya dalam proyek PhpStorm. Jadi sintaks Emmet biasanya tidak disimpan dalam proyek apa pun, hanya html terakhir.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

HeikoMamerow picture HeikoMamerow  ·  16Komentar

fversepuy picture fversepuy  ·  5Komentar

planetoftheweb picture planetoftheweb  ·  3Komentar

DanielRuf picture DanielRuf  ·  5Komentar

corysimmons picture corysimmons  ·  5Komentar