sn-simple-markdown-editor

Markdown Basic is a custom editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app.

Usage no npm install needed!

<script type="module">
  import snSimpleMarkdownEditor from 'https://cdn.skypack.dev/sn-simple-markdown-editor';
</script>

README

Markdown Basic

License GitHub issues and feature requests Slack GitHub Stars

Introduction

Markdown Basic is a custom editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app.

Features

  • Markdown via Markdown-It
  • Syntax Highlighting via Highlight.js
  • Optional split pane view
  • Task Lists
  • Tables
  • Footnotes
  • Inline external images

Installation

  1. Register for an account at Standard Notes using the Desktop App or Web app. Remember to use a strong and memorable password.
  2. Sign up for Standard Notes Extended. Then, follow the instructions here or continue.
  3. Click Extensions in the lower left corner.
  4. Under Repository, find Markdown Basic.
  5. Click Install.
  6. Close the Extensions pop-up.
  7. At the top of your note, click Editor, then click Markdown Basic.
  8. Click Continue, and you are done!

After you have installed the editor on the web or desktop app, it will automatically sync to your mobile app after you log in.

Style Guide

Result Markdown
Bold **text** or __text__
Emphasize *text* or _text_
Strike-through ~~text~~
Link [text](http://)
Image ![text](http://)
Inline Code `code`
Code Block ```language

code

```
Unordered List * item

- item

+ item
Ordered List 1. item
Task List - [ ] Task or - [x] Task
Blockquote > quote
H1 # Heading
H2 ## Heading
H3 ### Heading
H4 #### Heading
Section Breaks --- or ***

Tables

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

| 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! 😆 |

Footnotes

The Markdown Basic editor supports footnotes. The footnote links do not work properly on mobile. Copy this into your note to see how they're used:

You can create footnote references that are short[^1] or long.[^2]
You can also create them inline.^[which may be easier,
since you don't need to pick an identifier and move down to type the note]
The footnotes are automatically numbered at the bottom of your note,
but you'll need to manually number your superscripts.
Make sure to count your variable[^variable] footnotes.[^5]

[^1]: Here's a footnote.
[^2]: Here’s a footnote with multiple blocks.

    Subsequent paragraphs are indented to show that they belong to the previous footnote.

        { eight spaces for some code }

    The whole paragraph can be indented, or just the first
    line. In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won’t be part of the footnote, because it
isn’t indented.

[^variable]: The variable footnote is the fourth footnote.
[^5]: This is the fifth footnote.

Not yet available:

  • KaTeX
  • Printing
  • Custom Font Families
  • Custom Font Sizes
  • Superscript
  • Subscript

License

GNU Affero General Public License v3.0

Development

The instructions for local setup can be found here. All commands are performed in the root directory:

  1. Fork the repository on GitHub
  2. Clone your fork of the repository
  3. Type cd markdown-basic
  4. Run yarn to locally install the packages in package.json
  5. Create ext.json as shown here with url: "http://localhost:8004/dist/index.html". Optionally, create your ext.json as a copy of ext.json.sample.
  6. Install http-server using yarn global add http-server or npm install -g http-server
  7. Start the server at http://localhost:8004 using http-server . --cors -p 8004
  8. Import the extension into the web or desktop app with http://localhost:8004/ext.json.
  9. To build the editor, open another command window and run yarn build or npm run build. For live builds, use yarn watch or npm run watch. You can also run yarn start or npm run start and open the editor at http://localhost:8080.

Further Resources