AppCode 2020.3 Help

Markdown

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

Create a new Markdown file

By default, AppCode recognizes any file with the .md or .markdown extension as a Markdown file.

  1. Right-click a directory in the Project tool window ⌥1 and select New | File.

    Alternatively, you can select the necessary directory, press ⌘N , and then select File.

  2. Enter a name for your file with a recognized extension, for example: readme.md.

The Markdown editor provides several basic formatting actions in the toolbar:

  • Bold: Bold

  • Strikethrough: Strikethrough

  • Italic: Italic

  • Code: Code

  • Decrease header level: Decrease heading level

  • Increase header level: Increase heading level

  • Introduce reference: Convert an inline link to a reference link

You can use the preview pane to see the rendered HTML.

Markdown editor

There is also completion for links to files in the current project, for example, if you need to reference source code, images, or other Markdown files.

Code blocks

To insert a fenced code block, use triple backticks (```) before and after the code block. If you specify the language for the code block, by default, the Markdown editor injects the corresponding language. This enables syntax highlighting and other coding assistance features for the specified language: code completion, inspections, and intention actions.

Insert a fenced code block in Markdown

Disable coding assistance in code blocks

If your code blocks are not meant to be syntactically correct, you may want to disable code injection and syntax errors in code blocks.

  1. In the Preferences dialog ⌃⌥S , select Languages \& Frameworks | Markdown.

  2. Configure the following options:

    Disable automatic language injection in code fences Do not inject any coding assistance for code blocks.
    Hide errors in code fences Do not check the syntax for errors.
  3. Click OK to apply the changes.

Diagrams

The Markdown editor can render diagrams defined with Mermaid and PlantUML. This is disabled by default and requires the corresponding Markdown extensions.

Mermaid diagram in Markdown

Enable diagram support

  1. In the Preferences dialog ⌃⌥S , select Languages \& Frameworks | Markdown.

  2. Enable either Mermaid or PlantUML under Markdown Extensions.

  3. After AppCode downloads the relevant extensions, click OK to apply the changes.

HTML preview

By default, the Markdown editor shows a preview pane next to it for rendered HTML code based on the Markdown file. You can use The Show Editor Only button or The Show Preview Only button in the top right corner of the Markdown editor to show only the editor or the preview pane.

The scrollbars in the editor and in the preview pane are synchronized, meaning that the location in the preview pane corresponds to the location in the source. To disable this, click The Auto-Scroll Preview button in the top right corner of the Markdown editor.

To split the editor and preview pane horizontally (top and bottom) instead of the default vertical split, in the Preferences dialog ⌃⌥S , select Languages \& Frameworks | Markdown, and then select Split horizontally under Editor and Preview Panel Layout.

Markdown editor and live preview pane split horizontally

Custom CSS

AppCode provides default style sheets for rendering HTML in the preview pane. These style sheets were designed to be consistent with the default UI themes. You can configure specific CSS rules to make small presentation changes (for example, change the font size for headings or line spacing in lists) or you can provide an entirely new CSS to better match your expected output (for example, if you want to replicate the GitHub Markdown style).

Markdown preview with a custom CSS that resembles GitHub rendering style
  1. In the Preferences dialog ⌃⌥S , select Languages \& Frameworks | Markdown.

  2. Configure the settings under Custom CSS:

    • Select Load from URI to specify the location of a custom CSS file.

    • Select Add CSS rules rules to enter specific CSS rules that you want to override.

Productivity tips

Customize the Markdown code style

  1. In the Preferences dialog ⌃⌥S , select Editor | Code Style | Markdown.

  2. Select the color scheme, accept the highlighting settings inherited from defaults, or customize them as described in Configuring colors and fonts.

Last modified: 29 December 2020