Markdown Guide & Tips
Basic Syntax
Headers
# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header
###### H6 Header
Emphasis
*italic* or _italic_
**bold** or __bold__
***bold italic*** or ___bold italic___
~~strikethrough~~
Text Highlighting
==highlighted text==
=={red}red highlight with white text==
=={#00ff00}green highlight with black text==
=={yellow}yellow highlight with black text==
=={#000080}navy highlight with white text==
The editor automatically detects if a color is light or dark and adjusts the text color accordingly for optimal readability.
Lists
* Unordered list item
* Another item
* Nested item
1. Ordered list item
2. Another item
1. Nested item
Task Lists
[ ] Unchecked task
[x] Checked task
[X] Also checked task (case insensitive)
[ ] Nested task
Click the checkbox in the preview to toggle its state. The change will be reflected in your markdown.
Links and Images
[Link text](https://example.com)

Programming Language Examples
Here are examples of code snippets in different programming languages:
Python
```python
# Python example
def fibonacci(n):
"""Generate Fibonacci sequence up to n"""
a, b = 0, 1
while a < n:
yield a
a, b = b, a + b
# Print the sequence
for num in fibonacci(100):
print(num)
```
Java
```java
// Java example
public class HelloWorld {
public static void main(String[] args) {
// Print "Hello, World!" to the console
System.out.println("Hello, World!");
// Simple for loop example
for (int i = 1; i <= 5; i++) {
System.out.println("Count: " + i);
}
}
}
```
Rust
```rust
// Rust example
fn main() {
// Print "Hello, World!" to the console
println!("Hello, World!");
// Vector and iterator example
let numbers = vec![1, 2, 3, 4, 5];
// Functional approach with iterators
let sum: i32 = numbers.iter()
.filter(|&n| n % 2 == 0) // Keep only even numbers
.map(|n| n * n) // Square each number
.sum(); // Sum all numbers
println!("Sum of squares of even numbers: {}", sum);
}
```
Blockquotes
> This is a blockquote
> Multiple lines
>> Nested blockquote
Blockquotes now feature elegant quote marks and styling for better readability.
Footnotes
Here is text with a footnote[^1].
[^1]: This is the footnote content.
Features:
- Support for multiple footnotes with automatic numbering
- Click on footnote reference to jump to the footnote
- Click on the return arrow to jump back to the reference
- Footnotes are collected at the end of the document
Example with multiple footnotes:
Here is text with a footnote[^first] and another footnote[^second].
[^first]: This is the first footnote.
[^second]: This is the second footnote with multiple
paragraphs that are intended for the same note.
Tables
| Header 1 | Header 2 |
|----------|-----------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Video Embedding
You can embed videos from YouTube (including Shorts) and Vimeo using the following syntax:
@[youtube](https://www.youtube.com/watch?v=VIDEO_URL)
@[youtube](https://www.youtube.com/shorts/VIDEO_URL)
@[youtube](https://youtu.be/VIDEO_URL)
@[vimeo](https://vimeo.com/VIDEO_URL)
Examples:
@[youtube](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
@[youtube](https://www.youtube.com/shorts/cLNeDHpsAnE)
@[youtube](https://youtu.be/dQw4w9WgXcQ)
@[vimeo](https://vimeo.com/148751763)
Features:
- Automatic video thumbnail preview
- Click-to-play functionality
- Support for multiple video platforms
- Responsive video player that maintains aspect ratio
- Support for both regular videos and shorts
Mermaid Diagrams
Create beautiful diagrams and charts directly in your markdown using Mermaid syntax. Diagrams automatically adapt to your chosen theme with proper contrast and colors.
Sequence Diagrams
Show interactions between different actors or systems:
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
Flowcharts
Create process flows and decision trees:
```mermaid
graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -->|No| E[End]
```
Simple Graphs
Show relationships between concepts:
```mermaid
graph TD
Biology --> Chemistry
Chemistry --> Physics
Physics --> Mathematics
```
Git Graphs
Visualize version control branching and merging:
```mermaid
gitgraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
```
Pie Charts
Display data proportions:
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rabbits" : 15
```
State Diagrams
Show system states and transitions:
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Class Diagrams
Visualize object-oriented design:
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
class Duck{
+String beakColor
+swim()
+quack()
}
```
Supported Diagram Types:
- Sequence Diagrams - Actor interactions and message flows
- Flowcharts - Process flows and decision trees
- Git Graphs - Version control visualization
- Pie Charts - Data proportions and percentages
- State Diagrams - System states and transitions
- Class Diagrams - Object-oriented design
- Entity Relationship Diagrams - Database relationships
- User Journey Maps - User experience flows
- Gantt Charts - Project timelines
- Requirement Diagrams - System requirements
- Mindmaps - Hierarchical information
- Timeline Diagrams - Chronological events
Features:
- Real-time rendering as you type
- Automatic theme integration with high contrast
- Mobile responsive design
- Export support (diagrams included in PDF/HTML exports)
- Error handling with graceful fallbacks
Learn More:
For comprehensive documentation, syntax examples, and advanced features, visit the official Mermaid Documentation. You can also try the Mermaid Live Editor to experiment with diagram syntax before adding it to your markdown.
Canvas Feature
Create visual mind maps, flowcharts, and diagrams using the interactive Canvas feature. This Obsidian-style canvas allows you to organize ideas visually with blocks and connections.
Getting Started
Access the Canvas feature in two ways:
- Main Navigation: Click the Canvas button (network icon) in the left sidebar
- File Explorer: Click the "New Canvas" button in the file explorer pane
Canvas Controls
Toolbar Buttons:
- Back to Editor: Return to the markdown editor
- Add Block: Create a new content block
- Clear Canvas: Remove all blocks and arrows (with confirmation)
- Duplicate: Copy the selected block
- Zoom Indicator: Shows current zoom level (100%)
Working with Blocks
Creating Blocks:
- Click "Add Block" button to create a new block
- Blocks appear with a default title and empty content area
- Each block has a header with title input and control buttons
Editing Blocks:
- Title: Click on the title to edit it
- Content: Click in the content area to add text
- Moving: Drag blocks by their header to reposition
- Selecting: Click on a block to select it (shows blue border and slight scale)
Block Controls:
- Color Picker: Change block background color (16 predefined colors)
- Delete: Remove the block and all connected arrows
Creating Connections
Connection Points:
- Each block has 4 connection points (top, bottom, left, right)
- Connection points appear when hovering over a block
- Drag from one connection point to another to create arrows
Arrow Physics:
- Straight Lines: Horizontal and vertical connections use straight arrows
- Curved Lines: Diagonal connections use intelligent curved arrows
- Direction-Aware: Curves bend in the direction of movement
Navigation & Interaction
Canvas Navigation:
- Panning: Click and drag on empty space to move around
- Zooming: Use mouse wheel to zoom in/out (10% - 300%)
- Infinite Canvas: Unlimited scrolling in all directions
Minimap:
- Small overview map in the bottom-right corner
- Shows all blocks and arrows at a glance
- Click to quickly navigate to different areas
- Viewport indicator shows current visible area
Keyboard Shortcuts
- Delete/Backspace: Delete selected block or arrow
- Escape: Deselect all items
- Ctrl+D / Cmd+D: Duplicate selected block
Color Customization
Block Colors:
- 16 predefined aesthetic colors available
- Automatic text contrast adjustment (dark text on light backgrounds, light text on dark backgrounds)
- Colors persist when saving and loading canvas files
- Default color uses current theme background
File Management
Saving & Loading:
- Canvas files are saved with
.canvas
extension - Auto-save functionality preserves your work
- Canvas files appear in file explorer with network chart icon
- Switch between markdown and canvas files seamlessly
File Explorer Integration:
- Canvas files show with distinct network chart icon
- Create new canvas files directly from file explorer
- Supports both browser storage and local file system modes
Use Cases
- Mind Mapping: Organize ideas and concepts visually
- Project Planning: Create task flows and dependencies
- Note Organization: Connect related notes and thoughts
- Brainstorming: Visual idea generation and connection
- Process Design: Map out workflows and procedures
- Knowledge Graphs: Link concepts and information
Tips for Effective Canvas Use
- Use different colors to categorize related blocks
- Keep block titles concise and descriptive
- Use the minimap for navigation in large canvases
- Regularly save your work (auto-save helps but manual saves are good practice)
- Experiment with different layouts to find what works best
- Use straight connections for hierarchical relationships
- Use curved connections for associative relationships
Editor Features
Keyboard Shortcuts
Tab
- Insert 4 spacesCtrl/Cmd + S
- Save document
Interface Features
- Real-time Preview - See your formatted text instantly
- Sync Scrolling - Toggle synchronized scrolling between editor and preview
- Multiple Themes - Choose from various color themes
- Font Selection - Multiple fonts for better writing experience
- Auto-save - Your content is automatically saved
Tips & Tricks
- Use the preview pane to check your formatting in real-time
- Toggle sync scrolling when editing long documents
- Try different themes and fonts to find your perfect writing environment
- Use keyboard shortcuts for faster editing
- Your work is automatically saved in the browser