Skip to content

Markdown note taking desktop application built using React, Electron.

License

Notifications You must be signed in to change notification settings

markom9822/MarkNote-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

134 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MarkNote App Project


🛠 Tech Stack


image


📦 Getting Started

To run the project locally:

  1. You can download the installer .exe file from the Releases section in this repo.

How To Guide

You can create, edit and delete notes with a side by side editor and HTML preview which updates in real time. Each note has a status to show your progress at a glance. There are several buttons in the UI, the table below explains what they do.

Action Button
Create New Note image
Delete Note image
Navigate Notes image
Open Settings image
Change Status image

Settings

MarkNote has a number of settings that can be changed such as:

Themes

You can change the theme for the main UI, editor and preview. We have a variety of themes to choose, from dark and light mode to nord, solarized and gruvbox.

Editor

You can customise the interface and appearance of the markdown editor. You can toggle the toolbar, line wrapping, bracket matching and more. The tab size and font size can be customised too.

Preview

You can customise the appearance of the preview. You can alter the font size in the preview.

Keybindings

You can find a list of the keybindings available to use.

image

Markdown in MarkNote

Headings

To add a heading into a note add one to four # symbols before your heading text. The number of #'s determines the hierarchy level and typeface size of the heading. In the editor toolbar there is a heading helper button to automate the syntax with a button press.

# A first heading
## A second heading
### A third heading
#### A fourth heading

image

Styling Text

You can style the text in your note with bold, italic, strikethrough, underlined, highlighted, subscript, or superscript text.

Style Syntax Example Output
Bold ** ** **This is bold text** image
Italic * * *This text is italicized* image
Strikethrough ~~ ~~ ~~This text not needed~~ image
Underlined __ __ __This text is underlined__ image
Highlighted **= =** **=This text is highlighted=** image
Subscript <sub> </sub> This is a <sub>subscript</sub> text image
Superscript <sup> </sup> This is a <sup>superscript</sup> text image

Lists

You can make an unordered list by starting one or more lines of text with -

- List item 1
- List item 2
- List item 3

image

To make an ordered list, start each line with a number.

1. List item 1
2. List item 2
3. List item 3

image

Task Lists

You can make a task list by starting list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].

- [x] Task item 1
- [x] Task item 2
- [ ] Task item 3

image

Qoutes

You can create a quote using > before your text

> Text that is a quote

image

Code

You can insert inline code using a backtick infront of and after your code text.

This is some `code` inline

image

You can also create a code block by using triple backticks.

image

image

Syntax Highlighting

You can get syntax highlighting for code blocks by including the coding language after the first set of backticks like so.

image

image

Links

You can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ).

Check out this guide for markdown syntax [Markdown Guide](https://www.markdownguide.org/basic-syntax/).

image

You can select the link button in the editor toolbar to bring up the link format helper.

image

You can input a link title, link address and click insert to add a formatted link to your selected line in the editor.

Images

You can add an image to your note by adding ! and wrapping the info text in [ ]. Then, wrap the link for the image in parentheses ().

![Octocat](https://myoctocat.com/assets/images/base-octocat.svg)

image

You can select the image button in the editor toolbar to bring up the image format helper.

image

You can input an image address, image width and click insert to add a formatted image to your selected line in the editor.

Tables

You can add a table using three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

image

You can select the more options button in the editor toolbar and then select the table button to bring up the table format helper.

image

You can select the desired number of rows and columns and click insert to add a formatted table to your selected line in the editor.

Emojis

You can add emoji to your note by typing :EMOJICODE:, a colon followed by the name of the emoji. Emoji suggestions are shown when you start typing. (Emoji List)

emoji demo gif

In the tool bar there is a emoji picker where you can filter through emoji types to find what you're looking for.

image

Maths

You can add maths equations inline by inserting $ around your equation. You can make a maths equation block using $$.

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$ 
x = {-b \pm \sqrt{b^2-4ac} \over 2a} 
$$

image

Footnotes

You can add footnotes to your content by using this bracket syntax [^1].

This is a simple footnote[^1].

This footnote has multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
  This is a second line.

image

Github Style Alerts

You can insert alerts using blockquote syntax that you can use to emphasize critical information. They are displayed with distinctive colors and icons to highlight them to the reader. To add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. There are five types of alerts are available (note, tip, important, warning and caution).

> [!NOTE]
> Useful information that users should know.

> [!TIP]
> Helpful advice for doing things better.

> [!IMPORTANT]
> Key information users need to know.

> [!WARNING]
> Urgent info that needs immediate user attention.

> [!CAUTION]
> Advises about risks or negative outcomes.

image

Dividers

You can insert a simple horizontal divider to break up the content in the note using three -'s.

Text above

---

Text below

image


🪪 License

This project is licensed under the MIT License.
You’re free to use, modify, and distribute it — just include attribution.


📎 Links

About

Markdown note taking desktop application built using React, Electron.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages