shiki-image

Convert code snippets into images. Powered by shiki and takumi. Super fast 🚀

Example:

[!NOTE] This was a quick experimental project. Contributors needed!

Usage

import { writeFile } from "node:fs/promises";
import { codeToImage } from "shiki-image";

const buffer = await codeToImage('console.log("hello, world!");', {
  lang: "js",
  theme: "github-dark",
  format: "webp",
});

await writeFile("image.webp", buffer);

Options

lang

Code language. See shiki supported languages

theme

Rendering theme. See shiki supported theems.

style

Additional container styles. See takumi stylesheets.

format

Output format can be either png, webp, avif, or jpeg (default is webp).

quality

Image quality between 0 to 100 (jpeg format only)

font

Font used to render the code. Can be either a string (remote URL to fetch) or an ArrayBuffer.

[!NOTE] If no font is specified, it will use the builtin Geist Mono font from Takumi.

[!TIP] If a URL is passed, response will be cached in memory for the next renders.

fontRatio

Font ratio used to compute the final font size. Default is 0.63.

width

Rendering width. By default is computed as columns * fontSize * fontRatio.

[!NOTE] Default font size is 18 and can be customized using style.fontSize.

height

Rendering height. By default is computed as lines * fontSize * lineHeight.

[!NOTE] Default lineHeight is 1.3 and can be customized using style.lineHeight.

Development

• Clone this repository
• Install latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

Showcase

• Alekhya: Code image generator with API support
• Modern Monaco Demo: Uses shiki-image to generate og image.

License

Published under the MIT license.