code2img

A REST API to get pretty images of code snippets with syntax highlighting created using Puppeteer, PrismJS and Vercel.

Image generated with code2img API

Contents

1. Tech Used
2. Installation
3. Using the API
4. API Documentation
5. Extensions

Tech Used

Technology	Description	Link
CSS3	Cascading Style Sheets	https://developer.mozilla.org/en-US/docs/Web/CSS
HTML5	Hyper Text Markup Language	https://developer.mozilla.org/en-US/docs/Web/HTML
JavaScript	High Level, Dynamic, Interpreted Language	https://developer.mozilla.org/en-US/docs/Web/JavaScript
NodeJS	Open Source Javascript Runtime Environment, Execute Javascript code server side	https://nodejs.org/en/
PrismJS	Lightweight, extensible syntax highlighter for the web	https://prismjs.com
Puppeteer	Node library which provides a high-level API to control Chromium over the DevTools protocol	https://pptr.dev
Vercel CLI	Run Vercel serverless functions locally	https://vercel.com/docs/cli

Installation

Running Locally

Make sure Node.js and NPM are installed.

1. Clone/Download the repository and cd into the project directory

git clone https://github.com/cyberpirate92/code2img.git
cd code2img

2. Install dependencies

npm install

3. Run the dev server

NODE_ENV=development vercel dev

The app will now be running at https://localhost:3000

Using the API

Using Postman

Postman is an API client that makes API testing easy.

1. Download and install Postman from https://www.postman.com/downloads/
2. Open Postman and import the Postman folder.
3. In the environment dropdown, select code2img-local if you are running the app locally, otherwise select code2img-prod.
4. You can find the API operations in the sidebar under code2img.

API Documentation

The API supports the following 3 operations

• Get Image
• List themes
• List languages

Get Image

• HTTP Method: POST
• Endpoint: /api/to-image
• Content-Type: text/plain
• Response Content Type: image/png

Query Parameters

Parameter	Required?	Data type	Description	Possible/Example values
theme	required	string	The name of the color theme. All the color themes are from https://github.com/PrismJS/prism-themes	a11y-dark, atom-dark, base16-ateliersulphurpool.light, cb, darcula, default, dracula, duotone-dark, duotone-earth, duotone-forest, duotone-light, duotone-sea, duotone-space, ghcolors, hopscotch, material-dark, material-light, material-oceanic, nord, pojoaque, shades-of-purple, synthwave84, vs, vsc-dark-plus, xonokai. Samples for all themes can be found here.
language	required	string	The name of the programming language. This will be used for syntax highlighting.	c, css, cpp, go, html, java, javascript, jsx, php, python, rust, typescript
line-numbers	optional. Default = false	string	Show/Hide line numbers.	true / false
scale	optional. Default = 2	number	The device scale factor used to render the image. Higher values will lead to bigger image resolutions and higher file sizes. Default value is 2	Any number in the inclusive range 1-5
background-color	optional. Default = yellow	string	Set a background color. Any valid values used for css background property can be used. Alternatively, If a background image is required, use background-image instead.	red, #f00, #ff0000 rgb(255, 0, 0), rgba(255, 0, 0, 0.6), radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)
background-image	optional	string	Set a background image. Any valid image URL can be used. Higher resolution images can cause response to be significantly delayed.	https://picsum.photos/1920/1080
show-background	optional. Default = true	string	Show/Hide background.	true / false
padding	optional. Default = 5	number	Amount of padding in the background. Setting padding to 0 is equivalent to setting show-background=false.	Any number in the inclusive range 0-15

Description: Given a code snippet in the request body, an image will be returned with the specified theme and language options.

List themes

• HTTP Method: GET
• Endpoint: /api/themes
• Response Content Type: application/json

Description: Get a list of all supported themes.

List languages

• Http Method: GET
• Endpoint: /api/languages
• Response Content Type: application/json

Description: Get a list of all supported languages.

Extensions

Platform	Source	Download
Google Chrome Extension	Source Code	Chrome Web Store