วิธีทำให้ Emacs แสดงผล HTML โดยไม่ต้องบันทึกไฟล์

26

หากคุณเคยใช้JS Binคุณจะรู้ว่าเมื่อคุณพิมพ์รหัส (HTML, CSS, Javascript) ทางด้านขวาจะได้รับการอัปเดตเพื่อให้เหมาะกับสิ่งที่คุณพิมพ์ ฉันพบว่านี่เป็นหนึ่งในเครื่องมือที่มีประโยชน์ที่สุดสำหรับการสร้างโค้ดขนาดเล็ก อย่างไรก็ตามฉันต้องการคุณสมบัติเดียวกันที่จะนำไปใช้กับ Emacs

ดังนั้นเมื่อฉันพิมพ์ / แก้ไขรหัสในบัฟเฟอร์ Emac ของฉันหน้าเว็บจะรีเฟรชหรือโหลดแบบอะซิงโครนัสโดยไม่ต้องบันทึกไฟล์หรือรีเฟรชหน้า

ขณะที่ทราบด้าน: ฉันไม่ดูแลถ้าเว็บเบราเซอร์เป็นเหมือนภายในw3หรือภายนอกเช่นGoogle Chrome

html

— ลุค
แหล่งที่มา

24

เครื่องมือที่ต้องการของฉันสำหรับเอกสาร HTML แก้ไขสดเสียบโหมด มันอัปเดตเอกสารในเบราว์เซอร์โดยไม่ต้องรีเฟรชดังนั้นคุณจะได้รับข้อเสนอแนะทันทีในการเปลี่ยนแปลงของคุณ

นี่คือวิดีโอตัวอย่างที่แสดงให้เห็นว่ามีการใช้งานจริง

มันมีโหมดสำหรับการแก้ไขสด HTML, CSS และ JavaScript มันมีประโยชน์มากที่สุดสำหรับ JavaScript เนื่องจากช่วยให้เวิร์กโฟลว์มีจำนวนมากเช่นการแฮ็คใน Emacs Lisp

มีหลายส่วนขยายสำหรับโหมดskewerเช่นskewer-lessสำหรับการแก้ไข LESS stylesheets และskewer-reload-stylesheetsสำหรับ CSS การแก้ไขสดในหลายสไตล์ชีต (การเปิดเผย: ฉันเขียนไว้)

— NateEag
แหล่งที่มา

22

โหมดความอดทนจะทำให้คุณได้รับประโยชน์มากที่สุด นี่เป็นวิดีโอเย็น

มันมีประโยชน์อย่างยิ่งเมื่อทำการออกแบบและสร้างต้นแบบครั้งแรก เนื่องจากมันแสดงบัฟเฟอร์ปัจจุบันคุณจะต้องใส่ html และ css ทั้งหมดของคุณไว้ในบัฟเฟอร์เดียวโค้ดและปรับแต่งจนกว่าคุณจะมีความสุขจากนั้นแยกมันออกทั้งหมด

แม้กระทั่งจาวาสคริปต์ก็สามารถจัดการได้ในลักษณะเดียวกัน - แต่มันก็ค่อนข้างยุ่งยากกว่าเดิมเนื่องจากการกดแป้นพิมพ์ทุกครั้งนั้นทำให้บัฟเฟอร์คุณจบลงด้วยข้อผิดพลาดมากมายและในขณะที่คุณกำลังเข้ารหัส!

เวิร์กโฟลว์ที่แนะนำของฉันคือ

สร้างหน้า HTML หน้าเดียวพร้อมสิ่งที่ไม่เปลี่ยนแปลงรวมอยู่ในแท็ก
เริ่มโหมดความอดทนเปิดเบราว์เซอร์ของคุณแล้วไปที่หน้า
เขียนโค้ดเกี่ยวกับพายุ
แยก HTML, CSS, JS ของคุณเมื่อคุณพอใจ

ลูกค้าประทับใจเป็นอย่างยิ่งเมื่อคุณสามารถพิมพ์และอัปเดตการมองเห็นได้ทันทีโดยบ่อยครั้งในเบราว์เซอร์หลายตัวในเวลาเดียวกัน :)

— ไรอันไวต์
แหล่งที่มา

2

ดูเพิ่มเติมskewer

— Jordon Biondo

5

คุณสามารถเขียนโหมดย่อยที่รีเฟรชเว็บเพจที่แสดงผลหลังจากที่คุณแก้ไขบัฟเฟอร์ที่เกี่ยวข้อง แน่นอนว่าการทำเช่นนั้นหลังจากการกดแป้นแต่ละครั้งจะมากเกินไปดังนั้นการใช้ตัวจับเวลาและการเรนเดอร์เมื่อ emacs ไม่ทำงาน

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ด้วยซึ่งจะช่วยให้คุณใช้จาวาสคริปต์ได้อย่างแน่นอน) แต่มันก็ให้ความคิด การพัฒนาโซลูชันอย่างเต็มรูปแบบนั้นเป็นไปได้อย่างแน่นอน แต่เป็นโครงการขนาดเล็กด้วยตัวเอง

— ซิกม่า
แหล่งที่มา