Append Editor

License Maintenance Status Cost GitHub issues Slack GitHub Stars

Introduction

The Append Editor is an unofficial Custom Editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app.

You can find the beta demo at beta.appendeditor.com.

The Append Editor follows the "read first" philosophy. When you open your notes, the editor starts in read/view mode so you can't accidentally accidentally edit old notes. You can easily add to the end of your notes with the Append box at the bottom.

The editor supports Markdown, LaTeX/KaTeX\LaTeX/ \KaTeX, emoji codes, syntax highlighting, inline HTML, table of contents, footnotes, auto-linking, printing/saving to PDF (with and without URLs), custom fonts, and more. It is perfect for writing class notes and daily journals. You can append to your notes whenever you need to jot anything down.

This editor works best on the desktop app and web app on a Chromium browser (e.g., Google Chrome), this editor works best when used with the No Distraction theme. It currently does not work offline but will in the future.

Features

  • Markdown support via Unified/Remark
  • LaTeX/KaTeX\LaTeX/\KaTeX via hosted KaTeX
  • Emojis via emoji codes
  • Google Code and GitHub Gist flavored Syntax Highlighting via highlight.js stylesheets
  • Table of Contents (links don't work on mobile) via Remark TOC
  • Footnotes (links don't work on mobile) via Remark footnotes
  • Inline HTML for underlining and highlighting
  • Print/Save to PDF in rendered form with or without URLs (works best on Chromium browsers)
  • Buttons to scroll to top and bottom of the note
  • Notes are stored in plaintext (great for longevity)
  • Read notes by default to prevent accidentally editing previous notes
  • Append text to notes without accidentally editing previous notes
  • Changes to note in the Edit mode are automatically saved
  • Text in the Append mode is automatically saved without automatically appending
  • Option to render text live while editing
  • Option to turn View mode off to improve editor performance when editing long notes
  • Option to add new line or start new paragraph when appending
  • Option to choose custom fonts
  • Helpful questions to prompt writing

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. Click Extensions in the lower left corner.
  3. Click Import Extension.
  4. Paste this into the box:
    https://notes.theochu.com/p/mEyBECVK7i
  5. Press Enter or Return on your keyboard.
  6. Click Install.
  7. At the top of your note, click Editor, then click Append Editor - Beta.

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

Keyboard Shortcuts

ActionShortcut
Toggle Edit ModeCtrl/⌘ + E
Toggle Append ModeCtrl/⌘ + U
Toggle View ModeCtrl/⌘ + P
Escape Edit/View Mode^Escape
Save/Append Text^Ctrl/⌘ + S and Ctrl/⌘ + Enter
Increase number of rows in Append boxCtrl/⌘ + . (period)
Decrease number of rows in Append box**Ctrl/⌘ + , (comma)
Scroll to Top/Bottom (smooth)Ctrl/⌘ + { and }
Skip to Top/Bottom (fast)Ctrl/⌘ + [ and ]
Skip to beginning or end of text area^Ctrl/⌘ + Home and Ctrl/⌘ + End

^ Perform in the Edit or Append box
** The Append box has a minimum of 5 rows

Style Guide

ResultMarkdownShortcut*
Bold**text** or __text__Ctrl/⌘ + B
Emphasize*text* or _text_Ctrl/⌘ + I
Strike-through~~text~~Ctrl/⌘ + Alt + U
Link[text](http://)Ctrl/⌘ + K
Image![text](http://)Ctrl/⌘ + Alt + I
Inline Code`code`Ctrl/⌘ + Alt + K
Code Block```language
code
```
4 spaces or Ctrl/⌘ + Tab
Unordered List* item
- item
+ item
Ctrl/⌘ + L
Ordered List1. itemCtrl/⌘ + Alt + L
Task List- [ ] Task or - [x] TaskN/A
Blockquote> quoteCtrl + ' or Ctrl + "
H1# HeadingCtrl/⌘ + H
H2## HeadingCtrl/⌘ + H (×2)
H3### HeadingCtrl/⌘ + H (×3)
H4#### HeadingCtrl/⌘ + H (×4)

*The shortcuts are currently available only on the Desktop app and Chrome based web apps such as Google Chrome and the latest Microsoft Edge.

Inline HTML

The Append Editor also supports inline HTML. You can use <div> </div> tags for formatting sections and <span></span> for formatting text inline. Here are some examples.

  1. Underlined text:

    <u> Text to be underlined </u>
  2. Highlighted text:

    <span style="background-color: rgb(255, 255, 0);">
    Text to be highlighted </span>
  3. Different font families and sizes:

    This is inline <span style="font-family: consolas; font-size: 14px">
    monospace</span> text.
    <div style="font-family: Times New Roman; font-size: 12pt">
    This is 12pt Times New Roman for writing papers.
    </div>

Line Breaks

To have a line break without a paragraph, you will need to add two spaces, called trailing spaces, to the end of your sentence. This line is separate, but is considered to be within the same paragraph. To create a new paragraph, skip two lines.

The New Line checkbox adds two spaces and a new line to the beginning of your note. The New Paragraph checkbox adds two spaces and two new lines to the beginning of your note. If both are checked, new paragraph will take precedence.

Lists

The Append Editor supports unordered and ordered lists, but does not mix them well if they're both on the first level. Copy this into your editor to see what it renders:

1. First ordered list item
1. Another item.
a. Two spaces for lettered list
b. Add two trailing spaces to create new lettered item
c. Third lettered list
- Three or four spaces for unordered sub sub list
- Three or four spaces for unordered sub sub list
1. Three or four spaces for ordered sub sub list
a. Lettered list
b. Lettered list
1. Ordered list on same level
* Unordered List
1. Ordered sub list
- Unordered sub sub list
- Unordered sub list
1. Seven spaces for ordered sub sub sub sub list
1. Seven spaces for ordered sub sub sub sub list
1. Numbered list doesn't resume

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

KaTeX\KaTeX

For inline KaTeX, use single or double dollar signs inline. For example, $\int_0^\infty f(x)dx$ or $$\pi$$ should yield 0f(x)dx\int_0^\infty f(x)dx and π\pi.

For display mode KaTeX, use double dollar signs on new lines. For example,:

$$
\int_0^\infty f(x)dx
$$

should yield:

0f(x)dx\int_0^\infty f(x)dx

KaTeX\KaTeX Tables

Please see here and here for tables of all the functions and symbols that KaTeX\KaTeX supports.

Table of Contents

You can create a table of contents:

#### Table of Contents

The links generated by the table of contents do not work properly on mobile.

Footnotes

The Append 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.

Printing

Printing and saving to PDF are available on the desktop and web apps. On Windows, the feature works best on a Chromium browser (e.g., Google Chrome or the latest Microsoft Edge) because you can enable Background Graphics such as background colors for highlighting, code snippets, and tables. To make your links clickable in the PDF, click Save to PDF instead of Microsoft Print to PDF when choosing your printer.

Printing URLs

When you click Print, you get to choose whether to print the URLs or not. Printing the URLs will print embedded URLS (https://appendeditor.com/#printing) with their URLs next to them. The URLs for Tables of Contents and Footnotes will also be printed. Not printing the URLs will print the embedded URLs without the URLs next to them. In both cases, the links will be clickable if you choose Save to PDF when choosing your printer as described above.

Settings

You can choose your own custom fonts for the Edit/Append and View/Print modes. The Settings Menu has a predefined list of fonts to help you with your selection, but you can type in a different one if it's not on the list. If you choose a font that is unavailable on your device or browser, then the editor might use your device or browser's default font such as Times New Roman.

You can define multiple fonts in the order of your preference and separate them by commas. The editor will automatically display the next font if your preferred font is unavailable. For example, if you want to use a monospace font on all your devices but would prefer not to use Courier New if other monospace fonts are available, then you can submit a list of fonts such as SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace. This is useful if you use many devices with many different operating systems.

Settings are currently saved on a per-note basis. Saving your settings as default may be available in the future. Please let me know if you want to add another font to the list.

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 append-editor
  4. Run npm install to locally install the packages in package.json
  5. Create ext.json as shown here with url: "http://localhost:8003/dist/index.html". Optionally, create your ext.json as a copy of ext.json.sample.
  6. Install http-server using sudo npm install -g http-server
  7. Start the server at http://localhost:8003 using npm run server
  8. Import the extension into the web or desktop app with http://localhost:8003/ext.json.
  9. To build the editor, open another command window and run npm run build. For live builds, use npm run watch. You can also run npm run start and open the editor at http://localhost:8080.

License

Copyright (c) Theodore Chu. All Rights Reserved. Licensed under AGPL-3.0.

Further Resources

Last updated on