ᑌᑎotes Markdown WYSIWYG

Unotes gives you a markdown note editor right inside Visual Studio Code. Don't get distracted with noisy markdown syntax. Enjoy your notes with a rich WYSIWYG editor. Take full control of the markdown when needed. Start taking notes in style!

♥

If you find Unotes useful, please write a review.

or

Donate

What's new in Unotes 1.4

• Template Notes!
• Better support for remote file connections. (WSL/SSH)
• 'Open In Unotes' right-click menu option added
• Absolute path support for media folder

ᑌᑎotes

Unotes is an open-source extension for Visual Studio Code created by Ryan McAlister.

Unotes helps you visualize and manage your markdown notes. Organize your notes in nested folders and edit them with a rich WYSIWYG editor.

Use Visual Studio Code's built-in search and version control features for all your notes.

FAIR WARNING

• Unotes will reformat your markdown without warning.
• It will not preserve special formatting.
• It auto-saves all edits.

It is highly recommended to use unotes with source control to revert any unwanted changes.

Features

WYSIWYG Editor

Split Markdown / Preview View

Color Themes Supported

Note Ordering

Editing Toolbar

Paste Images from the Clipboard

By default images are embedded as base64 text objects. Images can optionally be auto-converted to local files when pasted. See Image convertion to local files.

Local, Embedded and URL Images

Local Image Example

![my picture](.media/test.png)

Table Support

Use the table toolbar button to insert a table. Right-click on the table to open the table editing menu.

Template Notes

Templates notes allow you to create a new note using a customizable template. Right-click in the note sidebar and select 'Add Template Note' to choose from the available templates.

• Template files can be added to the .unotes/templates directory as .hbs (handlebars) files.
• Template variables:
  • title
  • date
• Template helper functions:
  • formatDate - see momentjs for format options.
  • capitalize
  • capitalizeAll

A default template can also be set using the newNoteTemplate setting. This will apply the template by default without having to select from the list.

Template Example

# {{capitalizeAll title}}

{{formatDate date "llll"}}

Math Typesetting

• Only KaTeX currently supported

KaTeX Example

\begin{aligned}
\int_0^12\frac{x^3(1-x)^3}{10+x^2}\,dx &=\frac{22}{17}-\pi\\ \\
\int_{-\infty}^\infty e^{-x^2}\,dx &=\sqrt{\pi}
\end{aligned}

Customizable Hotkeys

Formatting Options (Experimental)

Unotes can automatically reformat your markdown if desired using remark-stringify. To enable this feature, add a 'remark_settings.json' file to the .unotes folder in your project directory. All remark-stringify options can be used.

Note - This feature is experimental and has some known issues.

Additional Remark Settings Options

• listItemSpace
  • sets the number of spaces after a list marker
  • only works when listItemIndent = 'tab'
• listItemTabSize
  • sets the list item tab size (default = 4)

Example remark_settings.json

    {
        "gfm": true,
        "commonmark": false,
        "pedantic": false,
        "looseTable": false,
        "spacedTable": true,
        "paddedTable": true,
        "fence": "`",
        "fences": true,
        "bullet": "-",
        "listItemIndent": "tab",
        "listItemSpace": 1,
        "listItemTabSize": 4,
        "incrementListMarker": true,
        "rule": "-",
        "ruleRepetition": 3,
        "ruleSpaces": false,
        "strong": "*",
        "emphasis": "_"
    }

YAML Front Matter Support

Unotes now supports the YAML front matter sections in tui-editor 2.0. Note this will not work when using markdown reformatting with remark (see above).

Example

---
title: title
---

Workspace Configuration Options

Font Customization

Unotes now uses the VSCode editor.font-size, editor.font-family and editor.font-weight settings.

Custom Colors

Custom colors can be set to override many of the themed or default color values. Note there are separate values for the wysywig, markdown editor and markdown preview panes.

You can set options in the vscode workspace settings.json file:

"workbench.colorCustomizations": 
{ 
    "unotes.wysText": "#998", 
    "unotes.mdHeader": "#333", 
    "unotes.pvCodeKeyword": "#3e4d75"
}

Color Options

Syncing Note Files

• All note files are stored as .md files by default. This is configurable.
• Sync to a repository using Git or other version control system
• Folder and Note settings are stored in .unotes/unotes_meta.json
  • Be sure to sync this file to preserve note orderings

Additional Info

Excluded Folders

The following folders are excluded from the Unotes navigation tree:

• node_modules/**
• .* (folders starting with '.')

Known Issues

No markdown WYSIWYG is perfect and Unotes has its share of issues. Some issues have been inherited from the current dependencies. Hopefully some of these will be resolved in the near future...

Copy and Paste

• You may not always get the desired results when pasting directly into the WYSIWYG editor. In some cases it may be best to paste into the raw markdown view.
• You can paste into the WYSIWYG editor as plain text if the shift key is down. This can be done by adding an additional keybinding in vscode for paste. (e.g. 'CTRL + SHIFT + v')

CodeBlocks

• Some characters are escape encoded undesireably.

Open Workspace Folder

• Before using Unotes you must have a folder currently opened in the workspace.

Multiple Workspace Folder Not Supported

• Unotes currently does not support multiple workspace folders open. This may be a future enhancement.

Acknowlegments

Unotes is here largely thanks to

• tui editor