{"id":13447744,"url":"https://github.com/mplewis/src2png","last_synced_at":"2025-05-15T18:07:59.064Z","repository":{"id":50224228,"uuid":"102823773","full_name":"mplewis/src2png","owner":"mplewis","description":"📸💻 Turn your source code into beautiful syntax-highlighted images.","archived":false,"fork":false,"pushed_at":"2023-01-24T22:42:49.000Z","size":10337,"stargazers_count":2190,"open_issues_count":36,"forks_count":57,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-07T23:08:09.526Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mplewis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-08T06:01:58.000Z","updated_at":"2025-03-23T13:44:23.000Z","dependencies_parsed_at":"2023-02-14T02:15:47.083Z","dependency_job_id":null,"html_url":"https://github.com/mplewis/src2png","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mplewis%2Fsrc2png","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mplewis%2Fsrc2png/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mplewis%2Fsrc2png/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mplewis%2Fsrc2png/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mplewis","download_url":"https://codeload.github.com/mplewis/src2png/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394722,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:25.832Z","updated_at":"2025-05-15T18:07:59.007Z","avatar_url":"https://github.com/mplewis.png","language":"JavaScript","readme":"# src2png\n\nTurn your source code into beautiful syntax-highlighted images. Great for presentations.\n\n\u003cimg src=\"/docs/banner.js.png\" width=\"600px\"\u003e\n\n# Examples\n\n[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\u0026fileviewer=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)\n------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------\n![](/docs/react.jsx.png)                                                |  ![](/docs/rails.rb.png)                                                                                                                                                                                   |  ![](/docs/flask.py.png)                                                            |  ![](/docs/arduino.cpp.png)\n\n# Usage\n\nInstall the [Fira Code](https://github.com/tonsky/FiraCode) font.\n\n```sh\nyarn install\nbrew install imagemagick  # trims image margins\n./src2png YOUR_SOURCE_FILE [YOUR_SOURCE_FILE [...]]\nls ./tmp  # screenshots are saved here\n```\n\n# How It Works\n\n* Starts a [Poi](https://github.com/egoist/poi) dev server\n  * Poi is a build tool that provides live hot reloading, Webpack, and Babel\n  * Poi loads `app.js`, a Vue app\n  * Vue mounts `code.jsx`, a component that presents the code in a webpage\n  * `code.jsx` uses [Prism](http://prismjs.com/) to syntax highlight the code\n* Loads [Puppeteer](https://github.com/GoogleChrome/puppeteer)\n  * Puppeteer starts an instance of Headless Chrome\n  * Chrome is used to render the highlighted code\n* Renders, trims whitespace, and saves screenshots for each file (see diagram below)\n\n![](/docs/foreach_seq_diag.svg)\n\n# FAQ\n\n**Why did you do this?**\n\nI needed high-quality screenshots of syntax-highlighted code snippets for a presentation.\n\nChrome is an excellent rendering engine, and there are tons of JS libraries that apply syntax highlighting to code.\n\n**Why did you do this in a headless Chrome browser and dev server? Isn't there something simpler?**\n\nNot for rendering text nicely. The alternatives are:\n\n* laying out and coloring text manually in a visualization language like Processing\n* building a PDF, coloring it, and converting it to PNG\n* rendering and coloring text manually in ImageMagick, PIL, or other image libraries that aren't designed for text layout or flowing\n* manually laying out text lines, coloring them, and rendering – basically, building my own text rendering engine in JS Canvas\n\n**You're really starting a dev server to serve documents to Headless Chrome and using hot reloading as a production feature?**\n\nYes.\n\n**Oh god, this is horrifying. You have built a monster and it is made of JavaScript.**\n\nYes it is. Yes I have.\n\nI am sorry. This Lovecraftian amalgamation of software works too well for its own good.\n\n**Do you plan on releasing this on NPM?**\n\nNot as long as it still sucks (starts a dev server via subprocesses, has a bad CLI, etc).\n\n**How do I change the theme/font/style?**\n\nPut themes in `src/themes` and change the CSS import in `code.jsx`.\n\nWrite style overrides in `src/style.css`.\n\n**It doesn't add syntax highlighting to my file. How do I make it work?**\n\nPrism 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.\n\n# License\n\nMIT\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmplewis%2Fsrc2png","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmplewis%2Fsrc2png","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmplewis%2Fsrc2png/lists"}