PyCharm 2018.1 Help

Markdown Support

PyCharm supports Markdown by utilizing the Markdown Support plugin. You can edit Markdown files and see the rendered HTML in a live preview.

markdown support example

The Markdown editor allows you to add code blocks for various programming languages. You can also insert a code written in the DOT or PlantUML diagramming languages and visualize corresponding diagrams in a preview.

Markdown Editor Overview

By default, the Markdown editor displays a code editor and preview side-by-side.

markdown support example

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. PyCharm automatically synchronizes the preview with the current caret position in the code editor. You can manage this capability using the Auto-scroll preview button (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

PyCharm 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 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, go to 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: 19 April 2018

See Also


External Links: