Code Snippet Image Generator

A Node.js library to transform code snippets into beautiful, customizable images with syntax highlighting.

Features

• Convert any code snippet to a visually appealing image
• Syntax highlighting with a Monokai-like theme
• Customizable styling (colors, dimensions, fonts)
• Adaptive image sizing based on code content
• Terminal-style window with control buttons
• Beautiful gradient backgrounds
• Drop shadow effects for a modern look

Installation

npm install code-snippet-image-generator

Usage

Basic Example

const { generateCodeImage } = require('code-snippet-image-generator');

const code = `function helloWorld() {
  console.log("Hello, world!");
}

helloWorld();`;

// Generate with default options
generateCodeImage(code, {
  outputPath: 'my-code-snippet.png'
});

Advanced Configuration

const { generateCodeImage } = require('code-snippet-image-generator');

const code = `// Your complex code here...`;

generateCodeImage(code, {
  backgroundColor: "#6c5ce7", // Purple background
  outputPath: "custom-code-snippet.png",
  width: 1400,                // Custom width
  height: 1000,               // Custom height
  padding: 70,                // Padding around the code
  fontFamily: "Fira Code",    // Custom font (must be registered)
  fontSize: 28,               // Larger text
  lineHeight: 1.7,            // More spacing between lines
  terminalRadius: 18,         // More rounded corners
  controlButtonRadius: 14,    // Larger control buttons
  controlButtonSpacing: 30    // More space between buttons
});

API Reference

Functions

codeToImage(code, options)

Generates an image from a code snippet.

• Parameters:
  • code (string): The code snippet to display
  • options (Object): Configuration options
• Returns: Promise<Buffer> - Image buffer

saveImage(imageBuffer, outputPath)

Saves the generated image to a file.

• Parameters:
  • imageBuffer (Buffer): The image buffer
  • outputPath (string): Path to save the image
• Returns: Promise<void>

generateCodeImage(code, options)

Generates a code image and saves it to file.

• Parameters:
  • code (string): The code snippet
  • options (Object): Configuration options
• Returns: Promise<string> - Path to the saved image

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | backgroundColor | string | "#ff3366" | Base color for background (hex format) | | outputPath | string | "code-snippet.png" | Path to save the image | | width | number | adaptive | Canvas width (calculated based on content if not specified) | | height | number | adaptive | Canvas height (calculated based on content if not specified) | | padding | number | 50 | Padding around the code | | fontFamily | string | "monospace" | Font family for code | | fontSize | number | 24 | Font size for code | | lineHeight | number | 1.5 | Line height for code | | terminalRadius | number | 15 | Radius for terminal window corners | | controlButtonRadius | number | 12 | Radius for control buttons | | controlButtonSpacing | number | 25 | Spacing between control buttons |

Custom Fonts

To use custom fonts, you need to register them first:

const { registerFont } = require('canvas');
const { generateCodeImage } = require('code-snippet-image-generator');

// Register a custom font
registerFont('path/to/FiraCode-Regular.ttf', { family: 'Fira Code' });

// Then use it in your options
generateCodeImage(code, {
  fontFamily: 'Fira Code',
  // Other options...
});

How It Works

1. The library takes your code snippet and calculates the optimal dimensions
2. It creates a canvas with a gradient background
3. It draws a terminal-like window with control buttons
4. Your code is rendered with syntax highlighting
5. The image is saved to the specified output path

License

GNU GENERAL PUBLIC LICENSE

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.