mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
Initial commit: Pan Converter - Cross-platform Markdown editor
This commit is contained in:
@@ -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