To run the project locally:
- You can download the installer
.exefile from the Releases section in this repo.
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 | ![]() |
| Delete Note | ![]() |
| Navigate Notes | ![]() |
| Open Settings | ![]() |
| Change Status | ![]() |
MarkNote has a number of settings that can be changed such as:
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.
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.
You can customise the appearance of the preview. You can alter the font size in the preview.
You can find a list of the keybindings available to use.
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
You can style the text in your note with bold, italic, strikethrough, underlined, highlighted, subscript, or superscript text.
You can make an unordered list by starting one or more lines of text with -
- List item 1
- List item 2
- List item 3
To make an ordered list, start each line with a number.
1. List item 1
2. List item 2
3. List item 3
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
You can create a quote using > before your text
> Text that is a quote
You can insert inline code using a backtick infront of and after your code text.
This is some `code` inline
You can also create a code block by using triple backticks.
You can get syntax highlighting for code blocks by including the coding language after the first set of backticks like so.
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/).
You can select the link button in the editor toolbar to bring up the link format helper.
You can input a link title, link address and click insert to add a formatted link to your selected line in the editor.
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 ().

You can select the image button in the editor toolbar to bring up the image format helper.
You can input an image address, image width and click insert to add a formatted image to your selected line in the editor.
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 |
You can select the more options button in the editor toolbar and then select the table button to bring up the table format helper.
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.
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)
In the tool bar there is a emoji picker where you can filter through emoji types to find what you're looking for.
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}
$$
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.
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.
You can insert a simple horizontal divider to break up the content in the note using three -'s.
Text above
---
Text below
This project is licensed under the MIT License.
You’re free to use, modify, and distribute it — just include attribution.
- GitHub Repository: https://github.com/markom9822/MarkNote-App



































