Live Preview

The Live Preview window appears next to your source code. While you type your code, Live Preview shows what your source code will look like on a basic web page.

Atom must be installed on your computer before you can set up additional features.

A text editor that offers a live preview window saves you time and frustration. One of the main challenges for beginning code writers is not knowing how the code you have written will look on a web page. A “live” preview window renders your code while you write, which is why live preview is an essential tool for the beginning code writer.

_images/livepreview_rev.png

How to set up and use live preview for HTML, Markdown, and RST:

  1. Open Atom.
  2. Open Settings by clicking on the appropriate path for your operating system.
    • Mac: Atom > Preferences
    • Windows: File > Settings
  3. On the left menu, click Install.
  4. In the Search Packages box, type the package name you want to install from the table below.
  1. Click Install. After the preview package has installed, you can open a file and open (enable) the preview window. Continue to the next step to open the preview window or install additional packages by repeating the previous steps starting from Step 1.
  2. Open a file saved in the same source code language as the preview package you installed. For example, if you installed atom-html-preview, then open a file already saved in .htm or .html or open a new file and save it as an .htm or .html file.
  3. Open the preview window using drop-down menu or hotkey commands from the table below.
Preview Pane Toggle Commands
Language Drop-Down Menu HotKey Command
HTML Packages < Preview HTML < Enable Preview Control + Shift + H
Markdown Packages < Markdown Preview < Toggle Preview Control + Shift + M
RST Packages < reStructuredText < Toggle Preview Control + Shift + R

Preview now appears in a new window on the right side of your screen with your original source code file on the left.

Tip

  • After the preview window opens, your code file window narrows and the code does not automatically wrap. To enable text wrapping: From the top menu, click View > Toggle Soft Wrap.
  • The Markdown preview window background color can be white or black. This is a toggle command. The white background is “GitHub Style.” To change the background color, click Packages > Markdown Preview > Toggle GitHub Style.

Important

  • You must enable the preview window every time you open your file.
  • You can open or close the preview window anytime using the toggle commands.
  • Hotkey and drop-down menu commands are interchangeable; you can use one method to open the preview pane and the other method to close it. For example, you can open preview using a hotkey command and close it using a drop-down menu, and vice versa.