Mini-renderer NPM

Mini-Renderer

A lightweight TypeScript package for rendering markdown with code highlighting, LaTeX math, and theme support.

Features

Markdown rendering with code syntax highlighting
LaTeX math support (inline and display mode)
Light/Dark theme switching
Code block copy buttons
Proper escaping for code blocks and LaTeX content
Nested markdown rendering in code blocks
Customizable styling and themes
TypeScript support with full type definitions

Installation

npm install mini-renderer

Usage

Basic Usage

import { MiniRenderer, StyleManager } from 'mini-renderer';

// Initialize renderer and style manager
const renderer = new MiniRenderer();
const styleManager = new StyleManager();

// Inject required styles
styleManager.injectStyles();

// Render content
const content = `
# Example
Here's some code:
\`\`\`typescript
const x = "Hello World";
console.log(x);
\`\`\`

And some math: $E = mc^2$

Matrix:
$$
\\begin{bmatrix}
1 & 2 \\\\
3 & 4
\\end{bmatrix}
$$
`;

const output = renderer.render(content);
document.getElementById('output').innerHTML = output;

Theme Support

// Switch to dark theme
styleManager.setTheme('dark');

// Theme toggle example
function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    styleManager.setTheme(newTheme);
}