Bagaimana cara membuat Emacs membuat HTML tanpa harus menyimpan file?

Jika Anda pernah menggunakan JS Bin , Anda tahu bahwa saat Anda mengetik kode (HTML, CSS, Javascript) di sebelah kanan diperbarui agar sesuai dengan apa yang Anda ketikkan. Saya menemukan ini sebagai salah satu alat paling berguna untuk membuat cuplikan kode kecil. Namun, saya ingin fitur yang sama diimplementasikan ke Emacs.

Jadi, ketika saya mengetik / mengedit kode di buffer Emacs saya, halaman web akan menyegarkan atau memuat secara tidak sinkron tanpa saya harus menyimpan file atau menyegarkan halaman.

Sebagai catatan: Saya tidak peduli apakah browser web internal seperti w3 , atau eksternal seperti Google Chrome .

Alat pilihan saya untuk mengedit dokumen HTML adalah mode tusuk sate . Ini memperbarui dokumen di browser tanpa penyegaran, sehingga Anda mendapatkan umpan balik instan tentang perubahan Anda.

Berikut adalah video demo yang menunjukkannya dalam aksi.

Ini memiliki mode untuk live-editing HTML, CSS, dan JavaScript. Ini paling berguna untuk JavaScript, karena memungkinkan alur kerja seperti peretasan pada Emacs Lisp.

Ada beberapa ekstensi yang tersedia untuk mode tusuk sate, seperti kurang tusuk sate , untuk mengedit LESS stylesheets, dan skewer-reload-stylesheets , untuk mengedit CSS langsung dalam beberapa stylesheet (pengungkapan: Saya menulis satu).

Mode tidak sabar akan membuat Anda mendapatkan sebagian besar perjalanan ke sana. Ini video keren .

Ini sangat berguna saat melakukan penataan dan prototipe pertama. Karena itu membuat buffer saat ini, Anda harus meletakkan semua html dan css Anda dalam satu buffer, kode dan tweak sampai Anda bahagia, lalu pisahkan semuanya.

Bahkan Javascript dapat ditangani dengan cara yang sama - tetapi sedikit lebih rumit, karena pada dasarnya setiap keystroke membuat buffer, Anda berakhir dengan banyak kesalahan dan seperti itu saat Anda sedang coding!

Alur kerja saya yang disarankan adalah

• Buat satu halaman HTML, dengan semua hal yang tidak berubah disertakan melalui tag
• Mulai mode tidak sabar, buka browser Anda dan buka halaman
• Kode badai
• Pisahkan HTML, CSS, JS Anda setelah Anda senang

Klien sangat terkesan ketika Anda dapat mengetik dan memperbarui segera, seringkali di beberapa browser sekaligus :)

Anda bisa menulis mode minor yang menyegarkan halaman web yang diberikan setelah Anda memodifikasi buffer yang relevan. Tentu saja, melakukannya setelah setiap penekanan tombol akan berlebihan, jadi gunakan timer dan rendering ketika emacs idle

POC cepat adalah:

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

Banyak hal yang salah dengan kode ini (penanganan jendela misalnya mengerikan, tetapi juga menggunakan shr, yang pasti akan membantu Anda dengan javascript), tetapi memberikan gagasan. Mengembangkan solusi lengkap memang mungkin, tetapi itu adalah proyek kecil dengan sendirinya.