@leadertechie/md2html 0.1.0-alpha.2 → 0.1.0-alpha.4

package/README.md

@@ -55,10 +55,35 @@ const pipeline = new MarkdownPipeline({
     gfm: true,
     breaks: false,
     pedantic: false
+  },
+  styleOptions: {
+    classPrefix: 'md-',
+    customCSS: 'body { font-family: system-ui; }',
+    addHeadingIds: true
   }
 });
 ```
 
+### Style Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `classPrefix` | string | `''` | Prefix for CSS classes on elements (e.g., `'md-'` produces `md-heading`, `md-paragraph`) |
+| `customCSS` | string | `''` | Custom CSS string to inject (use `pipeline.getCustomCSS()` to retrieve) |
+| `addHeadingIds` | boolean | `false` | Add ID attributes to headings based on their content for anchor links |
+
+When `classPrefix` or `addHeadingIds` is set, CSS classes will be added to elements:
+- `heading`, `paragraph`, `list`, `list-item`, `image`, `code`, `container`, `blockquote`
+
+Example output with `classPrefix: 'md-'` and `addHeadingIds: true`:
+```html
+<h1 id="hello-world" class="md-heading">Hello World</h1>
+<p class="md-paragraph">This is a paragraph.</p>
+<ul class="md-list">
+  <li class="md-list-item">Item 1</li>
+</ul>
+```
+
 ### API
 
 | Method | Description |
@@ -66,7 +91,9 @@ const pipeline = new MarkdownPipeline({
 | `parse(markdown)` | Parse markdown string to AST |
 | `render(nodes)` | Render AST to HTML string |
 | `renderMarkdown(markdown)` | Parse and render in one call |
-| `renderPage(title, nodes)` | Render AST to full HTML page |
+| `renderPage(title, nodes, options?)` | Render AST to full HTML page |
+| `getCustomCSS()` | Get custom CSS string from style config |
+| `getConfig()` | Get current pipeline configuration |
 
 ## License
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export * from './types';
-export * from './parser';
-export * from './renderer';
-export * from './lit-renderer';
-export * from './pipeline';
-export { LitRenderer as HTMLRenderer } from './lit-renderer';
+export * from './types.js';
+export * from './parser.js';
+export * from './renderer.js';
+export * from './lit-renderer.js';
+export * from './pipeline.js';
+export { LitRenderer as HTMLRenderer } from './lit-renderer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
-export * from './types';
-export * from './parser';
-export * from './renderer';
-export * from './lit-renderer';
-export * from './pipeline';
-export { LitRenderer as HTMLRenderer } from './lit-renderer';
+export * from './types.js';
+export * from './parser.js';
+export * from './renderer.js';
+export * from './lit-renderer.js';
+export * from './pipeline.js';
+export { LitRenderer as HTMLRenderer } from './lit-renderer.js';

package/dist/pipeline.d.ts

@@ -1,4 +1,4 @@
-import { ContentNode, MarkdownContent, PipelineConfig } from './types';
+import { ContentNode, MarkdownContent, PipelineConfig } from './types.js';
 export declare class MarkdownPipeline {
     private parser;
     private renderer;
@@ -13,5 +13,6 @@ export declare class MarkdownPipeline {
         charset?: string;
     }): string;
     getConfig(): Readonly<Required<PipelineConfig>>;
+    getCustomCSS(): string;
 }
 //# sourceMappingURL=pipeline.d.ts.map

package/dist/pipeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../src/pipeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEvE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,MAAM,CAA2B;gBAE7B,MAAM,GAAE,cAAmB;IAkBvC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAAE;IAItC,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe;IAIpD,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAIpC,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAKxC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,GAAG,MAAM;IAeV,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;CAGhD"}
+{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../src/pipeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAe,MAAM,YAAY,CAAC;AAEvF,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,MAAM,CAA2B;gBAE7B,MAAM,GAAE,cAAmB;IAuBvC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAAE;IAItC,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe;IAIpD,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAIpC,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAKxC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,GAAG,MAAM;IAeV,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAI/C,YAAY,IAAI,MAAM;CAGvB"}

package/dist/pipeline.js

@@ -1,5 +1,5 @@
-import { MarkdownParser } from './parser';
-import { HTMLRenderer } from './renderer';
+import { MarkdownParser } from './parser.js';
+import { HTMLRenderer } from './renderer.js';
 export class MarkdownPipeline {
     constructor(config = {}) {
         this.config = {
@@ -9,13 +9,18 @@ export class MarkdownPipeline {
                 gfm: config.parseOptions?.gfm ?? true,
                 breaks: config.parseOptions?.breaks ?? false,
                 pedantic: config.parseOptions?.pedantic ?? false
+            },
+            styleOptions: {
+                classPrefix: config.styleOptions?.classPrefix || '',
+                customCSS: config.styleOptions?.customCSS || '',
+                addHeadingIds: config.styleOptions?.addHeadingIds ?? false
             }
         };
         this.parser = new MarkdownParser({
             imagePathPrefix: this.config.imagePathPrefix,
             imageBaseUrl: this.config.imageBaseUrl
         });
-        this.renderer = new HTMLRenderer();
+        this.renderer = new HTMLRenderer(this.config.styleOptions);
     }
     parse(markdown) {
         return this.parser.parseToNodes(markdown, this.config.parseOptions);
@@ -47,4 +52,7 @@ export class MarkdownPipeline {
     getConfig() {
         return { ...this.config };
     }
+    getCustomCSS() {
+        return this.renderer.getCustomCSS();
+    }
 }

package/dist/renderer.d.ts

@@ -1,8 +1,15 @@
-import { ContentNode } from './types';
+import { ContentNode, StyleConfig } from './types.js';
 export declare class HTMLRenderer {
+    private config;
+    constructor(config?: StyleConfig);
+    private hasClassConfig;
+    private getClass;
+    private generateHeadingId;
+    private renderWithClass;
     renderNode(node: ContentNode): string;
     renderNodes(nodes: ContentNode[]): string;
     renderToHTMLString(nodes: ContentNode[]): string;
     render(markdown: string): string;
+    getCustomCSS(): string;
 }
 //# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,qBAAa,YAAY;IACvB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAiDrC,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAOzC,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAIhD,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;CAGjC"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEtD,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAwB;gBAE1B,MAAM,GAAE,WAAgB;IAQpC,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAOvB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IA4DrC,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAOzC,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM;IAIhD,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAIhC,YAAY,IAAI,MAAM;CAGvB"}

package/dist/renderer.js

@@ -1,35 +1,80 @@
 export class HTMLRenderer {
+    constructor(config = {}) {
+        this.config = {
+            classPrefix: config.classPrefix || '',
+            customCSS: config.customCSS || '',
+            addHeadingIds: config.addHeadingIds ?? false
+        };
+    }
+    hasClassConfig() {
+        return this.config.classPrefix !== '' || this.config.addHeadingIds;
+    }
+    getClass(baseClass, nodeClass) {
+        if (!this.hasClassConfig()) {
+            return nodeClass || '';
+        }
+        const prefix = this.config.classPrefix;
+        const classes = [prefix ? `${prefix}${baseClass}` : baseClass];
+        if (nodeClass)
+            classes.push(nodeClass);
+        return classes.join(' ');
+    }
+    generateHeadingId(content) {
+        if (!content)
+            return '';
+        return content
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/(^-|-$)/g, '');
+    }
+    renderWithClass(tag, content, baseClass, nodeClass, extraAttrs) {
+        const classAttr = this.hasClassConfig() && baseClass
+            ? ` class="${this.getClass(baseClass, nodeClass)}"`
+            : '';
+        return `<${tag}${classAttr}${extraAttrs || ''}>${content}</${tag}>`;
+    }
     renderNode(node) {
         switch (node.type) {
             case 'heading':
                 const level = node.attributes?.level || '2';
-                return `<h${level}>${node.content || ''}</h${level}>`;
+                const headingId = this.config.addHeadingIds
+                    ? ` id="${this.generateHeadingId(node.content)}"`
+                    : '';
+                if (!this.hasClassConfig()) {
+                    return `<h${level}${headingId}>${node.content || ''}</h${level}>`;
+                }
+                return `<h${level}${headingId} class="${this.getClass('heading')}">${node.content || ''}</h${level}>`;
             case 'paragraph':
                 if (node.children) {
-                    return `<p>${node.children.map(child => this.renderNode(child)).join('')}</p>`;
+                    const childrenHtml = node.children.map(child => this.renderNode(child)).join('');
+                    return this.renderWithClass('p', childrenHtml, 'paragraph');
                 }
-                return `<p>${node.content || ''}</p>`;
+                return this.renderWithClass('p', node.content || '', 'paragraph');
             case 'list':
                 const tag = node.ordered ? 'ol' : 'ul';
                 const items = node.children?.map(child => this.renderNode(child)).join('') || '';
-                return `<${tag}>${items}</${tag}>`;
+                return this.renderWithClass(tag, items, 'list');
             case 'list-item':
-                return `<li>${node.content || ''}</li>`;
+                return this.renderWithClass('li', node.content || '', 'list-item');
             case 'image':
                 const src = node.src || node.attributes?.src || '';
                 const alt = node.alt || node.attributes?.alt || '';
-                return `<img src="${src}" alt="${alt}" class="${node.className || ''}">`;
+                const classStr = this.getClass('image', node.className || undefined);
+                return `<img src="${src}" alt="${alt}"${classStr ? ` class="${classStr}"` : ''}>`;
             case 'code':
-                return `<pre><code class="language-${node.attributes?.lang || ''}">${node.content || ''}</code></pre>`;
+                const codeClass = this.hasClassConfig()
+                    ? ` class="${this.getClass('code')} language-${node.attributes?.lang || ''}"`
+                    : ` class="language-${node.attributes?.lang || ''}"`;
+                return `<pre><code${codeClass}>${node.content || ''}</code></pre>`;
             case 'container':
                 if (node.attributes?.tag === 'hr')
                     return '<hr>';
                 if (node.attributes?.tag === 'blockquote') {
                     const children = node.children?.map(child => this.renderNode(child)).join('') || '';
-                    return `<blockquote>${children}</blockquote>`;
+                    return this.renderWithClass('blockquote', children, 'blockquote');
                 }
                 const containerChildren = node.children?.map(child => this.renderNode(child)).join('') || '';
-                return `<div class="${node.className || ''}">${containerChildren}</div>`;
+                return this.renderWithClass('div', containerChildren, 'container', node.className || undefined);
             case 'strong':
                 return `<strong>${node.content || ''}</strong>`;
             case 'emphasis':
@@ -51,4 +96,7 @@ export class HTMLRenderer {
     render(markdown) {
         return markdown;
     }
+    getCustomCSS() {
+        return this.config.customCSS;
+    }
 }

package/dist/types.d.ts

@@ -19,9 +19,15 @@ export interface ParseOptions {
     breaks?: boolean;
     pedantic?: boolean;
 }
+export interface StyleConfig {
+    classPrefix?: string;
+    customCSS?: string;
+    addHeadingIds?: boolean;
+}
 export interface PipelineConfig {
     imagePathPrefix?: string;
     imageBaseUrl?: string;
     parseOptions?: ParseOptions;
+    styleOptions?: StyleConfig;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,WAAW,GACX,MAAM,GACN,WAAW,GACX,OAAO,GACP,MAAM,GACN,WAAW,GACX,QAAQ,GACR,UAAU,CAAC;AAEf,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,WAAW,GACX,MAAM,GACN,WAAW,GACX,OAAO,GACP,MAAM,GACN,WAAW,GACX,QAAQ,GACR,UAAU,CAAC;AAEf,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leadertechie/md2html",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Markdown to HTML pipeline - parse markdown to AST, render to HTML or Lit templates",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "typescript": "^5.0.0",
-    "vitest": "^2.0.0"
+    "vitest": "^3.0.0"
   },
   "keywords": [
     "markdown",