Markdown
WebStorm supports Markdown by utilizing the Markdown Support plugin. You can edit Markdown files and see the rendered HTML in a live preview.
The Markdown editor allows you to add code blocks for various programming languages. You can also insert code written in the DOT or PlantUML diagramming languages and visualize the corresponding diagrams in a preview.
By default, the Markdown editor is split into the code editor and the preview pane.
The Structure view displays document headings and allows you to navigate within the document.
If necessary, you can show only a code editor or preview using the or buttons. 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 ().
The , and buttons insert special symbols around the selected text to make it bold, italic or monospaced, respectively (for instance, two asterisks before and after the text to make it bold).
- Adding Links to Project Files
- Creating Code Blocks
- Visualizing Diagrams
- Custom CSS for Markdown Preview
Adding Links to Project Files
The Markdown editor provides completion for links to files contained in the current project.
If the linked file is not found in the project, the Markdown editor throws a warning.
Creating Code Blocks
The editor allows you to insert fenced code blocks for different languages by placing triple backticks (```) before and after the code block.
Code completion, inspection and intention actions are supported for the selected language.
The preview displays a specified code in the following way.
Visualizing Diagrams
WebStorm supports visualizing diagrams in the Markdown preview using the DOT and PlantUML diagramming languages. Note that you need to install the Graphviz library to render most types of diagrams (except, for example, sequence diagrams).
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 Markdown Preview
The Markdown preview allows you to use custom stylesheets to render a document. To provide custom stylesheets, 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 a HTTP/HTTPS URL or an absolute/relative path.
As an alternative, specify CSS directly in the Add CSS rules editor.