src2png
Turn your source code into beautiful syntax-highlighted images. Great for presentations.
Examples
React (JSX), Ruby on Rails, Python, C++
------------------------------------------------------------------------, ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------, -------------------------------------------------------------------------------------, --------------------------------------------------------------------------------------------------------
, 
, 
, 
Usage
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)
FAQ
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.
Oh god, this is horrifying. You have built a monster and it is made of JavaScript.
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 code.jsx.
Write style overrides in src/style.css.
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 extensionCodes in src/code.jsx and add a mapping from your file extension to a supported Prism format name.
License
MIT