Markdown Editor Guide

Basic Formatting

Headings

Create headings using the # symbol. More # symbols = smaller heading.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Text Styling

**Bold text** or __Bold text__
*Italic text* or _Italic text_
~~Strikethrough text~~
<u>Underlined text</u>

Result: Bold text, Italic text, Strikethrough text, Underlined text

Lists

Unordered lists use -, *, or +:

- Item 1
- Item 2
  - Nested item
  - Another nested item
- Item 3

Ordered lists use numbers:

1. First item
2. Second item
3. Third item

Blockquotes

> This is a blockquote
> It can span multiple lines
>
> And include multiple paragraphs

Code Blocks

Use triple backticks for code blocks. Specify the language for syntax highlighting:

JavaScript Example

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return true;
}

greet("World");
```

Python Example

```python
def calculate_fibonacci(n):
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)

print(calculate_fibonacci(10))
```

Supported Languages

The editor supports syntax highlighting for 13 languages:

• JavaScript
• TypeScript
• Python
• Java
• Go
• Rust
• HTML
• CSS
• JSON
• Bash/Shell
• SQL
• YAML
• Markdown

Links & Images

Links

[Link text](https://example.com)
[Link with title](https://example.com "Hover to see title")

Keyboard shortcut: Ctrl+Shift+U (Cmd+Shift+U on Mac)

Tip: Click the link button or press the shortcut again while your cursor is inside a link to remove the link formatting (toggle off).

Images

![Alt text](https://example.com/image.jpg)
![Image with title](https://example.com/image.jpg "Image title")

Keyboard shortcut: Ctrl+Shift+I (Cmd+Shift+I on Mac)

Tip: Click the image button or press the shortcut again while your cursor is inside an image to remove the image formatting (toggle off).

Embeds

Embed rich content from supported providers using the special embed: syntax:

![YouTube video](embed:https://www.youtube.com/watch?v=dQw4w9WgXcQ)
![Twitter post](embed:https://twitter.com/user/status/1234567890)
![Giphy GIF](embed:https://giphy.com/gifs/example-ABC123)

Supported Providers

• YouTube - Videos embed as iframes
• Twitter/X - Tweets display as links (oEmbed coming soon)
• Giphy - GIFs embed as images
• Unsplash - Photos embed as images
• Pexels - Photos display as links
• Imgur - Images embed directly
• Pixabay - Images display as links

Security Note: Only URLs from these 7 providers are allowed. Unsupported providers will show an error.

Keyboard shortcut: Ctrl+Shift+E (Cmd+Shift+E on Mac)

Tip: Click the embed button or press the shortcut again while your cursor is inside an embed to remove the embed formatting (toggle off).

Cover Image

Add a cover image to your post using the cover image input at the top of the editor.

• Format: Enter a direct URL to an image file
• Supported extensions: .jpg, .jpeg, .png, .gif, .webp
• Recommended aspect ratio: 1000:420 (approximately 2.38:1)
• Non-standard ratios: Images are center-cropped automatically

Tip: Use free image services like Unsplash or Pexels for high-quality cover images.

Keyboard Shortcuts

Speed up your editing with these keyboard shortcuts:

Tips & Best Practices

• Preview your work: Use the Preview button to see how your markdown will render before publishing.
• Full-screen mode: Click the Full Screen button for a distraction-free writing experience. Press Escape to exit.
• Auto-save: Your work is automatically saved every 30 seconds to prevent data loss.
• Accessibility: The editor is fully keyboard-navigable and screen reader friendly.
• Mobile friendly: The toolbar automatically adapts to smaller screens.

Additional Resources

• Markdown Guide - Comprehensive markdown reference
• GitHub Flavored Markdown Spec