WebStorm 2017.2 Help



WebStorm makes it possible to work with the Markdown files.

The Markdown files are marked with markdown icon.


Before you start working with Markdown, make sure that Markdown Support plugin is installed and enabled. The plugin is not bundled with WebStorm.

Changes to the UI

With the Markdown Support enabled, the page Markdown appears in the Languages and Frameworks section of the Settings/Preferences dialog.

Note also, that Structure view shows the headings of the various levels:

markdown structure view

Creating a Markdown file

To create a Markdown file, follow these steps

  1. Do one of the following:
    • Choose File | New on the main menu.
    • Right-click the target directory where the new file should be created, and choose New on the context menu.
    • Press Alt+Insert
  2. Choose File.
  3. In the New File dialog box, specify the new file name and extension .md.

The new file <name>.md, marked with markdown icon, is created and opens for editing.

Markdown editor

The editor of a <name>.md file by default shows the following:

markdown editor

Click one of the links to get rid of the banner. It's recommended to choose the link Use JavaFX.

The editor is divided into two panes: the editor itself and the preview. Each of the panes can be hidden.

Editor pane

boldToggle bold modeInserts two asterisks before and after the selected text to render bold font.
italicToggle italic modeInserts underscores before and after the selected text to render italic font.
codeToggle monospaced (code span) modeInserts single apostrophes before and after the selected text to render monospaced font.


markdown show editorShow editor onlyShows editor only with Markdown syntax.
markdown show editor and previewShow editor and previewShows editor with Markdown syntax and the corresponding preview. The results of editing are immediately reflected in the preview pane.
markdown show previewShow preview onlyShows preview that renders the Markdown syntax. Editing is not possible, and the buttons bold, italic and code are disabled.
autoscrollFromSourceAuto-scroll previewPress this button if you want to automatically scroll from the source code in the editor to the respective location in the preview.
Last modified: 29 November 2017

See Also