Live Preview

From E

Jump to: navigation, search

Live Web Preview

Live Web Preview

When you are creating webpages, editing HTML and CSS, it can be very useful to get a live preview of the resulting webpage. You can do this by selecting the menu entry 'View/Web Preview' or pressing Ctrl-Alt-P. This will open a second window (that can be docked) which will show you the webpage and update live as you edit.

Notice that the preview is done based on the document you are currently editing (active tab), and not the version of it saved on disk. But if you click any links it will take you to their on disk (or web) versions.

Sometimes you will be working on one page while you really want to see the preview of another one. Like for example if you are editing the CSS file for a webpage, then you usually want to see the preview of the page. This can be done by clicking the pin button on the top bar in the preview. This locks the preview to the active page, so that it stays there even if you go editing another page.

One thing to be aware of is that the preview will no longer be live as the HTML file will reference the on-disk version of the CSS file. But it will update instantly when you save (Ctrl-S).

Piping through Commands

There are many document formats that are not native HTML, but are still supposed to end up as such. Most well known are markup formats like Markdown and Textile, which allow you to write your documents with a much simpler markup and then later transform it into HTML for publishing.

To facilitate previews of such documents, the web preview allows you to pipe it through commands to have it transformed into HTML before being shown. e includes the transformation commands 'markdown.pl' and 'textile.rb', and any command that outputs HTML can be used for the transform.

Actually you are not limited to just transforming markup. The piping command just gets the document on stdin, so anything you can imagine is possible. There are users who have made commands that show a live diff to the last saved version, metrics for specific programming languages, live help and more.

You activate piping by checking 'Options' at the top of the preview pane, entering the name of the command in the text field at the bottom and checking 'Pipe through command'.

Personal tools