PhpStorm 2016.3 Help

Appearance

File | Settings | Editor | General | Appearance for Windows and Linux
PhpStorm | Preferences | Editor | General | Appearance for OS X
Ctrl+Alt+S
/help/img/idea/2016.3/settings.png


Use this page to customize the appearance of the Editor.

ItemDescription
Caret blinking (ms)Select this check box to make the caret blink with the specified period (in milliseconds).
Use block caretSelect this check box to have the block caret applied in the Insert mode and the usual caret applied in the Overwrite mode.
Clear this check box to have the usual caret applied in the Insert mode and the block caret applied in the Overwrite mode.
Show right margin (configured in Code Style options)Select this check box to have a thin vertical line at the right margin of the editor displayed. Refer to the description of the Code Style settings.
Show line numbersSelect this check box to have line numbering shown in the left gutter area.
Show method separators Select this check box to have thin lines displayed in PHP and JavaScript classes to separate functions from field declarations.
Show whitespacesSelect this check box to have PhpStorm display white spaces or tabs (depending on the Code Style settings).
You can select the following options:
  • Leader - select this check box to add white spaces before your code line.
  • Inner - select this check box to display white spaces inside the line of your code.
  • Trailing - select this check box to display white spaces after the code line.
Show vertical indent guidesSelect this check box to have PhpStorm display vertical lines in the editor to indicate positions of indents and thus facilitate typing, manual formatting, reading, and maintaining code.
Show code lens on scrollbar hoverSelect this check box to enable lens mode.
Show breadcrumbs
Select this check box to show a breadcrumb trail on top of the editor tab for an HTML or an XML file. Reopen the editor for the changes to take effect.
/help/img/idea/2016.3/breadcrumbs_xml.png
(XML)
breadcrumbs.png
(HTML)
Show CSS color preview icon in gutterSelect this check box to show color preview icons for the color values.

See Changing Color Values in Style Sheets.

colorPreview.png

If this check box is not selected, it is still possible to invoke the color picker and change color values, by choosing the Change color intention action.

/help/img/idea/2016.3/no_icon_change_color.png
Show CSS color preview as backgroundIf this check box is selected, the background of the color value shows the color preview:
/help/img/idea/2016.3/color_preview_background.png
Enable XML/HTML tag tree highlightingSelect this check box to show the hierarchy of tags highlighted with different colors. If this option is enabled, you can define the following options:
  • Levels to highlight: specify the depth of hierarchy to be highlighted.
  • Opacity: specify brightness of highlighting
/help/img/idea/2016.3/tags_highlighting.png

Highlighting is activated when there is more than one tag with the same name in the hierarchy.

See Also

Last modified: 1 December 2016