Markdown Editor

● Unsaved6985 chars

Editor

# Welcome to the Markdown Editor

This editor showcases all the rich content features supported by our custom markdown processor, including math rendering, image galleries, code highlighting, and more!

## Features Summary

This editor supports:
- ✅ **Basic Markdown**: Headers, lists, tables, blockquotes, task lists
- ✅ **Code Highlighting**: Python, TypeScript, JavaScript/React, Bash, SQL, and more
- ✅ **Math Rendering**: LaTeX inline and display equations with MathJax
- ✅ **Image Galleries**: Both simple and with individual captions
- ✅ **URL Preview Cards**: Rich link previews with metadata
- ✅ **Embedded Content**: YouTube, Google Maps, CodePen, and other iframes
- ✅ **Auto-save**: Content saved to browser localStorage
- ✅ **Live Preview**: Real-time rendering with auto-refresh option
- ✅ **Export**: Download as .md file

## Basic Markdown

**Bold text**, *italic text*, and ~~strikethrough text~~.

### Lists

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

### Numbered Lists

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

### Tables

| Feature | Support | Notes |
|---------|---------|-------|
| Math (LaTeX) | ✅ | Both inline and display |
| Image Galleries | ✅ | Using triple colon syntax |
| Code Highlighting | ✅ | Multiple languages |
| Tables | ✅ | GitHub Flavored Markdown |

### Blockquotes

> "The only way to do great work is to love what you do."
> — Steve Jobs

### Task Lists

- [x] Support basic markdown
- [x] Add math rendering
- [x] Implement code highlighting
- [ ] Add more features
- [ ] Create documentation

## Code Highlighting

The editor supports syntax highlighting for many programming languages:

### Python
```python
def fibonacci(n):
    """Generate Fibonacci sequence up to n terms."""
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# Generate first 10 Fibonacci numbers
for num in fibonacci(10):
    print(num, end=' ')
```

### TypeScript
```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
```

### JavaScript/React
```jsx
const BlogPost = ({ post }) => {
  const [isLiked, setIsLiked] = useState(false);
  
  const handleLike = async () => {
    setIsLiked(!isLiked);
    await fetch(`/api/posts/${post.id}/like`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ liked: !isLiked })
    });
  };

return (
    <article className="bg-white rounded-lg shadow-md p-6">
      <h2>{post.title}</h2>
      <button onClick={handleLike}>
        {isLiked ? '❤️' : '🤍'} Like
      </button>
    </article>
  );
};
```

### Bash/Shell
```bash
#!/bin/bash

# Deployment script
DEPLOY_ENV=${1:-staging}

log() {
    echo "[$(date +'%Y-%m-%d %H:%M:%S')] $1"
}

deploy() {
    log "Starting deployment to ${DEPLOY_ENV}"
    npm ci --production
    npm run build
    npm run migrate
    sudo systemctl restart nginx
    log "Deployment completed!"
}

deploy
```

### SQL
```sql
SELECT users.name, COUNT(posts.id) as post_count
FROM users
LEFT JOIN posts ON users.id = posts.user_id
WHERE users.active = true
GROUP BY users.id, users.name
ORDER BY post_count DESC;
```

## Math Rendering (LaTeX)

You can write mathematical expressions using LaTeX syntax:

### Inline Math
- Einstein's equation: $E = mc^2$
- Quadratic formula: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
- Probability notation: $P(A|B) = \frac{P(B|A)P(A)}{P(B)}$

### Display Math

**Basic Equations:**
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

**Machine Learning Loss Function:**
$$
\mathcal{L}(\theta) = \frac{1}{m} \sum_{i=1}^{m} \left( h_\theta(x^{(i)}) - y^{(i)} \right)^2
$$

**Attention Mechanism:**
$$
\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
$$

**Maxwell's Equations:**
$$
\begin{align}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}
\end{align}
$$

## Image Galleries

Create beautiful image galleries using triple colon blocks:

### Simple Gallery
:::gallery
images=[
  {"src": "/images/blog_imports/italy-trip/0_DSC03310.jpg", "alt": "Spanish Steps"},
  {"src": "/images/blog_imports/italy-trip/6_DSC03576-2.jpg", "alt": "Colosseum"},
  {"src": "/images/blog_imports/italy-trip/23_DSC04279-2.jpg", "alt": "Cinque Terre sunset"}
]
caption="Beautiful moments from our Italy trip"
:::

### Gallery with Individual Captions
:::gallery
images=[
  {"src": "/images/blog_imports/italy-trip/26_DSC04078.jpg", "alt": "Vernazza harbor", "caption": "The charming harbor of Vernazza"},
  {"src": "/images/blog_imports/italy-trip/30_DSC04375.jpg", "alt": "Florence food market", "caption": "Local specialties at Mercato Centrale"},
  {"src": "/images/blog_imports/italy-trip/50_DSC05873.jpg", "alt": "Venice canal", "caption": "A quiet canal in Venice"}
]
caption="Each image can have its own detailed caption"
:::

## URL Preview Cards

Create rich link previews with Open Graph metadata:

:::link-preview
url="https://nextjs.org"
title="Next.js - The React Framework for Production"
description="Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more."
thumbnail="https://nextjs.org/static/favicon/favicon-32x32.png"
:::

:::link-preview
url="https://github.com/vercel/next.js"
title="vercel/next.js: The React Framework"
description="The React Framework. Contribute to vercel/next.js development by creating an account on GitHub."
thumbnail="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
:::

## Embedded Content (iframes)

You can embed videos, maps, and other external content:

### YouTube Video
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### Google Maps
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.309!2d-74.0059!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDBCMCc0Ni4xIk4gNzTCsDAyJzEwLjMiVw!5e0!3m2!1sen!2sus!4v1234567890" width="600" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

### CodePen Example
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Demo" src="https://codepen.io/rudtjd2548/embed/mdjWjaP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

---

**Start editing above to create your own content!** Your work is automatically saved to your browser's local storage.

Preview

Auto-refresh

Preview will auto-update as you type...