markdown-to-png-cli v0.1.9
Module Version markdown-to-png
markdown-to-png is a NodeJS JavaScript module that converts Markdown files into PNG images using HTML templates for styling. It allows for programmatic control over the layout, theme, and other options for generating styled images from Markdown content.
Please use markdown-to-png-cli for a standalone command-line tool
Table of Contents
Installation
To install the markdown-to-png module for use in your JavaScript project, run:
npm install markdown-to-pngModule Usage
Function Signature
import markdownToPng from 'markdown-to-png';
/**
* Converts markdown text to PNG images.
*
* @param {string} markdownText - The markdown content to convert.
* @param {string} outputDirectory - Directory where PNGs should be saved.
* @param {string} baseFileName - Base name to use for the generated PNG files.
* @param {string} template - HTML template for styling.
* @param {Object} options - Configuration options.
*/
async function markdownToPng(markdownText, outputDirectory, baseFileName, template, options);Options
| Option | Type | Description | Default |
|---|---|---|---|
charactersPerPage | number | Maximum characters per page (for pagination) | 72 |
layout | string | Select the page layout: portrait, square, or landscape | N/A |
template | string | HTML template for styling | default.html |
theme | string | Select the theme: default, monochrome, dark-purple, medium-purple, dark-orange, bright-orange | default |
limit | number | Limit the number of images to generate | 10 |
Example Programmatic Usage
import markdownToPng from "markdown-to-png";
import fs from "fs";
import path from "path";
// Sample Markdown content
const markdownText = fs.readFileSync("path/to/markdown.md", "utf8");
// Path to the template
const template = fs.readFileSync(
path.resolve("path/to/template.html"),
"utf-8"
);
// Configuration options
const options = {
layout: "portrait",
theme: "default",
charactersPerPage: 72,
limit: 5,
};
// Directory to save PNGs
const outputDirectory = "./output";
// Base file name for the PNGs
const baseFileName = "markdown-output";
// Convert the Markdown to PNGs
markdownToPng(markdownText, outputDirectory, baseFileName, template, options)
.then(() => {
console.log("PNG images generated successfully!");
})
.catch((error) => {
console.error("Error generating PNG images:", error);
});Template Structure
Template Configuration in markdown-to-png
The template in markdown-to-png is dynamically adjusted based on the following script parameters:
layout: Determines the page dimensions.portrait: 1080x1920 pxsquare: 1080x1080 pxlandscape: 1920x1080 px- Injected into the template as
data-layout="${layout}"and updates page size (--page-width,--page-height).
theme: Sets the color scheme of the page.- Themes:
default,monochrome,dark-purple,medium-purple,dark-orange,bright-orange. - Injected as
data-theme="${theme}", adjusting background and text colors.
- Themes:
Page Content: The Markdown content is injected into the template via the
${content}placeholder.
Example Code:
<html>
<head>
<style>
:root {
--page-width: /*$width*/ px;
--page-height: /*$height*/ px;
--primary-color: #ff6719;
--text-color: #ffffff;
}
body {
width: var(--page-width);
height: var(--page-height);
background: var(--primary-color);
color: var(--text-color);
}
</style>
</head>
<body data-layout="${layout}" data-theme="${theme}">
<div class="inner">${content}</div>
</body>
</html>In the above code, ${layout}, ${theme}, and ${content} are placeholders replaced by the script based on the user’s input.
Contributing
Contributions are welcome! If you'd like to contribute to the development of this project, follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Write tests (if applicable).
- Submit a pull request with a clear description of the changes.
License
This project is licensed under the MIT License.
Let me know if you need any further changes!