Introduction to Markdown

This page serves to display the flavor of Markdown that is supported in FlowNote. The Use section show's how you can use the elements in your own Notes and the How they appear section demonstrates how that will be rendered within your Note when in View mode or when your Note is shared.

Emphasis

Use:

**bold**
*italics*
~~strikethrough~~

How they appear:

bold
italics
strikethrough

Tags

Tags are simple and easy way to organize your Notes. Simply put a # in front of a word to add a tag. You can filter by them by clicking on a tag.

Use:

#personal
#code-spike #flownote #recipes

How they appear:

#personal
#code-spike#flownote#recipes

Headers

Use:

# Big header
## Medium header
### Small header
#### Tiny header

How they appear:

Big header

Medium header

Small header

Tiny header

Lists

Use:

* Generic list item
* Generic list item
* Generic list item

1. Numbered list item
2. Numbered list item
3. Numbered list item

- [ ] Task list item
- [X] Task list item
- [ ] Task list item

How they appear:

  • Generic list item
  • Generic list item
  • Generic list item
  1. Numbered list item
  2. Numbered list item
  3. Numbered list item
  • Task list item
  • Task list item
  • Task list item

Links

Use:

[Text to display](http://www.example.com)

How they appear:

Text to display

Quotes

Use:

> This is a quote.
> It can span multiple lines!
> Third line!

How they appear:

This is a quote
It can span multiple lines!
Third line!

Images

Use:

![Patagonia](https://www.flownote.app/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBRQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c3d0b99320a300d42280627eb94c58bcdd4ba93b/image-1561319111443.jpg)

How they appear:

Patagonia
Patagonia

Tables

Use:

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| John | Doe | Male |
| Mary | Smith | Female |

How they appear:

Column 1 Column 2 Column 3
John Doe Male
Mary Smith Female

Displaying code

Use (a single back-tick for in-line code):

`var example = "hello!";`

How it appears: var example = "hello!";

Or spanning multiple lines (with three back-ticks):

```javascript
var example = "hello!";
alert(example);
```

(You can add the language of the Code block for improved syntax highlighting)

How it appears:

var example = "hello!";
alert(example);