Как заставить Emacs отображать HTML без сохранения файла?

Если вы когда-либо использовали JS Bin , вы знаете, что при вводе код (HTML, CSS, Javascript) справа обновляется, чтобы соответствовать введенному вами. Я обнаружил, что это один из самых полезных инструментов для создания небольших фрагментов кода. Тем не менее, я бы хотел, чтобы эта функция была реализована в Emacs.

Поэтому, когда я набираю / редактирую код в моих буферах Emacs, веб-страница будет обновляться или загружаться асинхронно без необходимости сохранять файл или обновлять страницу.

В качестве примечания: мне все равно, является ли веб-браузер внутренним, например, w3 , или внешним, например, Google Chrome .

Мой предпочтительный инструмент для редактирования в реальном времени документов HTML - это режим шампуров . Он обновляет документ в браузере без обновления, поэтому вы мгновенно получаете отзывы о ваших изменениях.

Вот демонстрационное видео, которое показывает это в действии.

Он имеет режимы для редактирования в реальном времени HTML, CSS и JavaScript. Это наиболее полезно для JavaScript, так как он включает рабочий процесс, очень похожий на взлом Emacs Lisp.

Для режима skewer-mode доступно несколько расширений, таких как skewer-less , для редактирования таблиц стилей LESS и skewer-reload-stylesheets , для живого редактирования CSS в нескольких таблицах стилей (раскрытие: я написал это).

Нетерпеливый режим поможет вам в этом. Вот классное видео .

Это особенно удобно при выполнении первого моделирования и прототипирования. Поскольку он рендерит текущий буфер, вам придется поместить все ваши html и css в один буфер, кодировать и настраивать до тех пор, пока вы не будете довольны, а затем отделить все это.

Даже Javascript может быть обработан таким же образом - но это немного сложнее, так как в основном каждое нажатие клавиши создает буфер, в результате вы получаете множество ошибок и тому подобное, пока вы кодируете!

Мой предложенный рабочий процесс

• Создайте одну HTML-страницу со всеми неизменяемыми материалами, включенными через теги
• Запустите режим с нетерпением, откройте браузер (ы) и перейдите на страницу
• Код до шторма
• Разделите ваш HTML, CSS, JS, как только вы будете счастливы

Клиенты особенно впечатлены, когда вы можете напечатать и сразу увидеть обновление, часто в нескольких браузерах одновременно :)

Вы можете написать второстепенный режим, который обновляет отображаемую веб-страницу после изменения любого соответствующего буфера. Конечно, делать это после каждого нажатия клавиши было бы излишним, поэтому использование таймера и рендеринга, когда 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, что, безусловно, поможет вам с javascript), но это дает идею. Разумеется, разработка полного решения возможна, но сам по себе это небольшой проект.