Emacs, dosyayı kaydetmek zorunda kalmadan HTML'yi nasıl işler hale getirir?

JS Bin'i daha önce kullandıysanız , sağdaki kodunuzu (HTML, CSS, Javascript) yazdığınızda yazdığınıza uyacak şekilde güncellendiğinizi biliyorsunuzdur. Bunu küçük kod parçacıkları yapmak için en kullanışlı araçlardan biri olarak buldum. Ancak, aynı özelliğin Emacs'a da uygulanmasını istiyorum.

Bu nedenle, Emacs arabelleğime kod yazdığımda / düzenlediğimde, web sayfam dosyayı kaydetmeden veya sayfayı yenilemeden eşzamansız olarak yenileyecek veya yükleyecektir.

Yan not olarak: Web tarayıcısının w3 gibi dahili veya Google Chrome gibi harici olması umrumda değil .

Canlı düzenleme HTML belgelerini tercih ettiğim araç şiş modudur . Tarayıcıdaki belgeyi yenilemeden günceller, böylece değişiklikleriniz hakkında anında geri bildirim alırsınız .

İşte eylemi gösteren bir demo videosu .

Canlı düzenleme HTML, CSS ve JavaScript modlarına sahiptir. Emacs Lisp'i hacklemek gibi bir iş akışını mümkün kıldığı için JavaScript için çok kullanışlıdır.

Gibi şiş-mod için çeşitli uzantıları vardır şiş-az , AZ stil ve düzenleme için şiş-yeniden-stil (: onu ben yazdım açıklama) çoklu stil canlı-düzenleme CSS.

Sabırsız Modu size en çok oraya ulaşacaktır. İşte harika bir video .

İlk stil ve prototipleme yaparken özellikle kullanışlıdır. Geçerli tamponu oluşturduğundan, tüm html ve css'lerinizi bir tamponun içine koymanız, kodunu yazmanız ve mutlu olana kadar ince ayar yapmanız gerekir.

Javascript bile aynı şekilde ele alınabilir - ancak biraz daha zordur, çünkü temelde her tuş vuruşu arabellek oluşturuyor, kodlama yaparken çok fazla hatayla karşılaşıyorsunuz!

Önerilen iş akışım

• Etiketlerin içerdiği değişmeyen tüm öğelerin bulunduğu tek bir HTML sayfası oluşturun
• Sabırsız modu başlat, tarayıcılarını aç ve sayfaya git
• Bir fırtına kodla
• Memnun kaldığınızda HTML, CSS, JS'nizi ayırın

Müşteriler özellikle güncellemeyi hemen, çoğu kez aynı anda birkaç tarayıcıda görülebilir hale getirebiliyorsanız ve etkilediklerinde etkilenirler :)

İlgili bir arabellek değiştirdikten sonra, işlenen web sayfasını yenileyen küçük bir mod yazabilirsiniz. Tabii ki, her tuş basışından sonra bunu yapmak çok fazla zaman kaybetmez, emacs rölantide iken bir zamanlayıcı ve render kullanmak

Hızlı bir POC şöyle olacaktır:

(defvar my-html-render-delay 1)

(defun my-html-render-post-command-hook ()
  (run-with-idle-timer my-html-render-delay nil
                       (lambda (buffer) 
                         (shr-render-buffer buffer)
                         (select-window (get-buffer-window buffer))) 
                       (current-buffer)))

(defun my-html-render-install ()
  (interactive)
  (add-hook 'post-command-hook 'my-html-render-post-command-hook nil t))

Bu kodla ilgili birçok şey yanlıştır (pencere kullanımı örneğin korkunçtur, ancak aynı zamanda shrjavascript ile kesinlikle size yardımcı olacak olanı kullanıyor ), ancak bu fikir verir. Tam bir çözüm geliştirmek kesinlikle mümkün, ancak tek başına küçük bir proje.