Download script.js from grimshaw/markdown-to-magic-slides: direct link, hf CLI and curl.
- Browser
- Download file 3.3 kB
-
https://huggingface.co/spaces/grimshaw/markdown-to-magic-slides/resolve/main/script.js
- Command line
-
hf download hf://spaces/grimshaw/markdown-to-magic-slides/script.js
-
curl -L -o script.js https://huggingface.co/spaces/grimshaw/markdown-to-magic-slides/resolve/main/script.js
3.3 kB
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample markdown content | |
| const sampleMarkdown = `# Welcome to Markdown Slides | |
| ## Create Beautiful Presentations | |
| - Write in simple markdown | |
| - Generate professional slides | |
| - Export to PowerPoint | |
| --- | |
| ## Features | |
| 1. **Easy to Use** - Just write markdown | |
| 2. **Powerful** - Supports all markdown features | |
| 3. **Flexible** - Customize your slides | |
| --- | |
| ## Get Started | |
| \`\`\`markdown | |
| # Slide Title | |
| - Bullet point 1 | |
| - Bullet point 2 | |
| \`\`\` | |
| `; | |
| // DOM Elements | |
| const markdownInput = document.getElementById('markdown-input'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const exportBtn = document.getElementById('export-btn'); | |
| const slidesPreview = document.getElementById('slides-preview'); | |
| const sampleBtn = document.getElementById('sample-btn'); | |
| // Load sample markdown | |
| sampleBtn.addEventListener('click', () => { | |
| markdownInput.value = sampleMarkdown; | |
| generateSlides(); | |
| }); | |
| // Generate slides from markdown | |
| generateBtn.addEventListener('click', generateSlides); | |
| // Export to PPTX | |
| exportBtn.addEventListener('click', exportToPPTX); | |
| function generateSlides() { | |
| const markdown = markdownInput.value.trim(); | |
| if (!markdown) return; | |
| // Split markdown by slide separators (---) | |
| const slides = markdown.split(/\n---\n/); | |
| let html = ''; | |
| slides.forEach((slide, index) => { | |
| const content = marked.parse(slide); | |
| html += ` | |
| <div class="slide"> | |
| <div class="slide-title">Slide ${index + 1}</div> | |
| <div class="slide-content">${content}</div> | |
| </div> | |
| `; | |
| }); | |
| slidesPreview.innerHTML = html; | |
| exportBtn.disabled = false; | |
| } | |
| function exportToPPTX() { | |
| const markdown = markdownInput.value.trim(); | |
| if (!markdown) return; | |
| const slides = markdown.split(/\n---\n/); | |
| const pptx = new PptxGenJS(); | |
| slides.forEach(slide => { | |
| const content = marked.parse(slide); | |
| // Create a new slide | |
| const pptxSlide = pptx.addSlide(); | |
| // Extract title (first line) | |
| const lines = slide.split('\n'); | |
| const title = lines[0].replace(/^#\s+/, ''); | |
| // Add title and content | |
| pptxSlide.addText(title, { | |
| x: 0.5, y: 0.5, w: 9, h: 1, | |
| fontSize: 24, | |
| bold: true, | |
| color: '4F46E5' | |
| }); | |
| // Add content (remove title from content) | |
| const contentWithoutTitle = lines.slice(1).join('\n'); | |
| const htmlContent = marked.parse(contentWithoutTitle); | |
| pptxSlide.addText(htmlContent, { | |
| x: 0.5, y: 1.5, w: 9, h: 5, | |
| fontSize: 18, | |
| color: '4B5563' | |
| }); | |
| }); | |
| // Download the presentation | |
| pptx.writeFile({ fileName: 'MarkdownSlides.pptx' }); | |
| } | |
| // Initialize with sample if empty | |
| if (!markdownInput.value) { | |
| markdownInput.value = sampleMarkdown; | |
| generateSlides(); | |
| } | |
| }); |