RubyMine 2017.2 Help

HTML

Introduction

RubyMine brings powerful support for HTML that includes syntax and error highlighting, formatting according to the chosen code style, structure validation, code completion, and much more, see Basic Editing Procedures and Advanced Editing Procedures.

Creating an HTML file

On the main menu, choose File | New, and then choose HTML File in the pop-up list. RubyMine creates a stub file and opens it in the editor.

Generating references in an HTML file

RubyMine can generate <script>, <link>, or <img> tags inside <head>.

To generate a tag, select a JavaScript, CSS, or image file in the Project tool window and drag it into the HTML file.

Previewing output of an HTML file in a browser

You can preview a file with Web contents in the RubyMine default browser or in the one of your choice.

To open the page preview in the default browser
Open the file in the editor and choose View | Open in Browser on the main menu.

To open the page preview in a browser of your choice
Open the file in the editor, choose View | Preview file in on the main menu, and select the desired browser from the pop-up menu. Alternatively, hover your mouse pointer over the code to show the browser icons bar, and click the icon that indicates the desired browser:

/help/img/idea/2017.2/browserIcons.png

Viewing HTML source code of a web page in the editor

  1. Choose File | Open URL.
  2. In the Open URL dialog box that opens, type the URL address of the web page or choose a previously opened URL from the list.

Viewing embedded images

RubyMine offers several ways to view images embedded in an HTML file. You can use navigation to source, open an image in an external graphical editor, or preview images on-the-fly.

To view an image in RubyMine, do one of the following

  • Select the image file in the Project tool window, and choose Jump to Source on the context menu of the selection or press F4.
  • In the editor, place the cursor at the reference to the image, and choose Jump to Source on the context menu or press Ctrl+B

To view an image in an external editor

  1. Configure the path to the external editor on the Images page (File | Settings | Editor | Images for Windows and Linux or RubyMine | Preferences | Editor | Images for macOS).
  2. Select the image file in the Project tool window, and choose Open in external editor or press Ctrl+Alt+F4.

Last modified: 26 October 2017

See Also