WebStorm 2018.3 Help


Markdown is a lightweight markup language for adding formatting elements to plain text. WebStorm provides a dedicated Markdown editor and shows the rendered HTML in a live preview.

The Markdown editor helps you to perform basic editing capabilities: manage headings, apply formatting to text to make it bold or italic, and so on. You can also use completion capabilities to add links to other project documents or images, insert code blocks for various programming languages, and visualize DOT or PlantUML diagrams.


By default, the Markdown editor is split into the code editor and the preview pane. If necessary, you can show only a code editor or preview using the Show editor only or Show preview only buttons.

markdown editor and preview

You can also manage whether the editor and preview pane are split vertically or horizontally. To do this, open the Settings/Preferences dialog (Ctrl+Alt+S), go to the Languages & Frameworks | Markdown page and use the Editor and Preview Panel Layout option.

WebStorm automatically synchronizes the preview with the current caret position in the code editor. You can manage this capability using the Auto-Scroll Preview button (Auto-Scroll Preview).

A useful way to navigate within a markdown document is a Structure view. It displays document headings and allows you to jump to a required paragraph quickly.

Structure tool window

You can choose between the Structure tool window (Alt+7) and File Structure pop-up (Ctrl+F12).


In the Markdown editor, you can apply basic formatting to text. For example, to make the selected text bold, italic or monospaced, use the Toggle bold mode, Toggle italic mode, and Toggle monospaced mode buttons, respectively.

The Markdown editor provides completion for links to files contained in the current project. For example, this can be other markdown documents or images.

Markdown complete a link

If the linked file not found in the project, the Markdown editor throws a warning.

Code blocks

The editor allows you to insert fenced code blocks for different languages by placing triple backticks (```) before and after the code block.

Markdown insert a fenced code block

Code completion, inspection and intention actions are supported for the selected language.

Markdown completion in fenced code blocks

If these capabilities are not required, you can disable code injection for markdown files. To do this, open Settings/Preferences (Ctrl+Alt+S), go to the Languages & Frameworks | Markdown page and use the Disable automatic language injection in code fences option.


WebStorm supports visualizing diagrams in the Markdown preview using the DOT and PlantUML diagramming languages.

PlantUML diagrams in markdown

Note that you need to install the PlantUML framework to render diagrams. To do this, open Settings/Preferences (Ctrl+Alt+S), go to the Languages & Frameworks | Markdown page and click the Install button next to the PlantUML framework isn't installed warning. The framework will be installed to the WebStorm cache.

To visualize a diagram, insert a corresponding code block with the puml or plantuml language. You can copy the code snippets below to see this functionality in action.

```puml A -> B ```
```plantuml digraph Test { A -> B } ```

Custom CSS for preview

The Markdown preview allows you to use custom style sheets to render a document. You can specify a custom stylesheet to make basic presentation changes (for example, increase the font size in a preview) or you can provide an entirely new CSS (for instance, if you want to replicate the GitHub Markdown style).

To provide custom style sheets, open the Settings/Preferences dialog ( Ctrl+Alt+S), go to the Languages and Frameworks | Markdown page and set a path to the required CSS file using the Load from URI option. This path can either be an HTTP/HTTPS URL or an absolute/relative path.

Markdown custom CSS settings

As an alternative, specify CSS directly in the Add CSS rules editor.

Last modified: 9 January 2019

See Also

External Links: