Add new skill for custom markdown to html covnersion

2026-02-23 20:05:12 +00:00 · 2026-01-29 00:01:36 -05:00
parent ccdfd66cc2
commit 4a2b22c570
17 changed files with 4234 additions and 0 deletions
--- a/skills/markdown-to-html/references/marked.md
+++ b/skills/markdown-to-html/references/marked.md
@@ -0,0 +1,121 @@
+# Marked
+
+## Quick Conversion Methods
+
+Expanded portions of `SKILL.md` at `### Quick Conversion Methods`.
+
+### Method 1: CLI (Recommended for Single Files)
+
+```bash
+# Convert file to HTML
+marked -i input.md -o output.html
+
+# Convert string directly
+marked -s "# Hello World"
+
+# Output: <h1>Hello World</h1>
+```
+
+### Method 2: Node.js Script
+
+```javascript
+import { marked } from 'marked';
+import { readFileSync, writeFileSync } from 'fs';
+
+const markdown = readFileSync('input.md', 'utf-8');
+const html = marked.parse(markdown);
+writeFileSync('output.html', html);
+```
+
+### Method 3: Browser Usage
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
+<script>
+  const html = marked.parse('# Markdown Content');
+  document.getElementById('output').innerHTML = html;
+</script>
+```
+
+---
+
+## Step-by-Step Workflows
+
+Expanded portions of `SKILL.md` at `### Step-by-Step Workflows`.
+
+### Workflow 1: Single File Conversion
+
+1. Ensure marked is installed: `npm install -g marked`
+2. Run conversion: `marked -i README.md -o README.html`
+3. Verify output file was created
+
+### Workflow 2: Batch Conversion (Multiple Files)
+
+Create a script `convert-all.js`:
+
+```javascript
+import { marked } from 'marked';
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
+import { join, basename } from 'path';
+
+const inputDir = './docs';
+const outputDir = './html';
+
+readdirSync(inputDir)
+  .filter(file => file.endsWith('.md'))
+  .forEach(file => {
+    const markdown = readFileSync(join(inputDir, file), 'utf-8');
+    const html = marked.parse(markdown);
+    const outputFile = basename(file, '.md') + '.html';
+    writeFileSync(join(outputDir, outputFile), html);
+    console.log(`Converted: ${file} → ${outputFile}`);
+  });
+```
+
+Run with: `node convert-all.js`
+
+### Workflow 3: Conversion with Custom Options
+
+```javascript
+import { marked } from 'marked';
+
+// Configure options
+marked.setOptions({
+  gfm: true,           // GitHub Flavored Markdown
+  breaks: true,        // Convert \n to <br>
+  pedantic: false,     // Don't conform to original markdown.pl
+});
+
+const html = marked.parse(markdownContent);
+```
+
+### Workflow 4: Complete HTML Document
+
+Wrap converted content in a full HTML template:
+
+```javascript
+import { marked } from 'marked';
+import { readFileSync, writeFileSync } from 'fs';
+
+const markdown = readFileSync('input.md', 'utf-8');
+const content = marked.parse(markdown);
+
+const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem; }
+    pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; }
+    code { background: #f4f4f4; padding: 0.2rem 0.4rem; border-radius: 3px; }
+  </style>
+</head>
+<body>
+${content}
+</body>
+</html>`;
+
+writeFileSync('output.html', html);
+```