H1 - Main Title
H2 - Section Header  
H3 - Subsection Header
#### H4 - Sub-subsection Header
##### H5 - Minor Header
###### H6 - Smallest Header

Alternative H1 Syntax:
Main Title
=========

Alternative H2 Syntax:  
Section Header
--------------

Bold text or __Bold text__
Italic text or _Italic text_
Bold and italic or ___Bold and italic___
~~Strikethrough text~~
`Inline code`
==Highlighted text== (extended syntax)
H~2~O (subscript - extended syntax)
X^2^ (superscript - extended syntax)

- Item 1
- Item 2  
  - Nested item 2.1
  - Nested item 2.2
    - Deep nested item 2.2.1
- Item 3

Alternative syntax:
 Item 1
 Item 2
+ Item 3

1. First item
2. Second item
   1. Nested numbered item
   2. Another nested item
      1. Deep nested item
3. Third item

Alternative numbering:
1. First item
1. Second item (auto-numbered)
1. Third item (auto-numbered)

- [x] Completed task
- [ ] Incomplete task
- [x] Another completed task
  - [ ] Sub-task 1
  - [x] Sub-task 2 (completed)

[Link text](https://example.com)
[Link with title](https://example.com "This is a title")
 (automatic link)
 (automatic email link)

[Link text][reference-id]
[Another link][1]
[Link text][] (uses link text as reference)

[reference-id]: https://example.com "Optional title"
[1]: https://example.com
[Link text]: https://example.com

![Alt text](image-url.jpg)
![Alt text](image-url.jpg "Image title")
[![Alt text](image-url.jpg)](link-url.com) (linked image)

Reference-style images:
![Alt text][image-reference]
[image-reference]: image-url.jpg "Optional title"

┌─────────────────┬─────────────────┐
│   Editor Pane   │  Preview Pane   │
│                 │                 │
│ # Main Title    │ Main Title      │
│                 │ =============== │
│ - List item 1   │ • List item 1   │
│ - List item 2   │ • List item 2   │
│                 │                 │
│ Bold text   │ Bold text       │
└─────────────────┴─────────────────┘

View Options:
├── Split View: Editor + Preview side-by-side
├── Preview Only: Full-screen preview mode
├── Editor Only: Distraction-free editing
├── Mobile Preview: Mobile-responsive preview
└── Print Preview: How document will look printed

/ Available editor themes /
- Light Theme: Clean white background
- Dark Theme: Dark background, light text
- Solarized: Popular color scheme
- Monokai: Sublime Text inspired
- GitHub: GitHub-style appearance
- Custom: User-defined colors and fonts

/ Preview style options /
- GitHub Style: GitHub markdown appearance
- Academic: Clean, academic paper style
- Minimal: Simple, distraction-free layout
- Custom CSS: User-defined styling
- Bootstrap: Bootstrap-styled components
- Material Design: Google Material Design

> Single-line blockquote

> Multi-line blockquote
> continues on this line
> and this line too

> ## Blockquote with header
> 
> This is a blockquote with multiple paragraphs.
> 
> This is the second paragraph.

> ### Nested blockquotes
> > This is nested inside the first blockquote
> > > And this is nested even deeper

Three or more hyphens:
---

Three or more asterisks:
**

Three or more underscores:
___

With spacing:
- - -

  

_ _ _

End a line with two spaces for line break  
This line has a line break above it

Use a backslash for line break\
This also creates a line break

Double line break

Creates a new paragraph

\This text is not italicized\
\#This is not a header
\[This is not a link\]
\\This is a literal backslash

Use backslash to escape:  _ ` # + - . ! | [ ] ( ) { }

- javascript, js
- python, py  
- java
- cpp, c++
- csharp, cs, c#
- php
- ruby, rb
- go, golang
- rust
- swift
- kotlin
- typescript, ts

- html
- css, scss, sass
- json
- xml
- yaml, yml
- markdown, md
- bash, shell, sh
- powershell, ps1
- dockerfile
- nginx

- sql
- r
- matlab
- scala  
- haskell
- perl
- lua
- vim
- latex
- diff

Inline math: $E = mc^2$
Variables: $x$, $y$, $z$
Equations: $ax^2 + bx + c = 0$
Greek letters: $\alpha$, $\beta$, $\gamma$

$$
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)
$$

$$
\begin{align}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} &= 0
\end{align}
$$

$a + b - c \times d \div e$
$a^2 + b^2 = c^2$
$\sqrt{x^2 + y^2}$
$\frac{a}{b} = \frac{c}{d}$
$x_1 + x_2 + \ldots + x_n$

$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$

$$\int_{a}^{b} f(x) dx$$

$$\lim_{x \to \infty} \frac{1}{x} = 0$$

$$\begin{matrix}
a & b \\
c & d
\end{matrix}$$

$$\begin{pmatrix}
\cos \theta & -\sin \theta \\
\sin \theta & \cos \theta
\end{pmatrix}$$

    
    


    
Main Title
    
Paragraph content with bold text.
    

        
List item 1
        
List item 2
    

PDF Export Options:
├── Page Size: A4, Letter, Legal, Custom
├── Margins: Normal, Narrow, Wide, Custom
├── Orientation: Portrait, Landscape
├── Header/Footer: Page numbers, title, date
├── Table of Contents: Auto-generated TOC
├── Syntax Highlighting: Preserved in PDF
├── Math Rendering: LaTeX expressions rendered
└── Image Quality: High, Medium, Low

DOCX Export Features:
├── Native Word format (.docx)
├── Preserves formatting and styles
├── Embedded images and tables
├── Headers and footers
├── Page breaks and sections
├── Cross-references and links
└── Compatible with Microsoft Word

Supported Platforms:
├── GitHub: Push to repository, create GitHub Pages
├── GitLab: GitLab Pages integration
├── Netlify: Static site deployment
├── Vercel: Instant deployment
├── Medium: Direct article publishing
├── Dev.to: Developer community publishing
└── WordPress: Blog post creation

Compatible Generators:
├── Jekyll: GitHub Pages default
├── Hugo: Fast static site generator
├── Gatsby: React-based generator
├── Next.js: Full-stack React framework
├── VuePress: Vue.js documentation
├── Docusaurus: Facebook's documentation platform
└── GitBook: Documentation platform

Collaboration Features:
├── Real-time editing: Multiple users simultaneously
├── Cursor tracking: See other users' cursors
├── Change highlighting: Visual change indicators
├── User presence: Active user indicators
├── Conflict resolution: Automatic merge conflicts
├── Version history: Track all changes
└── Comments: Inline comments and discussions

Share Methods:
├── Share Link: Direct URL sharing
├── Read-only Link: View-only access
├── Embed Code: Embed in websites
├── Export Link: Direct download links
├── Email Sharing: Send via email
├── Social Media: Share on platforms
└── QR Code: Mobile sharing via QR code

Version Control Features:
├── Auto-save: Automatic saving every 30 seconds
├── Manual snapshots: Create named versions
├── Compare versions: Side-by-side comparison
├── Restore versions: Rollback to previous versions
├── Branch/Fork: Create document variations
├── Merge changes: Combine different versions
└── Export history: Download version history

Change Tracking Display:
~~Deleted text~~ shows removals
++Added text++ shows additions
==Modified text== shows changes

Timeline view shows:
- Who made changes
- When changes were made  
- What was changed
- Comments on changes

Document Title (H1 - only one per document)

Table of Contents (H2)

Introduction (H2)
Brief overview of document purpose

Main Sections (H2)
Subsections (H3)
#### Sub-subsections (H4)

Conclusion (H2)
Summary and next steps

Best Practices:
- Use consistent header hierarchy
- Choose one style for emphasis (* or __)
- Be consistent with list markers (- or )
- Use meaningful link text
- Add alt text to all images
- Keep lines under 80 characters for readability

SEO Best Practices:
- Use descriptive headers with keywords
- Include meta descriptions in frontmatter
- Use descriptive image alt text
- Create meaningful URLs/filenames
- Use internal and external links
- Structure content with proper hierarchy

Accessibility Checklist:
- Provide alt text for images
- Use descriptive link text (not "click here")
- Ensure proper heading hierarchy
- Use high contrast colors in themes
- Test with screen readers
- Provide text alternatives for media

Performance Tips:
- Split very long documents into sections
- Use reference-style links for repeated URLs
- Optimize images before embedding
- Use lazy loading for images
- Minimize inline HTML and CSS
- Consider using external stylesheets

Mobile Best Practices:
- Test preview on mobile devices
- Keep table width reasonable
- Use responsive images
- Avoid horizontal scrolling
- Test touch navigation
- Consider mobile-first design

You can use colored text inline.


Custom styled content block



Collapsible Section
This content is hidden by default and can be expanded.

/ Custom CSS for enhanced styling /
.highlight {
    background-color: yellow;
    padding: 2px 4px;
}

.callout {
    border-left: 4px solid #007acc;
    background-color: #f0f8ff;
    padding: 10px;
    margin: 10px 0;
}

.button {
    background-color: #007acc;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

---
title: "Document Title"
author: "Author Name"
date: "2023-09-01"
tags: ["markdown", "documentation", "guide"]
description: "A comprehensive guide to markdown editing"
keywords: ["markdown", "editor", "writing"]
---

Document content starts here

Plugin Categories:
├── Syntax Extensions: Additional markdown syntax
├── Export Plugins: New export formats
├── Themes: Custom appearance options
├── Productivity: Writing assistance tools
├── Integration: Third-party service connections
├── Security: Enhanced security features
└── Analytics: Document analytics and insights

❌ Problem: Headers not rendering
#Header without space
Header with # in text #problem

✅ Solution: Add space after #
Header with space
Header with proper ending

❌ Problem: Links not working
[Link text](url with spaces)
[Link text](url)missing-closing-parenthesis

✅ Solution: Encode URLs properly
[Link text](url%20with%20encoded%20spaces)
[Link text](url-with-dashes)

❌ Problem: Table not rendering
|Header1|Header2
|Data1|Data2

✅ Solution: Add separator row
Header1
Header2
Data1
Data2

Issues and Solutions:

Issue: Editor becomes slow with large documents
Solution: Enable "Large Document Mode" in settings

Issue: Preview rendering slowly  
Solution: Disable real-time preview for editing

Issue: Export taking too long
Solution: Export in sections or reduce image sizes

Issue: Browser memory usage high
Solution: Clear editor cache and restart browser

Issue: Math expressions not rendering in PDF
Solution: Ensure MathJax/KaTeX is enabled

Issue: Images missing in exported HTML
Solution: Use relative paths or embed images

Issue: Code highlighting lost in Word export
Solution: Use PDF export for preserved formatting

Issue: Tables broken in mobile view
Solution: Use responsive table CSS classes