Markdown Pro

Introduction

The Markdown Pro editor (aka Advanced Markdown Editor) is a derived editor for Standard Notes. It is derived from the Easy Markdown Editor which uses Codemirror.

Features

  • Markdown with live side-by-side rendering
  • Three views: Edit, Split, and Preview
  • Keyboard Shortcuts
  • Inline styling with HTML/CSS

Keyboard Shortcuts

ResultShortcut
Toggle PreviewCtrl/⌘ + P
Toggle Side-by-SideCtrl/⌘ + Alt + P

Style Guide

ResultMarkdownShortcut
Bold**text** or __text__Ctrl/⌘ + B
Emphasize*text* or _text_Ctrl/⌘ + I
Strike-through~text~ or ~~text~~
Link[text](http://)Ctrl/⌘ + K
Image![text](http://)Ctrl/⌘ + Alt + I
Inline Code`code`
Code Block```code```Ctrl/⌘ + Alt + C or tab or 7 spaces
Unordered List* item
- item
+ item
Ctrl/⌘ + L
Ordered List1. itemCtrl/⌘ + Alt + L
Remove ListCtrl/⌘ + E
Blockquote> quoteCtrl + ' or Ctrl + "
H1# HeadingCtrl/⌘ + H
H2## HeadingCtrl/⌘ + H (×2)
H3### HeadingCtrl/⌘ + H (×3)

Lists

Enter a space in front of the asterisk or number to indent the list.
Copy this into your editor to see what it creates:

1. First ordered list item
2. Another item
* One space for unordered sub-list item
- One space for another sub-list item
* Press tab for sub-sub-list item
1. Two tabs for sub-sub-sub list item 😀
1. Actual numbers don't matter, just that it's a number
1. One space for ordered sub-list item
1. One space for another sub-list item
* Press Tab
1. One tab
* Two tabs. You got it! 👏
4. And another item. Success! 🎉

Tables

Colons can be used to align columns.
Copy this into your editor to see what it creates:

| Tables | Are | Cool |
| ---------------- | :-----------: | --------: |
| col 2 is | centered | \$149 |
| col 3 is | right-aligned | \$4.17 |
| privacy is | neat | \$2.48 |
| rows don't need to |be pretty| what? |
| the last line is | unnecessary | really?
| one more | row | Yay! 😆

Inline Styling

You can personalize the styling of the editor with inline HTML/CSS. For example, if you want to use monospace font for the editor, add this to your note, and replace var(--sn-stylekit-monospace-font) with your preferred font-families:

<style>.CodeMirror { font-family: var(--sn-stylekit-monospace-font); }</style>

If you want to use monospace font for the preview, adjust the styles for .editor-preview:

<style>.CodeMirror, .editor-preview { font-family: var(--sn-stylekit-monospace-font); }</style>

Not yet available:

  • Footnotes
  • Superscript
  • Subscript
  • Syntax Highlighting
  • Printing
  • Default Custom Fonts

License

GNU Affero General Public License v3.0

Development

This editor uses Gulp to compile.

Further Resources

Last updated on