search

ryanmcalister / unotes

Unotes Visual Studio Code Extension. A markdown WYSIWYG notes editor.
MIT License
173 stars 22 forks source link
markdown-wysiwyg vscode-extension wysiwyg-editor

readme


Unotes Logo

ᑌᑎ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!

Intro

Important Warning and Notice for Unotes 1.5 users

Because of potentially data loss with Unotes v1.5 and issues with undo, we've un-published the extension from the VSCode Marketplace. Users can still manually download and install any release from GitHub. A 1.4 version is highly recommended until issues with tui-editor can be resolved. Apologies for any inconvenience.

♥

If you find Unotes useful, please write a review.

or

Donate

What's new in Unotes 1.5

Fixed

Added

Removed

Known Issues with Unotes 1.5

ᑌᑎ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

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

Features

WYSIWYG Editor

Editor

Split Markdown / Preview View

Buttons

Split View

Color Themes Supported

Themes

Note Ordering

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.

TableMenu

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.

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

KaTeX Example

$$katex
\sqrt{x^2+1}
$$

KaTeX

Customizable Hotkeys

Command Default
Heading 1 Ctrl + Alt + 1
Heading 2 Ctrl + Alt + 2
Heading 3 Ctrl + Alt + 3
Heading 4 Ctrl + Alt + 4
Heading 5 Ctrl + Alt + 5
Heading 6 Ctrl + Alt + 6
Normal Ctrl + Alt + 0
Bold Ctrl + Alt + b
Italic Ctrl + Alt + i
Strike Ctrl + Alt + s
Task Ctrl + Alt + t
Unordered List Ctrl + Alt + u
Ordered List Ctrl + Alt + o
BlockQuote Ctrl + Alt + q
Inline Code (highlight) Ctrl + Alt + h
Code Block Ctrl + Alt + c
Horizontal Line Ctrl + Alt + l
Toggle Mode Ctrl + Alt + m
Focus Ctrl + Alt + f

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

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

Setting Description
unotes.editor.display2X Display the button toolbar at twice the size (currently not supported)
unotes.editor.convertPastedImages Automatically convert pasted images to local image files in a .media folder
unotes.editor.extraFocus Call focus on the editor when window is focused
unotes.editor.imageMaxWidthPercent Set the default global image max width percent (10, 25, 50, 75, 100)
unotes.mediaFolder The folder where pasted or converted images will be saved. Relative to the note. Absolute paths also supported (e.g. /f:/my/folder)
unotes.newNoteTemplate The template used for new notes. Set to empty for no note template.
unotes.noteFileExtension The file extension used to filter and save note files. Default = '.md'
unotes.rootPath The root folder path for the note files.
Setting this value will turn off auto-tracking of external file changes.
If needed you can click the 'Refresh' button on the notes tree.
You can also use the ${workspaceFolder} variable if needed in the path. (e.g. ${workspaceFolder}/notes)

Font Customization

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

Custom Colors

NOTE: Custom colors are not working with version 1.5.0.

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

Color Name Description
wysText Unotes wysiwyg text
wysH1 Unotes wysiwyg heading 1
wysH2 Unotes wysiwyg heading 2
wysH3H4 Unotes wysiwyg heading 3 and 4
wysH5H6 Unotes wysiwyg heading 5 and 6
wysBlockquote Unotes wysiwyg blockquote
wysCodeBlockBackground Unotes wysiwyg code block background
wysCodeBlockText Unotes wysiwyg code block text
wysHighlight Unotes wysiwyg highlight / inline code
wysTableText Unotes wysiwyg table text
wysTableTdBorder Unotes wysiwyg table cell border
wysTableThBorder Unotes wysiwyg table header border
wysTableThBackground Unotes wysiwyg table header background
wysTableThText Unotes wysiwyg table header text
wysList Unotes wysiwyg list text
wysLink Unotes wysiwyg link
wysLinkHover Unotes wysiwyg hover link
mdText Unotes markdown text
mdSelectedBackground Unotes markdown selected text background
mdHeader Unotes markdown header
mdListSub1 Unotes markdown list sub item 1
mdListSub2 Unotes markdown list sub item 2
mdListSub3 Unotes markdown list sub item 3
mdCodeBlockText Unotes markdown codeblock text
mdCodeBlockBackground Unotes markdown codeblock background
mdHighlightText Unotes markdown highlight text
mdCodeBlockText Unotes markdown codeblock text
mdTableText Unotes markdown table text
pvCodeComment Unotes preview code comment
pvCodeText Unotes preview code text
pvCodeKeyword Unotes preview code keyword
pvCodeNumber Unotes preview code number
pvCodeString Unotes preview code string
pvCodeType Unotes preview code type
pvCodeDeletion Unotes preview code deletion
pvCodeAddition Unotes preview code addition
pvCodeTitle Unotes preview code title

Syncing Note Files

Additional Info

Excluded Folders

The following folders are excluded from the Unotes navigation tree:

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

CodeBlocks

Open Workspace Folder

Multiple Workspace Folder Not Supported

Acknowlegments

Unotes is here largely thanks to