फ़ाइल को सहेजे बिना Emacs को HTML कैसे रेंडर करना है?

26

यदि आपने कभी JS बिन का उपयोग किया है , तो आप जानते हैं कि जैसे ही आप अपने कोड (HTML, CSS, जावास्क्रिप्ट) को टाइप करते हैं, आपको जो टाइप किया जाता है उसे फिट करने के लिए अपडेट किया जाता है। मैंने पाया है कि यह थोड़ा कोड स्निपेट बनाने के लिए सबसे उपयोगी उपकरणों में से एक है। हालाँकि, मैं चाहूंगा कि यह सुविधा Emacs में लागू हो।

इसलिए, जब मैं अपने Emacs बफ़र्स में कोड टाइप / एडिट करता हूँ, तो वेब पेज मेरे फाइल को सेव करने या पेज को रिफ्रेश करने के बिना एसिंक्रोनसली रीफ्रेश या लोड होगा।

एक साइड नोट के रूप में: मुझे परवाह नहीं है अगर वेब ब्राउज़र w3 की तरह आंतरिक है , या Google क्रोम की तरह बाहरी है ।

html

— ल्यूक
स्रोत

24

HTML दस्तावेज़ों को लाइव-एडिट करने के लिए मेरा पसंदीदा टूल skewer-mode है । यह ब्राउज़र में दस्तावेज़ को बिना ताज़ा किए अपडेट करता है, इसलिए आपको अपने परिवर्तनों पर त्वरित प्रतिक्रिया मिलती है ।

यहां एक डेमो वीडियो है जो इसे कार्रवाई में दिखाता है।

इसमें लाइव-संपादन HTML, CSS और जावास्क्रिप्ट के लिए मोड हैं। यह जावास्क्रिप्ट के लिए सबसे उपयोगी है, क्योंकि यह एक वर्कफ़्लो को बहुत सक्षम बनाता है जैसे Emacs Lisp पर हैकिंग।

Skewer- मोड के लिए कई एक्सटेंशन उपलब्ध हैं, जैसे skewer-less , LESS स्टाइलशीट के संपादन के लिए, और skewer-reload-stylesheets , कई स्टाइलशीट्स में लाइव-एडिटिंग CSS के लिए (प्रकटीकरण: मैंने लिखा है: एक)।

— NateEag
स्रोत

22

अधीर विधा आपको वहां अधिकांश तरीके से मिल जाएगी। यहाँ एक अच्छा वीडियो है ।

पहली स्टाइलिंग और प्रोटोटाइपिंग करते समय यह विशेष रूप से उपयोगी है। चूंकि यह वर्तमान बफ़र को प्रस्तुत करता है, इसलिए आपको अपने सभी html और सीएसएस को एक बफ़र में डालना होगा, कोड और ट्विक करें जब तक आप खुश न हों, तब तक इसे अलग करें।

यहां तक कि जावास्क्रिप्ट को भी उसी तरह से संभाला जा सकता है - लेकिन यह थोड़ा अधिक मुश्किल है, क्योंकि मूल रूप से हर कीस्ट्रोके बफर का प्रतिपादन कर रहा है, आप बहुत सारी त्रुटियों के साथ समाप्त होते हैं और जैसे कि आप कोडिंग कर रहे हैं!

मेरा सुझाव दिया कार्यप्रवाह है

टैग के माध्यम से शामिल सभी गैर-बदलते सामानों के साथ एक एकल HTML पृष्ठ बनाएं
अधीर-विधा शुरू करें, अपना ब्राउज़र खोलें (पृष्ठ पर जाएं)
एक तूफान कोड
अपने खुश रहने के बाद अपने HTML, CSS, JS को अलग करें

ग्राहक विशेष रूप से प्रभावित होते हैं जब आप टाइप कर सकते हैं और अपडेट तुरंत दिखाई देता है, अक्सर एक ही समय में कई ब्राउज़रों में :)

— रयान व्हाइट
स्रोत

2

यह भी देखेंskewer

— जॉर्डन बियोन्डो

5

आप एक मामूली मोड लिख सकते हैं जो आपके द्वारा किसी भी प्रासंगिक बफर को संशोधित करने के बाद प्रदान किए गए वेबपेज को ताज़ा करता है। बेशक, प्रत्येक कीस्ट्रोक के बाद ऐसा करना अधिक कठिन होगा, इसलिए एक टाइमर का उपयोग करना और जब ईमेक को निष्क्रिय करना है तो प्रतिपादन करना

एक त्वरित POC होगी:

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

इस कोड के साथ कई चीजें गलत हैं (विंडो हैंडलिंग उदाहरण के लिए भयानक है, लेकिन यह भी उपयोग कर रहा है shr, जो आपको निश्चित रूप से जावास्क्रिप्ट के साथ मदद करेगा), लेकिन यह विचार देता है। पूर्ण समाधान विकसित करना निश्चित रूप से संभव है, लेकिन यह अपने आप में एक छोटी परियोजना है।

— सिग्मा
स्रोत