Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

📸💻 Turn your source code into beautiful syntax-highlighted images.

Resources

License

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •