Skip to content

Latest commit

 

History

History
81 lines (50 loc) · 3.98 KB

README.md

File metadata and controls

81 lines (50 loc) · 3.98 KB
Raw

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.jsx uses 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