# src2png

**Repository Path**: mirrors/src2png

## Basic Information

- **Project Name**: src2png
- **Description**: src2png 是一个将代码生成图片的工具
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.oschina.net/p/src2png
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 2
- **Created**: 2017-09-15
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# src2png

Turn your source code into beautiful syntax-highlighted images. Great for presentations.

<img src="/docs/banner.js.png" width="600px">

# Examples

[React (JSX)](https://facebook.github.io/react/tutorial/tutorial.html)  |  [Ruby on Rails](https://bitbucket.org/railstutorial/sample_app_4th_ed/src/5dd7038b99dd331285cf003cfd3f59ba06376027/app/controllers/password_resets_controller.rb?at=master&fileviewer=file-view-default)  |  [Python](https://github.com/allisson/flask-example/blob/master/accounts/views.py)  |  [C++](https://github.com/arduino/Arduino/blob/master/hardware/arduino/avr/libraries/Wire/src/Wire.cpp)
------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------
![](/docs/react.jsx.png)                                                |  ![](/docs/rails.rb.png)                                                                                                                                                                                   |  ![](/docs/flask.py.png)                                                            |  ![](/docs/arduino.cpp.png)

# Usage

Install the [Fira Code](https://github.com/tonsky/FiraCode) font.

```sh
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](https://github.com/egoist/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](http://prismjs.com/) to syntax highlight the code
* Loads [Puppeteer](https://github.com/GoogleChrome/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)

![](/docs/foreach_seq_diag.svg)

# 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