Permalink
Browse files

docs: readme, license

  • Loading branch information...
mplewis committed Sep 8, 2017
1 parent 49becb1 commit f0984c432fc92db5353bd7e28eb7c2a642e800e5
View
@@ -0,0 +1,7 @@
Copyright 2017 Matt Lewis (matt@mplewis.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -0,0 +1,76 @@
# src2png
Turn your source code into beautiful syntax-highlighted images. Great for presentations.
# 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
```sh
yarn install
node src/camera.js 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 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 to
**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
View
BIN +833 KB docs/arduino.cpp.png
Binary file not shown.
View
BIN +1020 KB docs/flask.py.png
Binary file not shown.
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="973" height="432" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[Note left of Node.js: For each input file:
Node.js -> Poi: Copy input file
Note right of Poi: Dev server hot update, \nregenerate page content
Puppeteer -> Poi: Request: page content
Poi -> Puppeteer: Response: highlighted code
Note right of Puppeteer: Render screenshot\n and save PNG
]]></source><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="198.4296875" y="20" width="87.203125" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="208.4296875" y="44.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="208.4296875">Node.js</tspan></text></g><g class="actor"><rect x="198.4296875" y="374.375" width="87.203125" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="208.4296875" y="398.875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="208.4296875">Node.js</tspan></text></g><line x1="242.03125" x2="242.03125" y1="58" y2="374.375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="actor"><rect x="381.6484375" y="20" width="48.796875" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="391.6484375" y="44.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="391.6484375">Poi</tspan></text></g><g class="actor"><rect x="381.6484375" y="374.375" width="48.796875" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="391.6484375" y="398.875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="391.6484375">Poi</tspan></text></g><line x1="406.046875" x2="406.046875" y1="58" y2="374.375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="actor"><rect x="623.671875" y="20" width="106.40625" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="633.671875" y="44.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="633.671875">Puppeteer</tspan></text></g><g class="actor"><rect x="623.671875" y="374.375" width="106.40625" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="633.671875" y="398.875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="633.671875">Puppeteer</tspan></text></g><line x1="676.875" x2="676.875" y1="58" y2="374.375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="note"><rect x="20" y="78" width="202.03125" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="25" y="97.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="25">For each input file:</tspan></text></g><g class="signal"><text x="252.03125" y="136.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="252.03125">Copy input file</tspan></text><line x1="242.03125" x2="406.046875" y1="144" y2="144" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="426.046875" y="164" width="230.828125" height="47.1875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="431.046875" y="183.5" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="431.046875">Dev server hot update,</tspan><tspan dy="1.2em" x="431.046875">regenerate page content</tspan></text></g><g class="signal"><text x="440.6484375" y="241.6875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="440.6484375">Request: page content</tspan></text><line x1="676.875" x2="406.046875" y1="249.1875" y2="249.1875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="signal"><text x="416.640625" y="279.6875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="416.640625">Response: highlighted code</tspan></text><line x1="406.046875" x2="676.875" y1="287.1875" y2="287.1875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="696.875" y="307.1875" width="173.21875" height="47.1875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="701.875" y="326.6875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="701.875">Render screenshot</tspan><tspan dy="1.2em" x="701.875">and save PNG</tspan></text></g></svg>
View
BIN +1000 KB docs/rails.rb.png
Binary file not shown.
View
BIN +699 KB docs/react.jsx.png
Binary file not shown.

0 comments on commit f0984c4

Please sign in to comment.