SnipperAppSnipperApp 3

Markdown Preview

Side-by-side GitHub Flavored Markdown preview.

Markdown Preview

SnipperApp 3 includes a built-in Markdown renderer with full GitHub Flavored Markdown (GFM) support. When a snippet's language is set to Markdown, you get a live preview alongside your editor.

Preview Modes

The Markdown preview offers three display modes, accessible via the preview toggle in the editor toolbar:

Edit Only

The default mode. The full editor width is dedicated to writing Markdown source. No preview is shown. This is useful when you are focused on drafting content and do not need visual feedback.

Full Preview

The editor is hidden and the entire area displays the rendered Markdown output. Use this mode to review your final document without the distraction of raw markup.

Side-by-Side

The editor and preview are displayed next to each other. As you type in the editor on the left, the preview on the right updates in real time. This is the most productive mode for writing Markdown, as you can see the rendered result immediately.

A resizable divider separates the editor and preview panes. Drag the divider left or right to adjust the proportions to your preference. SnipperApp remembers your divider position across sessions.

GitHub Flavored Markdown Support

The preview renderer supports the full GFM specification, including:

Basic Formatting

  • Bold, italic, strikethrough, and inline code
  • Headings (H1 through H6)
  • Ordered and unordered lists
  • Nested lists
  • Blockquotes

Links and Images

  • Inline links and reference links
  • Images with alt text
  • Autolinked URLs

Code Blocks

Fenced code blocks with language-specific syntax highlighting:

```python
def hello():
    print("Hello, World!")
```

The code block renders with the same Prism-powered highlighting used in the main editor.

Tables

GFM tables with alignment support:

| Feature   | Status    |
|-----------|-----------|
| Sync      | Supported |
| Themes    | Supported |

Task Lists

Interactive-style task list rendering:

- [x] Create snippet
- [x] Add tags
- [ ] Share with team

Other GFM Features

  • Horizontal rules
  • Footnotes
  • Emoji shortcodes
  • HTML passthrough (limited, safe subset)

Using Markdown Snippets

When to Use Markdown

Markdown snippets are ideal for:

  • Documentation templates -- README files, API docs, changelogs
  • Cheatsheets -- Quick reference guides with formatted examples
  • Meeting notes -- Structured notes with code examples
  • Tutorials -- Step-by-step guides with embedded code blocks

Creating a Markdown Snippet

  1. Create a new snippet with Cmd+N.
  2. Set the language to Markdown using the language dropdown.
  3. Write your Markdown content in the editor.
  4. Toggle to Side-by-Side mode to see the rendered preview as you type.

Tips

  • Use the side-by-side mode while drafting and switch to full preview for a final review.
  • Code blocks inside Markdown support all 50+ languages that SnipperApp highlights.
  • The preview follows your system appearance -- light or dark -- for comfortable reading.

Related