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
- Numbered list item
- Numbered list item
- Numbered list item
- Task list item
Task list item- Task list item
Links
Use:
[Text to display](http://www.example.com)
How they appear:
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:
How they appear:
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):
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);
Drawing Diagrams
We use the Mermaid.js syntax for adding diagrams to your documents. Read their documentation here.
Similar to displaying a block of code, you just use three back-ticks and the word mermaid to start the block:
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
And it will appear like so: