MarkdownToRender

A powerful renderer for Markdown with extensive feature support including math formulas (KaTeX), diagrams (Mermaid), and code syntax highlighting.

Installation

npm install markdowntorender

Features

• Markdown rendering - High-quality Markdown to HTML conversion
• Math formulas - Render mathematical expressions using KaTeX
• Diagrams - Create diagrams using Mermaid syntax
• Syntax highlighting - Code blocks with syntax highlighting via highlight.js

Basic Usage

import { renderMarkdown, renderMarkdownToHtml } from 'markdowntorender';

// Basic markdown rendering
const result = renderMarkdown('# Hello World');
console.log(result.html); // "<h1>Hello World</h1>"

// Complete HTML document with all features
const html = renderMarkdownToHtml(`
# Document with Features

## Math formula

$E = mc^2$

## Diagram

\`\`\`mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
\`\`\`

## Code

\`\`\`javascript
function hello() {
  console.log("Hello world!");
}
\`\`\`
`);

// Write to file
const fs = require('fs');
fs.writeFileSync('output.html', html);

Rendering a Markdown File

import { renderMarkdownFile } from 'markdowntorender';

renderMarkdownFile('input.md', 'output.html', {
  title: 'My Document',
  lang: 'en'
});

API Reference

Main Functions

• renderMarkdown(markdown, options) - Renders markdown to HTML with all features
• renderMarkdownToHtml(markdown, options) - Renders a complete HTML document
• renderMarkdownFile(inputPath, outputPath, options) - Renders a markdown file to HTML
• createMarkdownRenderer(options) - Creates a configured markdown-it instance

Component Functions

• getKaTexResources(options) - Get KaTeX resource tags
• processMathFormulas(html, options) - Process math formulas in HTML
• getMermaidResources(options) - Get Mermaid resource tags
• processMermaidDiagrams(html, options) - Process Mermaid diagrams in HTML
• getHighlightJsResources(options) - Get highlight.js resource tags
• processCodeBlocks(html, options) - Process code blocks for syntax highlighting

Configuration Options

Markdown Options

const options = {
  markdown: {
    html: true,          // Enable HTML tags
    breaks: false,       // Convert '\n' to <br>
    linkify: true,       // Autoconvert URLs to links
    typographer: true    // Enable typographic replacements
  }
};

KaTeX Options

const options = {
  katex: {
    version: '0.16.9',   // KaTeX version
    displayMode: false,  // Display mode for all formulas
    autoRender: true,    // Auto-render formulas
    configOverrides: {}  // Additional KaTeX configuration
  }
};

Mermaid Options

const options = {
  mermaid: {
    version: '10.6.1',   // Mermaid version
    darkMode: false,     // Use dark theme
    startOnLoad: true,   // Initialize on page load
    configOverrides: {}  // Additional Mermaid configuration
  }
};

Syntax Highlighting Options

const options = {
  highlight: {
    version: '11.9.0',           // highlight.js version
    theme: 'default',            // CSS theme
    languages: ['python', 'js'], // Additional languages
    autoInit: true,              // Initialize on page load
    configOverrides: {}          // Additional configuration
  }
};

Complete Example

import { renderMarkdownToHtml } from 'markdowntorender';

const html = renderMarkdownToHtml(markdownContent, {
  title: 'My Document',
  lang: 'en',
  markdown: {
    html: true,
    breaks: true
  },
  katex: {
    displayMode: false
  },
  mermaid: {
    darkMode: true
  },
  highlight: {
    theme: 'github',
    languages: ['javascript', 'python', 'css']
  }
});

License

MIT