markdown2svg

A Node.js library that converts Markdown text with LaTeX syntax into SVG images.

Installation

pnpm add markdown2svg

Features

• Converts Markdown to SVG
• Supports both display LaTeX equations (using $$) and inline equations (using single $)
• Customizable output size and styling
• Auto-height adjustment based on content
• Customizable text and background colors
• Returns SVG string that can be used directly in HTML img tags

Usage

import { MarkdownToSVG } from 'markdown2svg';

// Create a converter instance with optional configuration
const converter = new MarkdownToSVG({
  // Size options
  width: 800,         // SVG width (default: 800)
  height: 600,        // SVG height (default: 600)
  padding: 20,        // Padding around content (default: 20)

  // Text styling
  fontSize: 16,       // Font size in pixels (default: 16)
  lineHeight: 1.5,    // Line height (default: 1.5)
  fontFamily: 'Arial, sans-serif', // Font family (default: 'Arial, sans-serif')
  textColor: '#000000',           // Text color (default: '#000000')
  backgroundColor: 'transparent',  // Background color (default: 'transparent')

  // LaTeX options
  inlineMath: true,   // Enable inline math with single $
  katexOptions: {     // KaTeX rendering options
    throwOnError: false,
    displayMode: true,
    // ... any other KaTeX options
  },

  // SVG options
  autoHeight: false,  // Auto-adjust height based on content
  maxHeight: 2000,    // Maximum height when autoHeight is true
});

// Convert markdown to SVG
const markdown = `
# Hello World

This is a paragraph with some **bold** text and inline math: $E = mc^2$.

Here's a display equation:

$$
\\int_{0}^{\\infty} e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
$$
`;

const svgString = await converter.convert(markdown);

// Use the SVG string in an HTML img tag
const html = `<img src="data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}" />`;

API

MarkdownToSVG class

Constructor Options

interface ConversionOptions {
  // Size options
  width?: number;         // SVG width in pixels
  height?: number;        // SVG height in pixels
  padding?: number;       // Padding around content in pixels

  // Text styling
  fontSize?: number;      // Font size in pixels
  lineHeight?: number;    // Line height
  fontFamily?: string;    // Font family
  textColor?: string;     // Text color (CSS color value)
  backgroundColor?: string; // Background color (CSS color value)

  // LaTeX options
  inlineMath?: boolean;   // Enable inline math with single $
  katexOptions?: katex.KatexOptions; // KaTeX rendering options

  // SVG options
  autoHeight?: boolean;   // Auto-adjust height based on content
  maxHeight?: number;     // Maximum height when autoHeight is true
}

Methods

• convert(markdown: string): Promise<string> - Converts markdown text to SVG string

Examples

Default Style

const converter = new MarkdownToSVG();
const svg = await converter.convert(markdown);

Custom Styling

const converter = new MarkdownToSVG({
  width: 800,
  height: 600,
  fontSize: 18,
  fontFamily: 'Georgia, serif',
  textColor: '#2c3e50',
  backgroundColor: '#f8f9fa',
  padding: 30,
});
const svg = await converter.convert(markdown);

Auto Height

const converter = new MarkdownToSVG({
  width: 600,
  autoHeight: true,
  maxHeight: 1000,
  backgroundColor: '#ffffff',
  padding: 40,
});
const svg = await converter.convert(markdown);

License

ISC