Markup Languages and Style Sheets

In this section:

• Markup Languages and Style Sheets
  • Markup and template languages support
  • Parsing Web contents
• Changing Color Values in Style Sheets
• CSS-Specific Refactorings
• Editing HTML Files
• Emmet Support
• Generating DTD
• Generating Instance Document from XML Schema
• Generating XML Schema from Instance Document
• Live Editing of HTML, CSS, and JavaScript
• Minifying CSS
• Referencing XML Schemas and DTDs
• Transpiling Sass, Less, and SCSS to CSS
• Using Handlebars and Mustache Templates
• Using JetBrains Chrome Extension
• Validating Web Content Files
• Viewing Actual HTML DOM
• Viewing Pages with Web Contents
• Viewing Images
• Viewing Styles Applied to a Tag
• Working with Sass and SCSS in Compass Projects
• XML-Java Binding

Markup and template languages support

IntelliJ IDEA supports editing of files in the following markup and template languages:

• XML
• HTML/XHTML
• JSP/JSPX
• CSS
• Sass, SCSS
• Slim
• Less
• YAML
• Stylus
• Compass
• Handlebars expressions and Mustache templates

The markup languages and style sheets are integrated into IntelliJ IDEA and can use the most powerful editing features:

• Validation and syntax highlighting.
• Code completion (⌃Space or ⌃Space⌃Space or ⌃Space⌃Space or ⌃Space^ Space, ⌃Space or ⌃Space⌥ Slash, ⌥/ or ⌥/).
• Indentation (⌃⌥I or ⌃⌥I⌥⌘I or ⌥⌘I⌘I or ⌘I^ ⌥ I, ⌃⌥I or ⌃⌥I^ ⌥ I, ^ ⌥ Q, ⌃⌥I, ⌃⌥Q, ⌃⌥I or ⌃⌥Q, ⌥⌘L or ⌥⌘L⌥⌘L or ⌥⌘L⇧⌘F or ⇧⌘F⌥ F8, ^ ⌥ F, ⌥F8, ⌃⌥F, ⌥F8 or ⌃⌥F).
• Formatting (⌥⌘L or ⌥⌘L⌥⌘L or ⌥⌘L⇧⌘F or ⇧⌘F⌥ F8, ^ ⌥ F, ⌥F8, ⌃⌥F, ⌥F8 or ⌃⌥F) according to the code style.
• Intention actions (⌥⏎ or ⌥⏎⌥⏎ or ⌥⏎⌘1 or ⌘1⌥ Enter, ⌥⏎ or ⌥⏎⌥ Enter, ⌥⏎ or ⌥⏎).
• Viewing code structure (⌘7 or ⌘7⌘7 or ⌘7⌘7 or ⌘7⌥ 7, ⌥7 or ⌥7⌥ 7, ⌥7 or ⌥7).
• Navigation in the source code (⌘B, ⌘Button1 Click, Button2 Click, ⌘B, ⌘Button1 Click or Button2 Click⌘B, ⌘Button1 Click, Button2 Click, ⌘B, ⌘Button1 Click or Button2 ClickF3, ⌃Button1 Click, F3 or ⌃Button1 ClickF12, ⇧ F2, ^ B, ^ Button1 Click, Button2 Click, F12, ⇧F2, ⌃B, ⌃Button1 Click, Button2 Click, F12, ⇧F2, ⌃B, ⌃Button1 Click or Button2 Click^ ⌥ G, Escape, Period, ⌥ Period, ^ Button1 Click, ⌃⌥G, ⎋, ., ⌥., ⌃Button1 Click, ⌃⌥G, ⎋, ., ⌥. or ⌃Button1 Click).
• Integrated documentation (F1, ⌃J, ⌃Button2 Click, F1, ⌃J or ⌃Button2 Click⌃J, ⌃Button2 Click, ⌃J or ⌃Button2 Click⌥Button2 Click, F2, ⌥Button2 Click or F2^ Q, ⌃Q or ⌃Q^ Q, ⌥ Button2 Click, ⌃Q, ⌥Button2 Click, ⌃Q or ⌥Button2 Click).
• Search for usages (⌥F7 or ⌥F7⌥F7 or ⌥F7⇧⌘G or ⇧⌘G⇧ ⌥ F7, ⌥⇧F7 or ⌥⇧F7⌥ F7, ⇧ ⌥ S, ⌥F7, ⌥⇧S, ⌥F7 or ⌥⇧S).
• Commenting and uncommenting lines (⌘/, ⌘NumPad /, ⌘/ or ⌘NumPad /⌘/, ⌘NumPad /, ⌘/ or ⌘NumPad /⌘/, ⌘NumPad /, ⌘/ or ⌘NumPad /^ Slash, ^ NumPad /, ^ Colon, ⌃/, ⌃NumPad /, ⌃:, ⌃/, ⌃NumPad / or ⌃:⌥ Semicolon, ⌥; or ⌥;, ⌥⌘/, ⌥⌘NumPad /, ⌃⇧/, ⌃⇧NumPad /, ⇧⌘/, ⇧⌘NumPad /, ⌥⌘/, ⌥⌘NumPad /, ⌃⇧/, ⌃⇧NumPad /, ⇧⌘/ or ⇧⌘NumPad /⌃⇧/, ⌃⇧NumPad /, ⇧⌘/, ⇧⌘NumPad /, ⌃⇧/, ⌃⇧NumPad /, ⇧⌘/ or ⇧⌘NumPad /⌃⇧/ or ⌃⇧/^ ⇧ Slash, ^ ⇧ NumPad /, ^ ⇧ Colon, ⌃⇧/, ⌃⇧NumPad /, ⌃⇧:, ⌃⇧/, ⌃⇧NumPad / or ⌃⇧:^ ⇧ Slash, ^ ⇧ NumPad /, ⌃⇧/, ⌃⇧NumPad /, ⌃⇧/ or ⌃⇧NumPad /).
• Unwrapping and removing tags (⇧⌘⌦ or ⇧⌘⌦⇧⌘⌦ or ⇧⌘⌦^ ⇧ Delete, ⌃⇧⌦ or ⌃⇧⌦^ ⇧ Delete, ⌃⇧⌦ or ⌃⇧⌦).

All these features work if IntelliJ IDEA successfully locates the DTD or schema file. In this case, all the files are validated against the DTD or schema, and the editing conveniences become available. Without a DTD or schema, only the well-formedness check is possible.

These features for web contents work same way as for the other source files. Refer to the respective topics of the Advanced Editing Features part for the detailed descriptions of procedures, and to Keyboard shortcuts .

Parsing Web contents

IntelliJ IDEA parses Web contents files according to the following specifications:

• HTML: specification is configurable in the Default HTML language level in the Schemas and DTDs page of the Settings/Preferences dialog. By default, specification HTML 5.0 from W3C is assumed.
• CSS: specification CSS 3.0. The most common selectors are supported: universal selector *, type selectors .a, descendant selectors .a.b, child selectors .a .b, ID selectors #b, pseudo-classes and class selectors DIV.warning.
• IntelliJ IDEA uses Xerces 2.11, an XML parser developed by Apache Software Foundation Group.