Turn your source code into beautiful syntax-highlighted images. Great for presentations.
|React (JSX)||Ruby on Rails||Python||C++|
Install the Fira Code font.
yarn install brew install imagemagick # trims image margins ./src2png YOUR_SOURCE_FILE [YOUR_SOURCE_FILE [...]] ls ./tmp # screenshots are saved here
How It Works
- Starts a Poi dev server
- Poi is a build tool that provides live hot reloading, Webpack, and Babel
- Poi loads
app.js, a Vue app
- Vue mounts
code.jsx, a component that presents the code in a webpage
code.jsxuses Prism to syntax highlight the code
- Loads Puppeteer
- Puppeteer starts an instance of Headless Chrome
- Chrome is used to render the highlighted code
- Renders, trims whitespace, and saves screenshots for each file (see diagram below)
Why did you do this?
I needed high-quality screenshots of syntax-highlighted code snippets for a presentation.
Chrome is an excellent rendering engine, and there are tons of JS libraries that apply syntax highlighting to code.
Why did you do this in a headless Chrome browser and dev server? Isn't there something simpler?
Not for rendering text nicely. The alternatives are:
- laying out and coloring text manually in a visualization language like Processing
- building a PDF, coloring it, and converting it to PNG
- rendering and coloring text manually in ImageMagick, PIL, or other image libraries that aren't designed for text layout or flowing
- manually laying out text lines, coloring them, and rendering – basically, building my own text rendering engine in JS Canvas
You're really starting a dev server to serve documents to Headless Chrome and using hot reloading as a production feature?
Yes it is. Yes I have.
I am sorry. This Lovecraftian amalgamation of software works too well for its own good.
Do you plan on releasing this on NPM?
Not as long as it still sucks (starts a dev server via subprocesses, has a bad CLI, etc).
How do I change the theme/font/style?
Put themes in
src/themes and change the CSS import in
Write style overrides in
It doesn't add syntax highlighting to my file. How do I make it work?
Prism probably doesn't recognize your file's extension as the name of a format. Check out
src/code.jsx and add a mapping from your file extension to a supported Prism format name.