mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 10:00:17 +05:30
Initial commit: Pan Converter - Cross-platform Markdown editor
This commit is contained in:
+18
@@ -0,0 +1,18 @@
|
||||
node_modules/
|
||||
dist/
|
||||
*.log
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.env
|
||||
.env.local
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.vscode/
|
||||
.idea/
|
||||
*.iml
|
||||
out/
|
||||
.cache/
|
||||
.npm/
|
||||
.electron/
|
||||
package-lock.json
|
||||
@@ -0,0 +1,189 @@
|
||||
# Pan Converter
|
||||
|
||||
## Overview
|
||||
Pan Converter is a cross-platform desktop application for editing and converting Markdown files using Pandoc. It features a rich markdown editor with live preview, multiple themes, and support for exporting to various formats.
|
||||
|
||||
## Features
|
||||
- **Markdown Editor**: Full-featured editor with syntax highlighting
|
||||
- **Live Preview**: Real-time preview of your markdown content
|
||||
- **Multiple Themes**: Light, Dark, Solarized, Monokai, and GitHub themes
|
||||
- **Format Conversion**: Export to HTML, PDF, DOCX, LaTeX, RTF, ODT, and EPUB using Pandoc
|
||||
- **Cross-Platform**: Runs on Windows, macOS, and Linux
|
||||
- **Auto-Save**: Automatic saving every 30 seconds
|
||||
|
||||
## Requirements
|
||||
- **Pandoc**: Must be installed on the system for export functionality
|
||||
- Ubuntu/Debian: `sudo apt-get install pandoc`
|
||||
- macOS: `brew install pandoc`
|
||||
- Windows: Download from https://pandoc.org/installing.html
|
||||
|
||||
## Development Setup
|
||||
|
||||
### Prerequisites
|
||||
- Node.js (v14 or higher)
|
||||
- npm or yarn
|
||||
- Pandoc (for export features)
|
||||
|
||||
### Installation
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone <repository-url>
|
||||
cd pan-converter
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Generate icons
|
||||
npm run generate-icons
|
||||
|
||||
# Start the application
|
||||
npm start
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
### Build for Current Platform
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Build for Specific Platforms
|
||||
```bash
|
||||
# Windows
|
||||
npm run build:win
|
||||
|
||||
# macOS
|
||||
npm run build:mac
|
||||
|
||||
# Linux (generates .deb, .AppImage, and .snap)
|
||||
npm run build:linux
|
||||
```
|
||||
|
||||
### Build for All Platforms
|
||||
```bash
|
||||
npm run dist:all
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
```
|
||||
pan-converter/
|
||||
├── src/
|
||||
│ ├── main.js # Main process
|
||||
│ ├── renderer.js # Renderer process
|
||||
│ ├── index.html # Main window HTML
|
||||
│ └── styles.css # Application styles
|
||||
├── assets/
|
||||
│ ├── icon.svg # Source icon
|
||||
│ └── icon.png # Generated icons
|
||||
├── scripts/
|
||||
│ └── generate-icons.js # Icon generation script
|
||||
├── package.json # Project configuration
|
||||
└── CLAUDE.md # This file
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Main Process (`src/main.js`)
|
||||
- Manages application lifecycle
|
||||
- Creates and manages windows
|
||||
- Handles file operations
|
||||
- Manages menu bar
|
||||
- Communicates with renderer via IPC
|
||||
|
||||
### Renderer Process (`src/renderer.js`)
|
||||
- Handles UI interactions
|
||||
- Manages editor state
|
||||
- Renders markdown preview
|
||||
- Handles theme switching
|
||||
- Communicates with main process via IPC
|
||||
|
||||
### Key Libraries
|
||||
- **Electron**: Desktop application framework
|
||||
- **marked**: Markdown parsing
|
||||
- **highlight.js**: Syntax highlighting
|
||||
- **DOMPurify**: HTML sanitization
|
||||
- **electron-store**: Persistent storage
|
||||
- **electron-builder**: Application packaging
|
||||
|
||||
## Features Implementation
|
||||
|
||||
### Markdown Editor
|
||||
- Uses native textarea with custom styling
|
||||
- Supports common markdown shortcuts via toolbar
|
||||
- Tab key inserts 4 spaces for code indentation
|
||||
- Auto-save every 30 seconds when content changes
|
||||
|
||||
### Live Preview
|
||||
- Updates in real-time as you type
|
||||
- Sanitized HTML output for security
|
||||
- Syntax highlighting for code blocks
|
||||
- GitHub-flavored markdown support
|
||||
|
||||
### Theme System
|
||||
- Themes stored in user preferences
|
||||
- Applied via CSS classes on body element
|
||||
- Persists across application restarts
|
||||
- Five built-in themes
|
||||
|
||||
### Export System
|
||||
- Uses Pandoc command-line tool
|
||||
- Supports multiple output formats
|
||||
- Maintains original file structure
|
||||
- Shows error messages if Pandoc not installed
|
||||
|
||||
## Platform-Specific Branches
|
||||
|
||||
The repository maintains separate branches for platform-specific customizations:
|
||||
- `master`: Main development branch
|
||||
- `linux`: Linux-specific configurations
|
||||
- `macos`: macOS-specific configurations
|
||||
- `windows`: Windows-specific configurations
|
||||
|
||||
## Debian Package
|
||||
|
||||
The application can be built as a `.deb` package for Debian-based systems:
|
||||
```bash
|
||||
npm run build:linux
|
||||
```
|
||||
|
||||
The generated `.deb` file will:
|
||||
- Install to `/opt/pan-converter`
|
||||
- Create desktop entry for application menu
|
||||
- Set up proper file associations
|
||||
- Declare Pandoc as dependency
|
||||
|
||||
## Testing
|
||||
|
||||
### Manual Testing
|
||||
1. File Operations: New, Open, Save, Save As
|
||||
2. Editor Features: Bold, Italic, Headings, Links, Code, Lists, Quotes
|
||||
3. Preview Toggle: Show/hide preview pane
|
||||
4. Theme Switching: Test all five themes
|
||||
5. Export Functions: Test each export format
|
||||
6. Auto-save: Verify 30-second auto-save works
|
||||
|
||||
### Platform Testing
|
||||
Test on:
|
||||
- Windows 10/11
|
||||
- macOS 11+ (Big Sur and later)
|
||||
- Ubuntu 20.04+, Debian 11+
|
||||
|
||||
## Known Issues
|
||||
- ICO and ICNS icons need manual conversion from PNG
|
||||
- Pandoc must be installed separately
|
||||
- Large files may cause performance issues
|
||||
|
||||
## Future Enhancements
|
||||
- [ ] Add spell checking
|
||||
- [ ] Implement find and replace
|
||||
- [ ] Add custom CSS for preview
|
||||
- [ ] Support for markdown extensions
|
||||
- [ ] Plugin system for custom exporters
|
||||
- [ ] Cloud sync capabilities
|
||||
- [ ] Collaborative editing
|
||||
|
||||
## License
|
||||
MIT License
|
||||
|
||||
## Support
|
||||
For issues or feature requests, please open an issue on the GitHub repository.
|
||||
@@ -0,0 +1,95 @@
|
||||
# Push Instructions for Pan Converter
|
||||
|
||||
## Prerequisites
|
||||
1. Create a new repository on GitHub: https://github.com/new
|
||||
- Repository name: `pan-converter`
|
||||
- Keep it empty (no README, .gitignore, or license)
|
||||
- Make it public or private as desired
|
||||
|
||||
2. Set up authentication:
|
||||
- **Option A - SSH Key** (Recommended):
|
||||
```bash
|
||||
# Check if you have SSH key
|
||||
ls -la ~/.ssh/id_rsa.pub
|
||||
|
||||
# If not, generate one:
|
||||
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
|
||||
|
||||
# Add to GitHub: Settings > SSH and GPG keys > New SSH key
|
||||
cat ~/.ssh/id_rsa.pub
|
||||
```
|
||||
|
||||
- **Option B - Personal Access Token**:
|
||||
- Go to GitHub Settings > Developer settings > Personal access tokens
|
||||
- Generate new token with 'repo' scope
|
||||
- Save the token securely
|
||||
|
||||
## Push Commands
|
||||
|
||||
### Using SSH (Recommended)
|
||||
```bash
|
||||
# Set SSH remote
|
||||
git remote set-url origin git@github.com:amitwh/pan-converter.git
|
||||
|
||||
# Push all branches
|
||||
git push -u origin master
|
||||
git push origin linux
|
||||
git push origin macos
|
||||
git push origin windows
|
||||
```
|
||||
|
||||
### Using HTTPS with Token
|
||||
```bash
|
||||
# Set HTTPS remote
|
||||
git remote set-url origin https://github.com/amitwh/pan-converter.git
|
||||
|
||||
# Push all branches (you'll be prompted for username and token)
|
||||
git push -u origin master
|
||||
git push origin linux
|
||||
git push origin macos
|
||||
git push origin windows
|
||||
|
||||
# When prompted:
|
||||
# Username: amitwh
|
||||
# Password: [paste your Personal Access Token]
|
||||
```
|
||||
|
||||
### Using GitHub CLI (if installed)
|
||||
```bash
|
||||
# Login to GitHub CLI
|
||||
gh auth login
|
||||
|
||||
# Create repo and push
|
||||
gh repo create pan-converter --public --source=. --remote=origin --push
|
||||
```
|
||||
|
||||
## Automated Script
|
||||
```bash
|
||||
# Run the provided script
|
||||
./push-to-github.sh
|
||||
```
|
||||
|
||||
## Verify Success
|
||||
After pushing, verify at: https://github.com/amitwh/pan-converter
|
||||
|
||||
You should see:
|
||||
- 4 branches (master, linux, macos, windows)
|
||||
- All project files
|
||||
- Complete commit history
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Authentication Failed
|
||||
- For SSH: Ensure your SSH key is added to GitHub
|
||||
- For HTTPS: Use Personal Access Token, not password
|
||||
- Check token has 'repo' scope
|
||||
|
||||
### Repository Not Found
|
||||
- Ensure repository exists on GitHub
|
||||
- Check spelling: `pan-converter`
|
||||
- Verify you're logged into the correct GitHub account
|
||||
|
||||
### Permission Denied
|
||||
- Check repository ownership
|
||||
- Ensure you have write access
|
||||
- Verify authentication method is correct
|
||||
@@ -0,0 +1,75 @@
|
||||
# Pan Converter
|
||||
|
||||
A cross-platform Markdown editor and converter powered by Pandoc.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- 📝 **Rich Markdown Editor** - Full-featured editor with syntax highlighting
|
||||
- 👁️ **Live Preview** - See your markdown rendered in real-time
|
||||
- 🎨 **Multiple Themes** - Choose from Light, Dark, Solarized, Monokai, or GitHub themes
|
||||
- 📤 **Export to Multiple Formats** - Convert to HTML, PDF, DOCX, LaTeX, RTF, ODT, and EPUB
|
||||
- 💾 **Auto-Save** - Never lose your work with automatic saving
|
||||
- 🖥️ **Cross-Platform** - Works on Windows, macOS, and Linux
|
||||
|
||||
## Installation
|
||||
|
||||
### Prerequisites
|
||||
- [Pandoc](https://pandoc.org/installing.html) must be installed for export functionality
|
||||
|
||||
### Download
|
||||
Download the latest release for your platform from the [Releases](https://github.com/yourusername/pan-converter/releases) page.
|
||||
|
||||
### Install from Source
|
||||
```bash
|
||||
git clone https://github.com/yourusername/pan-converter.git
|
||||
cd pan-converter
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
1. **Write** - Use the editor to write your Markdown content
|
||||
2. **Preview** - Toggle the preview pane to see rendered output
|
||||
3. **Theme** - Choose your preferred theme from the View menu
|
||||
4. **Export** - Export your document to various formats via File > Export
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
- `Ctrl/Cmd + N` - New file
|
||||
- `Ctrl/Cmd + O` - Open file
|
||||
- `Ctrl/Cmd + S` - Save file
|
||||
- `Ctrl/Cmd + Shift + S` - Save as
|
||||
- `Ctrl/Cmd + P` - Toggle preview
|
||||
- `Ctrl/Cmd + Enter` - Toggle preview (alternative)
|
||||
|
||||
## Building
|
||||
|
||||
```bash
|
||||
# Build for current platform
|
||||
npm run build
|
||||
|
||||
# Build for specific platform
|
||||
npm run build:win
|
||||
npm run build:mac
|
||||
npm run build:linux
|
||||
|
||||
# Build for all platforms
|
||||
npm run dist:all
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||
|
||||
## License
|
||||
|
||||
MIT License - see LICENSE file for details
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- Built with [Electron](https://www.electronjs.org/)
|
||||
- Markdown parsing by [marked](https://marked.js.org/)
|
||||
- Export functionality powered by [Pandoc](https://pandoc.org/)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="256" height="256" rx="32" fill="#4A90E2"/>
|
||||
<g transform="translate(40, 40)">
|
||||
<path d="M20 40 L20 136 L80 136 L80 100 L56 100 L56 76 L80 76 L80 40 Z" fill="white" opacity="0.9"/>
|
||||
<path d="M96 40 L96 136 L156 136 L156 100 L132 100 L132 88 L156 88 L156 52 L132 52 L132 40 Z" fill="white" opacity="0.9"/>
|
||||
</g>
|
||||
<text x="128" y="200" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">PAN</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 562 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"name": "pan-converter",
|
||||
"version": "1.0.0",
|
||||
"description": "Cross-platform Markdown editor and converter using Pandoc",
|
||||
"main": "src/main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "electron-builder",
|
||||
"build:win": "electron-builder --win",
|
||||
"build:mac": "electron-builder --mac",
|
||||
"build:linux": "electron-builder --linux",
|
||||
"dist": "electron-builder --publish=never",
|
||||
"dist:all": "electron-builder -mwl",
|
||||
"generate-icons": "node scripts/generate-icons.js"
|
||||
},
|
||||
"keywords": ["markdown", "pandoc", "converter", "editor"],
|
||||
"author": "Your Name",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"electron": "^37.4.0",
|
||||
"electron-builder": "^26.0.12",
|
||||
"sharp": "^0.34.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"codemirror": "^6.0.2",
|
||||
"dompurify": "^3.2.6",
|
||||
"electron-store": "^10.1.0",
|
||||
"highlight.js": "^11.11.1",
|
||||
"marked": "^16.2.1"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.panconverter.app",
|
||||
"productName": "Pan Converter",
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"assets/**/*",
|
||||
"node_modules/**/*",
|
||||
"package.json"
|
||||
],
|
||||
"mac": {
|
||||
"category": "public.app-category.productivity",
|
||||
"icon": "assets/icon.icns"
|
||||
},
|
||||
"win": {
|
||||
"target": "nsis",
|
||||
"icon": "assets/icon.ico"
|
||||
},
|
||||
"linux": {
|
||||
"target": [
|
||||
"deb",
|
||||
"AppImage",
|
||||
"snap"
|
||||
],
|
||||
"category": "Utility",
|
||||
"icon": "assets/icon.png"
|
||||
},
|
||||
"deb": {
|
||||
"depends": [
|
||||
"pandoc"
|
||||
],
|
||||
"description": "Markdown editor and converter using Pandoc",
|
||||
"maintainer": "Your Name <your.email@example.com>"
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+83
@@ -0,0 +1,83 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo "=========================================="
|
||||
echo "Pan Converter - GitHub Push Helper"
|
||||
echo "=========================================="
|
||||
echo ""
|
||||
echo "Before running this script, please ensure:"
|
||||
echo "1. You have created a repository named 'pan-converter' on GitHub"
|
||||
echo "2. The repository is empty (no README, .gitignore, or license)"
|
||||
echo "3. You have set up authentication (SSH key or Personal Access Token)"
|
||||
echo ""
|
||||
read -p "Have you completed the above steps? (y/n): " -n 1 -r
|
||||
echo ""
|
||||
|
||||
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
|
||||
echo "Please complete the setup first:"
|
||||
echo "1. Go to https://github.com/new"
|
||||
echo "2. Create a new repository named 'pan-converter'"
|
||||
echo "3. DO NOT initialize with README, .gitignore, or license"
|
||||
echo "4. Set up SSH key or Personal Access Token for authentication"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "Choose authentication method:"
|
||||
echo "1. SSH (Recommended if you have SSH keys set up)"
|
||||
echo "2. HTTPS (Requires Personal Access Token)"
|
||||
read -p "Enter your choice (1 or 2): " AUTH_CHOICE
|
||||
|
||||
if [ "$AUTH_CHOICE" = "1" ]; then
|
||||
echo "Using SSH authentication..."
|
||||
git remote set-url origin git@github.com:amitwh/pan-converter.git
|
||||
elif [ "$AUTH_CHOICE" = "2" ]; then
|
||||
echo "Using HTTPS authentication..."
|
||||
echo "You'll need to enter your GitHub username and Personal Access Token"
|
||||
git remote set-url origin https://github.com/amitwh/pan-converter.git
|
||||
else
|
||||
echo "Invalid choice. Exiting."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "Pushing branches to GitHub..."
|
||||
echo "=============================="
|
||||
|
||||
# Push master branch with upstream tracking
|
||||
echo "Pushing master branch..."
|
||||
if git push -u origin master; then
|
||||
echo "✓ Master branch pushed successfully"
|
||||
else
|
||||
echo "✗ Failed to push master branch"
|
||||
echo "Please check your authentication and try again"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Push other branches
|
||||
echo "Pushing linux branch..."
|
||||
if git push origin linux; then
|
||||
echo "✓ Linux branch pushed successfully"
|
||||
else
|
||||
echo "✗ Failed to push linux branch"
|
||||
fi
|
||||
|
||||
echo "Pushing macos branch..."
|
||||
if git push origin macos; then
|
||||
echo "✓ macOS branch pushed successfully"
|
||||
else
|
||||
echo "✗ Failed to push macos branch"
|
||||
fi
|
||||
|
||||
echo "Pushing windows branch..."
|
||||
if git push origin windows; then
|
||||
echo "✓ Windows branch pushed successfully"
|
||||
else
|
||||
echo "✗ Failed to push windows branch"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "=========================================="
|
||||
echo "Push complete!"
|
||||
echo "Your repository is available at:"
|
||||
echo "https://github.com/amitwh/pan-converter"
|
||||
echo "=========================================="
|
||||
@@ -0,0 +1,43 @@
|
||||
const sharp = require('sharp');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const sizes = {
|
||||
'icon.png': 512,
|
||||
'icon@2x.png': 1024,
|
||||
'icon.ico': 256,
|
||||
'icon.icns': 512
|
||||
};
|
||||
|
||||
const svgPath = path.join(__dirname, '..', 'assets', 'icon.svg');
|
||||
const svgBuffer = fs.readFileSync(svgPath);
|
||||
|
||||
async function generateIcons() {
|
||||
for (const [filename, size] of Object.entries(sizes)) {
|
||||
const outputPath = path.join(__dirname, '..', 'assets', filename);
|
||||
|
||||
if (filename.endsWith('.png')) {
|
||||
await sharp(svgBuffer)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toFile(outputPath);
|
||||
console.log(`Generated ${filename}`);
|
||||
} else if (filename.endsWith('.ico')) {
|
||||
// For ICO, we'll just use the PNG version
|
||||
await sharp(svgBuffer)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toFile(outputPath.replace('.ico', '.png'));
|
||||
console.log(`Generated ${filename.replace('.ico', '.png')} (use png2ico to convert)`);
|
||||
} else if (filename.endsWith('.icns')) {
|
||||
// For ICNS, we'll just use the PNG version
|
||||
await sharp(svgBuffer)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toFile(outputPath.replace('.icns', '.png'));
|
||||
console.log(`Generated ${filename.replace('.icns', '.png')} (use png2icns to convert)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
generateIcons().catch(console.error);
|
||||
Executable
+37
@@ -0,0 +1,37 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Pan Converter - Git Remote Setup Script
|
||||
#
|
||||
# Instructions:
|
||||
# 1. Create a new repository on GitHub named "pan-converter"
|
||||
# 2. Replace YOUR_GITHUB_USERNAME with your actual GitHub username
|
||||
# 3. Run this script: bash setup-upstream.sh
|
||||
|
||||
GITHUB_USERNAME="amitwh"
|
||||
REPO_NAME="pan-converter"
|
||||
|
||||
echo "Setting up remote repository..."
|
||||
|
||||
# Add remote origin
|
||||
git remote add origin "https://github.com/$GITHUB_USERNAME/$REPO_NAME.git"
|
||||
|
||||
echo "Pushing all branches to remote..."
|
||||
|
||||
# Push master branch
|
||||
git push -u origin master
|
||||
|
||||
# Push platform-specific branches
|
||||
git push origin linux
|
||||
git push origin macos
|
||||
git push origin windows
|
||||
|
||||
echo "Repository setup complete!"
|
||||
echo ""
|
||||
echo "Your repository is now available at:"
|
||||
echo "https://github.com/$GITHUB_USERNAME/$REPO_NAME"
|
||||
echo ""
|
||||
echo "Branch structure:"
|
||||
echo " - master (main development)"
|
||||
echo " - linux (Linux-specific)"
|
||||
echo " - macos (macOS-specific)"
|
||||
echo " - windows (Windows-specific)"
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pan Converter - Markdown Editor</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="toolbar">
|
||||
<button id="btn-bold" title="Bold">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
|
||||
<path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-italic" title="Italic">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="19" y1="4" x2="10" y2="4"></line>
|
||||
<line x1="14" y1="20" x2="5" y2="20"></line>
|
||||
<line x1="15" y1="4" x2="9" y2="20"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-heading" title="Heading">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="4 7 4 4 20 4 20 7"></polyline>
|
||||
<line x1="9" y1="20" x2="15" y2="20"></line>
|
||||
<line x1="12" y1="4" x2="12" y2="20"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-link" title="Link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-code" title="Code">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 18 22 12 16 6"></polyline>
|
||||
<polyline points="8 6 2 12 8 18"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-list" title="List">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="8" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="8" y1="18" x2="21" y2="18"></line>
|
||||
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
||||
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
||||
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-quote" title="Quote">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
|
||||
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-separator"></div>
|
||||
<button id="btn-preview-toggle" title="Toggle Preview">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-container">
|
||||
<div id="editor-pane" class="pane">
|
||||
<textarea id="editor"></textarea>
|
||||
</div>
|
||||
<div id="preview-pane" class="pane">
|
||||
<div id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">
|
||||
<span id="status-text">Ready</span>
|
||||
<span id="word-count">Words: 0 | Characters: 0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+242
@@ -0,0 +1,242 @@
|
||||
const { app, BrowserWindow, Menu, dialog, ipcMain, shell } = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { exec } = require('child_process');
|
||||
const Store = require('electron-store');
|
||||
|
||||
const store = new Store();
|
||||
|
||||
let mainWindow;
|
||||
let currentFile = null;
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
},
|
||||
icon: path.join(__dirname, '../assets/icon.png')
|
||||
});
|
||||
|
||||
mainWindow.loadFile(path.join(__dirname, 'index.html'));
|
||||
|
||||
createMenu();
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
function createMenu() {
|
||||
const template = [
|
||||
{
|
||||
label: 'File',
|
||||
submenu: [
|
||||
{
|
||||
label: 'New',
|
||||
accelerator: 'CmdOrCtrl+N',
|
||||
click: () => mainWindow.webContents.send('file-new')
|
||||
},
|
||||
{
|
||||
label: 'Open',
|
||||
accelerator: 'CmdOrCtrl+O',
|
||||
click: openFile
|
||||
},
|
||||
{
|
||||
label: 'Save',
|
||||
accelerator: 'CmdOrCtrl+S',
|
||||
click: () => mainWindow.webContents.send('file-save')
|
||||
},
|
||||
{
|
||||
label: 'Save As',
|
||||
accelerator: 'CmdOrCtrl+Shift+S',
|
||||
click: saveAsFile
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Export',
|
||||
submenu: [
|
||||
{ label: 'HTML', click: () => exportFile('html') },
|
||||
{ label: 'PDF', click: () => exportFile('pdf') },
|
||||
{ label: 'DOCX', click: () => exportFile('docx') },
|
||||
{ label: 'LaTeX', click: () => exportFile('latex') },
|
||||
{ label: 'RTF', click: () => exportFile('rtf') },
|
||||
{ label: 'ODT', click: () => exportFile('odt') },
|
||||
{ label: 'EPUB', click: () => exportFile('epub') }
|
||||
]
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Quit',
|
||||
accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
|
||||
click: () => app.quit()
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
{ label: 'Undo', accelerator: 'CmdOrCtrl+Z', role: 'undo' },
|
||||
{ label: 'Redo', accelerator: 'CmdOrCtrl+Y', role: 'redo' },
|
||||
{ type: 'separator' },
|
||||
{ label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
|
||||
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
|
||||
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
|
||||
{ label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'View',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Toggle Preview',
|
||||
accelerator: 'CmdOrCtrl+P',
|
||||
click: () => mainWindow.webContents.send('toggle-preview')
|
||||
},
|
||||
{
|
||||
label: 'Theme',
|
||||
submenu: [
|
||||
{ label: 'Light', click: () => setTheme('light') },
|
||||
{ label: 'Dark', click: () => setTheme('dark') },
|
||||
{ label: 'Solarized', click: () => setTheme('solarized') },
|
||||
{ label: 'Monokai', click: () => setTheme('monokai') },
|
||||
{ label: 'GitHub', click: () => setTheme('github') }
|
||||
]
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{ label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
|
||||
{ label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
|
||||
{ type: 'separator' },
|
||||
{ label: 'Zoom In', accelerator: 'CmdOrCtrl+Plus', role: 'zoomIn' },
|
||||
{ label: 'Zoom Out', accelerator: 'CmdOrCtrl+-', role: 'zoomOut' },
|
||||
{ label: 'Reset Zoom', accelerator: 'CmdOrCtrl+0', role: 'resetZoom' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Help',
|
||||
submenu: [
|
||||
{
|
||||
label: 'About',
|
||||
click: () => {
|
||||
dialog.showMessageBox(mainWindow, {
|
||||
type: 'info',
|
||||
title: 'About Pan Converter',
|
||||
message: 'Pan Converter',
|
||||
detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.0.0\nLicense: MIT',
|
||||
buttons: ['OK']
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Documentation',
|
||||
click: () => shell.openExternal('https://github.com/yourusername/pan-converter')
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const menu = Menu.buildFromTemplate(template);
|
||||
Menu.setApplicationMenu(menu);
|
||||
}
|
||||
|
||||
function openFile() {
|
||||
const files = dialog.showOpenDialogSync(mainWindow, {
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{ name: 'Markdown', extensions: ['md', 'markdown'] },
|
||||
{ name: 'All Files', extensions: ['*'] }
|
||||
]
|
||||
});
|
||||
|
||||
if (files && files[0]) {
|
||||
currentFile = files[0];
|
||||
const content = fs.readFileSync(currentFile, 'utf-8');
|
||||
mainWindow.webContents.send('file-opened', { path: currentFile, content });
|
||||
}
|
||||
}
|
||||
|
||||
function saveAsFile() {
|
||||
const file = dialog.showSaveDialogSync(mainWindow, {
|
||||
defaultExt: '.md',
|
||||
filters: [
|
||||
{ name: 'Markdown', extensions: ['md', 'markdown'] },
|
||||
{ name: 'All Files', extensions: ['*'] }
|
||||
]
|
||||
});
|
||||
|
||||
if (file) {
|
||||
currentFile = file;
|
||||
mainWindow.webContents.send('get-content-for-save', file);
|
||||
}
|
||||
}
|
||||
|
||||
function exportFile(format) {
|
||||
if (!currentFile) {
|
||||
dialog.showErrorBox('Error', 'Please save the file first');
|
||||
return;
|
||||
}
|
||||
|
||||
const outputFile = dialog.showSaveDialogSync(mainWindow, {
|
||||
defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
|
||||
filters: [
|
||||
{ name: format.toUpperCase(), extensions: [format] }
|
||||
]
|
||||
});
|
||||
|
||||
if (outputFile) {
|
||||
const pandocCmd = `pandoc "${currentFile}" -o "${outputFile}"`;
|
||||
|
||||
exec(pandocCmd, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
dialog.showErrorBox('Export Error', `Failed to export: ${error.message}\n\nMake sure Pandoc is installed.`);
|
||||
} else {
|
||||
dialog.showMessageBox(mainWindow, {
|
||||
type: 'info',
|
||||
title: 'Export Complete',
|
||||
message: `File exported successfully to ${outputFile}`,
|
||||
buttons: ['OK']
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
store.set('theme', theme);
|
||||
mainWindow.webContents.send('theme-changed', theme);
|
||||
}
|
||||
|
||||
// IPC handlers
|
||||
ipcMain.on('save-file', (event, { path, content }) => {
|
||||
fs.writeFileSync(path, content, 'utf-8');
|
||||
currentFile = path;
|
||||
});
|
||||
|
||||
ipcMain.on('save-current-file', (event, content) => {
|
||||
if (currentFile) {
|
||||
fs.writeFileSync(currentFile, content, 'utf-8');
|
||||
} else {
|
||||
saveAsFile();
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('get-theme', (event) => {
|
||||
const theme = store.get('theme', 'light');
|
||||
event.reply('theme-changed', theme);
|
||||
});
|
||||
|
||||
app.whenReady().then(createWindow);
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
+218
@@ -0,0 +1,218 @@
|
||||
const { ipcRenderer } = require('electron');
|
||||
const marked = require('marked');
|
||||
const DOMPurify = require('dompurify');
|
||||
const hljs = require('highlight.js');
|
||||
|
||||
// Configure marked
|
||||
marked.setOptions({
|
||||
highlight: function(code, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return hljs.highlight(code, { language: lang }).value;
|
||||
} catch (err) {}
|
||||
}
|
||||
return hljs.highlightAuto(code).value;
|
||||
},
|
||||
breaks: true,
|
||||
gfm: true
|
||||
});
|
||||
|
||||
// Elements
|
||||
const editor = document.getElementById('editor');
|
||||
const preview = document.getElementById('preview');
|
||||
const previewPane = document.getElementById('preview-pane');
|
||||
const editorPane = document.getElementById('editor-pane');
|
||||
const statusText = document.getElementById('status-text');
|
||||
const wordCount = document.getElementById('word-count');
|
||||
|
||||
// State
|
||||
let isPreviewVisible = true;
|
||||
let currentContent = '';
|
||||
let isDirty = false;
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Request current theme
|
||||
ipcRenderer.send('get-theme');
|
||||
|
||||
// Set up auto-save interval
|
||||
setInterval(autoSave, 30000); // Auto-save every 30 seconds
|
||||
|
||||
// Initialize with empty content
|
||||
updatePreview();
|
||||
updateWordCount();
|
||||
});
|
||||
|
||||
// Editor input handler
|
||||
editor.addEventListener('input', () => {
|
||||
currentContent = editor.value;
|
||||
isDirty = true;
|
||||
updatePreview();
|
||||
updateWordCount();
|
||||
updateStatus('Modified');
|
||||
});
|
||||
|
||||
// Toolbar button handlers
|
||||
document.getElementById('btn-bold').addEventListener('click', () => insertMarkdown('**', '**'));
|
||||
document.getElementById('btn-italic').addEventListener('click', () => insertMarkdown('*', '*'));
|
||||
document.getElementById('btn-heading').addEventListener('click', () => insertMarkdown('## ', ''));
|
||||
document.getElementById('btn-link').addEventListener('click', () => insertMarkdown('[', '](url)'));
|
||||
document.getElementById('btn-code').addEventListener('click', () => insertMarkdown('`', '`'));
|
||||
document.getElementById('btn-list').addEventListener('click', () => insertMarkdown('- ', ''));
|
||||
document.getElementById('btn-quote').addEventListener('click', () => insertMarkdown('> ', ''));
|
||||
document.getElementById('btn-preview-toggle').addEventListener('click', togglePreview);
|
||||
|
||||
// Markdown insertion helper
|
||||
function insertMarkdown(before, after) {
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const selectedText = editor.value.substring(start, end);
|
||||
const replacement = before + (selectedText || 'text') + after;
|
||||
|
||||
editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end);
|
||||
|
||||
// Set cursor position
|
||||
if (selectedText) {
|
||||
editor.selectionStart = start;
|
||||
editor.selectionEnd = start + replacement.length;
|
||||
} else {
|
||||
editor.selectionStart = start + before.length;
|
||||
editor.selectionEnd = start + before.length + 4; // Select "text"
|
||||
}
|
||||
|
||||
editor.focus();
|
||||
|
||||
// Trigger input event
|
||||
editor.dispatchEvent(new Event('input'));
|
||||
}
|
||||
|
||||
// Update preview
|
||||
function updatePreview() {
|
||||
const html = marked.parse(editor.value);
|
||||
const clean = DOMPurify.sanitize(html);
|
||||
preview.innerHTML = clean;
|
||||
|
||||
// Re-highlight code blocks
|
||||
preview.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle preview visibility
|
||||
function togglePreview() {
|
||||
isPreviewVisible = !isPreviewVisible;
|
||||
|
||||
if (isPreviewVisible) {
|
||||
previewPane.classList.remove('hidden');
|
||||
editorPane.classList.remove('full-width');
|
||||
} else {
|
||||
previewPane.classList.add('hidden');
|
||||
editorPane.classList.add('full-width');
|
||||
}
|
||||
}
|
||||
|
||||
// Update word count
|
||||
function updateWordCount() {
|
||||
const text = editor.value;
|
||||
const words = text.trim() ? text.trim().split(/\s+/).length : 0;
|
||||
const chars = text.length;
|
||||
wordCount.textContent = `Words: ${words} | Characters: ${chars}`;
|
||||
}
|
||||
|
||||
// Update status
|
||||
function updateStatus(text) {
|
||||
statusText.textContent = text;
|
||||
}
|
||||
|
||||
// Auto-save function
|
||||
function autoSave() {
|
||||
if (isDirty && currentContent) {
|
||||
ipcRenderer.send('save-current-file', currentContent);
|
||||
isDirty = false;
|
||||
updateStatus('Auto-saved');
|
||||
setTimeout(() => updateStatus('Ready'), 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// IPC event handlers
|
||||
ipcRenderer.on('file-new', () => {
|
||||
if (isDirty) {
|
||||
if (confirm('You have unsaved changes. Do you want to continue?')) {
|
||||
editor.value = '';
|
||||
currentContent = '';
|
||||
isDirty = false;
|
||||
updatePreview();
|
||||
updateWordCount();
|
||||
updateStatus('New file');
|
||||
}
|
||||
} else {
|
||||
editor.value = '';
|
||||
currentContent = '';
|
||||
updatePreview();
|
||||
updateWordCount();
|
||||
updateStatus('New file');
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on('file-opened', (event, { path, content }) => {
|
||||
editor.value = content;
|
||||
currentContent = content;
|
||||
isDirty = false;
|
||||
updatePreview();
|
||||
updateWordCount();
|
||||
updateStatus(`Opened: ${path}`);
|
||||
});
|
||||
|
||||
ipcRenderer.on('file-save', () => {
|
||||
ipcRenderer.send('save-current-file', editor.value);
|
||||
isDirty = false;
|
||||
updateStatus('Saved');
|
||||
});
|
||||
|
||||
ipcRenderer.on('get-content-for-save', (event, path) => {
|
||||
ipcRenderer.send('save-file', { path, content: editor.value });
|
||||
isDirty = false;
|
||||
updateStatus(`Saved: ${path}`);
|
||||
});
|
||||
|
||||
ipcRenderer.on('toggle-preview', () => {
|
||||
togglePreview();
|
||||
});
|
||||
|
||||
ipcRenderer.on('theme-changed', (event, theme) => {
|
||||
// Remove all theme classes
|
||||
document.body.classList.remove('theme-light', 'theme-dark', 'theme-solarized', 'theme-monokai', 'theme-github');
|
||||
|
||||
// Add new theme class
|
||||
if (theme !== 'light') {
|
||||
document.body.classList.add(`theme-${theme}`);
|
||||
}
|
||||
|
||||
updateStatus(`Theme: ${theme}`);
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl/Cmd + Enter to toggle preview
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
togglePreview();
|
||||
}
|
||||
|
||||
// Tab key in editor
|
||||
if (e.key === 'Tab' && e.target === editor) {
|
||||
e.preventDefault();
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
|
||||
editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end);
|
||||
editor.selectionStart = editor.selectionEnd = start + 4;
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent accidental navigation
|
||||
window.addEventListener('beforeunload', (e) => {
|
||||
if (isDirty) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
});
|
||||
+462
@@ -0,0 +1,462 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
background: #e0e0e0;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.toolbar button:active {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.toolbar-separator {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #ccc;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* Editor Container */
|
||||
.editor-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pane {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#editor-pane {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
font-family: 'SF Mono', Monaco, 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#preview-pane {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#preview {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px;
|
||||
background: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Preview Styles */
|
||||
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
#preview h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
#preview h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
#preview p {
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#preview code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27,31,35,0.05);
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', Monaco, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
#preview pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#preview pre code {
|
||||
display: inline;
|
||||
max-width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#preview blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#preview ul, #preview ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#preview li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#preview a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#preview a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#preview img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#preview table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#preview table th,
|
||||
#preview table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
#preview table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
#preview table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
/* Theme: Dark */
|
||||
body.theme-dark {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
body.theme-dark .toolbar {
|
||||
background: #2d2d30;
|
||||
border-bottom-color: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark .toolbar button {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
body.theme-dark .toolbar button:hover {
|
||||
background: #3e3e42;
|
||||
border-color: #464647;
|
||||
}
|
||||
|
||||
body.theme-dark .toolbar-separator {
|
||||
background: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark #editor-pane {
|
||||
border-right-color: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark #editor {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
body.theme-dark #preview-pane {
|
||||
background: #252526;
|
||||
}
|
||||
|
||||
body.theme-dark #preview {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
body.theme-dark #preview h1,
|
||||
body.theme-dark #preview h2 {
|
||||
border-bottom-color: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark #preview code {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
body.theme-dark #preview pre {
|
||||
background-color: #2d2d30;
|
||||
}
|
||||
|
||||
body.theme-dark #preview blockquote {
|
||||
color: #808080;
|
||||
border-left-color: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark #preview a {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
body.theme-dark #preview table th,
|
||||
body.theme-dark #preview table td {
|
||||
border-color: #3e3e42;
|
||||
}
|
||||
|
||||
body.theme-dark #preview table th {
|
||||
background-color: #2d2d30;
|
||||
}
|
||||
|
||||
body.theme-dark #preview table tr:nth-child(2n) {
|
||||
background-color: #2d2d30;
|
||||
}
|
||||
|
||||
body.theme-dark .status-bar {
|
||||
background: #2d2d30;
|
||||
border-top-color: #3e3e42;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
/* Theme: Solarized */
|
||||
body.theme-solarized {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
body.theme-solarized .toolbar {
|
||||
background: #eee8d5;
|
||||
border-bottom-color: #93a1a1;
|
||||
}
|
||||
|
||||
body.theme-solarized .toolbar button {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
body.theme-solarized .toolbar button:hover {
|
||||
background: #fdf6e3;
|
||||
border-color: #93a1a1;
|
||||
}
|
||||
|
||||
body.theme-solarized #editor {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
body.theme-solarized #preview {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
body.theme-solarized #preview code {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
|
||||
body.theme-solarized #preview pre {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
|
||||
body.theme-solarized #preview a {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Theme: Monokai */
|
||||
body.theme-monokai {
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
body.theme-monokai .toolbar {
|
||||
background: #3e3d32;
|
||||
border-bottom-color: #75715e;
|
||||
}
|
||||
|
||||
body.theme-monokai .toolbar button {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
body.theme-monokai .toolbar button:hover {
|
||||
background: #49483e;
|
||||
border-color: #75715e;
|
||||
}
|
||||
|
||||
body.theme-monokai #editor {
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview-pane {
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview h1,
|
||||
body.theme-monokai #preview h2 {
|
||||
border-bottom-color: #75715e;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview code {
|
||||
background-color: #3e3d32;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview pre {
|
||||
background-color: #3e3d32;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview blockquote {
|
||||
color: #75715e;
|
||||
border-left-color: #75715e;
|
||||
}
|
||||
|
||||
body.theme-monokai #preview a {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
body.theme-monokai .status-bar {
|
||||
background: #3e3d32;
|
||||
border-top-color: #75715e;
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* Theme: GitHub */
|
||||
body.theme-github {
|
||||
background: #fff;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
body.theme-github .toolbar {
|
||||
background: #fafbfc;
|
||||
border-bottom-color: #e1e4e8;
|
||||
}
|
||||
|
||||
body.theme-github .toolbar button {
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
body.theme-github .toolbar button:hover {
|
||||
background: #f6f8fa;
|
||||
border-color: #e1e4e8;
|
||||
}
|
||||
|
||||
body.theme-github #editor {
|
||||
background: #fff;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
body.theme-github #preview {
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
body.theme-github #preview h1,
|
||||
body.theme-github #preview h2 {
|
||||
border-bottom-color: #eaecef;
|
||||
}
|
||||
|
||||
body.theme-github #preview code {
|
||||
background-color: rgba(27,31,35,0.05);
|
||||
}
|
||||
|
||||
body.theme-github #preview pre {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
body.theme-github #preview blockquote {
|
||||
color: #6a737d;
|
||||
border-left-color: #dfe2e5;
|
||||
}
|
||||
|
||||
body.theme-github #preview a {
|
||||
color: #0366d6;
|
||||
}
|
||||
|
||||
body.theme-github .status-bar {
|
||||
background: #fafbfc;
|
||||
border-top-color: #e1e4e8;
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
/* Hide preview pane by default */
|
||||
#preview-pane.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor-pane.full-width {
|
||||
border-right: none;
|
||||
}
|
||||
Reference in New Issue
Block a user