Emacsにファイルを保存せずにHTMLをレンダリングさせる方法は?


26

JS Binを使用したことがある場合は、右側のコード(HTML、CSS、Javascript)を入力すると、入力した内容に合わせて更新されることがわかります。これは、小さなコードスニペットを作成するための最も便利なツールの1つであることがわかりました。ただし、同じ機能をEmacsに実装したいと思います。

したがって、Emacsバッファーでコードを入力/編集すると、ファイルを保存したりページを更新したりせずに、Webページが非同期で更新またはロードされます。

副次的な注意事項として、Webブラウザーがw3のような内部にあるか、Google Chromeのような外部にあるかは気にしません。

回答:


24

HTMLドキュメントのライブ編集に適したツールはskewer-modeです。ブラウザのドキュメントを更新せずに更新するため、変更に関するフィードバックがすぐに得られます。

以下に、実際の動作を示すデモビデオを示します。

HTML、CSS、およびJavaScriptをライブ編集するためのモードがあります。Emacs Lispをハッキングするようなワークフローを可能にするため、JavaScriptに最も役立ちます。

skewer-less、LESSスタイルシートの編集用、skewer-reload-stylesheetsなど、複数のスタイルシートでCSSをライブ編集するための、モード用の拡張機能がいくつかあります(開示:私はそれを書きました)。


22

せっかちなモードは、そこにあなたのほとんどの方法を取得します。こちらがクールなビデオです。

最初のスタイリングとプロトタイピングを行うときに特に便利です。現在のバッファをレンダリングするので、すべてのhtmlとcssを1つのバッファに入れ、満足するまでコードと調整を行い、それをすべて分離する必要があります。

Javascriptでも同じように処理できますが、基本的にすべてのキーストロークがバッファをレンダリングしているため、コーディング中に多くのエラーが発生するため、少し注意が必要です。

私の提案するワークフローは

  • 単一のHTMLページを作成し、タグを介してすべての不変のものを含めます
  • せっかちモードを起動し、ブラウザを開いてページにアクセスします
  • 嵐を作り上げる
  • 満足したらHTML、CSS、JSを分離します

クライアントは、特に複数のブラウザで同時に入力して更新をすぐに表示できる場合に特に感銘を受けます:)


2
また参照してくださいskewer
ジョードンビオンド14

5

関連するバッファを変更した後、レンダリングされたWebページを更新するマイナーモードを作成できます。もちろん、各キーストロークの後にそうするのはやりすぎになるので、タイマーを使用して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 を使用するのに最も確実に役立つ)も使用していますが、それはアイデアを与えてくれます。完全なソリューションの開発は確かに可能ですが、それ自体は小さなプロジェクトです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.