mdv-live 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/rendering/marp.js

@@ -7,12 +7,21 @@
 
 import { Marp } from '@marp-team/marp-core';
 
-// Initialize Marp with options
+// Initialize Marp with full HTML support
 const marp = new Marp({
   html: true,
-  math: true,  // Enable KaTeX math
+  math: true,
+  markdown: {
+    html: true,
+    breaks: false,
+    linkify: true,
+  }
 });
 
+// Disable indented code blocks (4-space indent → code)
+// This allows HTML with indentation to render properly
+marp.markdown.disable('code');
+
 /**
  * Render Marp presentation to HTML
  * @param {string} content - Markdown content with Marp frontmatter

package/src/rendering/slides.js

@@ -0,0 +1,152 @@
+/**
+ * Simple slide renderer for Marp-compatible markdown
+ *
+ * Features:
+ * - Split by --- (horizontal rule)
+ * - Full HTML support (no escaping)
+ * - Tailwind CSS compatible
+ * - Frontmatter extraction
+ */
+
+import MarkdownIt from 'markdown-it';
+
+// Initialize markdown-it with full HTML support
+const md = new MarkdownIt({
+  html: true,
+  breaks: false,
+  linkify: true,
+  typographer: true
+});
+
+/**
+ * Parse frontmatter from markdown content
+ * @param {string} content - Raw markdown
+ * @returns {{ frontmatter: object, body: string }}
+ */
+function parseFrontmatter(content) {
+  const match = content.match(/^---\s*\n([\s\S]*?)\n---\s*\n/);
+  if (!match) {
+    return { frontmatter: {}, body: content };
+  }
+
+  const frontmatter = {};
+  const yaml = match[1];
+
+  // Simple YAML parsing (key: value)
+  yaml.split('\n').forEach(line => {
+    const [key, ...rest] = line.split(':');
+    if (key && rest.length) {
+      frontmatter[key.trim()] = rest.join(':').trim();
+    }
+  });
+
+  return {
+    frontmatter,
+    body: content.slice(match[0].length)
+  };
+}
+
+/**
+ * Check if content is a slide presentation (has marp: true or uses ---)
+ * @param {string} content - Markdown content
+ * @returns {boolean}
+ */
+export function isSlidePresentation(content) {
+  // Check for marp: true in frontmatter
+  if (/^---\s*\n[\s\S]*?marp:\s*true[\s\S]*?\n---/.test(content)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Render slide content (handles both HTML blocks and markdown)
+ * @param {string} slideContent - Single slide content
+ * @returns {string} Rendered HTML
+ */
+function renderSlideContent(slideContent) {
+  const trimmed = slideContent.trim();
+
+  // If it starts with HTML tag, render as-is (minimal processing)
+  if (trimmed.startsWith('<')) {
+    // Process any markdown within the HTML
+    // But preserve the HTML structure
+    return trimmed;
+  }
+
+  // Otherwise, render as markdown
+  return md.render(trimmed);
+}
+
+/**
+ * Extract scripts and styles from the first slide (typically config)
+ * @param {string} content - First slide content after frontmatter
+ * @returns {{ scripts: string, styles: string, content: string }}
+ */
+function extractConfigFromFirstSlide(content) {
+  let scripts = '';
+  let styles = '';
+  let remaining = content;
+
+  // Extract <script> tags
+  const scriptMatches = content.match(/<script[\s\S]*?<\/script>/gi) || [];
+  scriptMatches.forEach(script => {
+    scripts += script + '\n';
+    remaining = remaining.replace(script, '');
+  });
+
+  // Extract <style> tags
+  const styleMatches = content.match(/<style[\s\S]*?<\/style>/gi) || [];
+  styleMatches.forEach(style => {
+    styles += style + '\n';
+    remaining = remaining.replace(style, '');
+  });
+
+  return { scripts, styles, content: remaining.trim() };
+}
+
+/**
+ * Render markdown slides to HTML
+ * @param {string} content - Markdown content with slide separators
+ * @returns {{ html: string, slideCount: number, scripts: string, styles: string }}
+ */
+export function renderSlides(content) {
+  const { frontmatter, body } = parseFrontmatter(content);
+
+  // Split by --- (must be on its own line)
+  const rawSlides = body.split(/\n---\s*\n/);
+
+  // Extract scripts/styles from first "slide" (config area)
+  const firstSlide = rawSlides[0] || '';
+  const { scripts, styles, content: firstContent } = extractConfigFromFirstSlide(firstSlide);
+
+  // Build slides array (first slide might be empty after extracting config)
+  const slidesContent = [firstContent, ...rawSlides.slice(1)].filter(s => s.trim());
+
+  // Render each slide
+  const slides = slidesContent.map((slideContent, index) => {
+    const rendered = renderSlideContent(slideContent);
+    return `
+      <section class="slide" data-slide-index="${index}">
+        ${rendered}
+      </section>
+    `;
+  });
+
+  // Wrap in container
+  const html = `
+    <div class="slides-container" data-slide-count="${slides.length}">
+      ${slides.join('\n')}
+    </div>
+  `;
+
+  return {
+    html,
+    slideCount: slides.length,
+    scripts,
+    styles,
+    frontmatter
+  };
+}
+
+export default { renderSlides, isSlidePresentation };

package/src/static/index.html

@@ -28,6 +28,22 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+
+    <!-- Tailwind CSS (for Marp slides) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            corePlugins: { preflight: false, container: false },
+            theme: {
+                extend: {
+                    colors: {
+                        navy: { DEFAULT: '#1B4565', light: '#2d5a7b', dark: '#0f2d44' },
+                        teal: { DEFAULT: '#3E9BA4', light: '#5bb5bd' },
+                    }
+                }
+            }
+        }
+    </script>
 </head>
 <body>
     <script>document.body.dataset.theme = __mdvTheme;</script>