Skip to content

Open REST API to create beautiful images of code snippets with 20+ color themes and syntax highlighting support for 10+ languages.

License

Notifications You must be signed in to change notification settings

cyberpirate92/code2img

Repository files navigation

code2img

PRs Welcome GitHub license Website

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
  1. Install dependencies
npm install
  1. 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

  • 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

About

Open REST API to create beautiful images of code snippets with 20+ color themes and syntax highlighting support for 10+ languages.

Topics

Resources

License

Stars

Watchers

Forks