Convert code snippets into images. Powered by shiki and takumi. Super fast 🚀
Example:
Note
This was a quick experimental project. Contributors needed!
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);Code language. See shiki supported languages
Rendering theme. See shiki supported theems.
Additional container styles. See takumi stylesheets.
Output format can be either png, webp, avif, or jpeg (default is webp).
Image quality between 0 to 100 (jpeg format only)
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.
Rendering width. If not specified, it will be auto computed based on the code.
Note
Default font size is 32 and can be customized using style.fontSize.
Rendering height. If not specified, it will be auto computed based on the code.
Note
Default lineHeight is 1.3 and can be customized using style.lineHeight.
local development
- Alekhya: Code image generator with API support
- Modern Monaco Demo: Uses shiki-image to generate og image.
Published under the MIT license.