Làm cách nào để tạo Emacs kết xuất HTML mà không phải lưu tệp?

Nếu bạn đã từng sử dụng JS Bin , bạn sẽ biết rằng khi bạn nhập mã của mình (HTML, CSS, Javascript) ở bên phải sẽ được cập nhật để phù hợp với những gì bạn đã nhập. Tôi đã thấy đây là một trong những công cụ hữu ích nhất để tạo các đoạn mã nhỏ. Tuy nhiên, tôi muốn tính năng tương tự được triển khai vào Emacs.

Vì vậy, khi tôi nhập / chỉnh sửa mã trong bộ đệm Emacs của mình, trang web sẽ làm mới hoặc tải không đồng bộ mà tôi không phải lưu tệp hoặc làm mới trang.

Một lưu ý phụ: Tôi không quan tâm nếu trình duyệt web là nội bộ như w3 hoặc bên ngoài như Google Chrome .

Công cụ ưa thích của tôi cho các tài liệu HTML chỉnh sửa trực tiếp là chế độ xiên . Nó cập nhật tài liệu trong trình duyệt mà không cần làm mới, do đó bạn nhận được phản hồi tức thì về những thay đổi của mình.

Đây là một video demo cho thấy nó hoạt động.

Nó có các chế độ để chỉnh sửa trực tiếp HTML, CSS và JavaScript. Nó hữu ích nhất cho JavaScript, vì nó cho phép một quy trình công việc giống như hack trên Emacs Lisp.

Có một số tiện ích mở rộng có sẵn cho chế độ xiên, như không có xiên , để chỉnh sửa biểu định kiểu LESS và bảng định kiểu xiên-tải lại , cho CSS chỉnh sửa trực tiếp trong nhiều biểu định kiểu (tiết lộ: Tôi đã viết cái đó).

Chế độ thiếu kiên nhẫn sẽ giúp bạn có được hầu hết các cách đó. Đây là một video tuyệt vời .

Nó đặc biệt tiện dụng khi thực hiện kiểu dáng và tạo mẫu đầu tiên. Vì nó kết xuất bộ đệm hiện tại, bạn sẽ phải đặt tất cả html và css của mình vào một bộ đệm, mã và chỉnh cho đến khi bạn hài lòng, sau đó tách tất cả ra.

Ngay cả Javascript cũng có thể được xử lý theo cùng một cách - nhưng khó hơn một chút, vì về cơ bản mọi tổ hợp phím đều hiển thị bộ đệm, bạn sẽ gặp rất nhiều lỗi và trong khi bạn đang mã hóa!

Quy trình làm việc được đề xuất của tôi là

• Tạo một trang HTML duy nhất, với tất cả nội dung không thay đổi được bao gồm thông qua các thẻ
• Khởi động chế độ thiếu kiên nhẫn, mở (các) trình duyệt của bạn và truy cập trang
• Mã hóa một cơn bão
• Tách HTML, CSS, JS của bạn một khi bạn hài lòng

Khách hàng đặc biệt ấn tượng khi bạn có thể nhập và hiển thị cập nhật ngay lập tức, thường trong một số trình duyệt cùng một lúc :)

Bạn có thể viết một chế độ nhỏ làm mới trang web được hiển thị sau khi bạn sửa đổi bất kỳ bộ đệm có liên quan. Tất nhiên, làm như vậy sau mỗi lần nhấn phím sẽ là quá mức cần thiết, vì vậy sử dụng bộ hẹn giờ và kết xuất khi emacs không hoạt động

Một POC nhanh chóng sẽ là:

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

Rất nhiều điều sai với mã này (ví dụ xử lý cửa sổ rất tệ, nhưng nó cũng đang sử dụng shr, điều này chắc chắn sẽ giúp bạn với javascript), nhưng nó mang lại ý tưởng. Phát triển một giải pháp đầy đủ là điều chắc chắn có thể, nhưng bản thân nó chỉ là một dự án nhỏ.