PhpStorm 2018.2 Help


PhpStorm 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.

markdown support example

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.

markdown support structure

If necessary, you can show only a code editor or preview using the markdown show editor or markdown show preview buttons. PhpStorm automatically synchronizes the preview with the current caret position in the code editor. You can manage this capability using the Auto-scroll preview button (icons general autoscrollFromSource).

The bold, italic and code 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).

The Markdown editor provides completion for links to files contained in the current project.

markdown support local link

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.

markdown support fenced code language

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

markdown support fenced code completion

The preview displays a specified code in the following way.

markdown support fenced code preview

Visualizing Diagrams

PhpStorm 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.

markdown support diagram

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.

markdown support custom css
Last modified: 21 November 2018

See Also


External Links: