https://github.com/thatisuday/catage

Node package and CLI tool to convert code into an image with syntax highlighting
https://github.com/thatisuday/catage

cli command-line-tool node nodejs npm syntax syntax-highlighting

Last synced: 3 months ago
JSON representation

Node package and CLI tool to convert code into an image with syntax highlighting

• Host: GitHub
• URL: https://github.com/thatisuday/catage
• Owner: thatisuday
• Created: 2019-09-22T16:51:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T18:46:25.000Z (about 2 years ago)
• Last Synced: 2024-10-28T05:39:22.074Z (3 months ago)
• Topics: cli, command-line-tool, node, nodejs, npm, syntax, syntax-highlighting
• Language: JavaScript
• Homepage: https://medium.com/@thatisuday/taking-easy-screenshots-of-your-code-with-this-awesome-cli-tool-bcc43aec653a
• Size: 6.85 MB
• Stars: 55
• Watchers: 1
• Forks: 7
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# catage (**ca**t to im**age**)

Node package and CLI tool to convert code into image with syntax highlighting.

[![npm-version](https://img.shields.io/npm/v/catage?style=flat-square)](https://www.npmjs.com/package/catage)

[![dependencies](https://img.shields.io/david/thatisuday/catage?style=flat-square)](https://www.npmjs.com/package/catage)

[![downloads](https://img.shields.io/npm/dt/catage?style=flat-square)](https://www.npmjs.com/package/catage)

[![license](https://img.shields.io/npm/l/catage?style=flat-square)](https://www.npmjs.com/package/catage)

![example](/test/set-data-structure.png?raw=true)

## Install using NPM

```bash

npm install --save catage

npm install --global catage

```

## API

```js

const path = require( 'path' );

// import `convert` function and constants

const { convert, IMAGE_FORMATS, LANGUAGES, THEMES } = require( 'catage' );

// convert a code file to an image file

convert( options );

```

### options

| Name | Use | default Value |

| ---- | --- | ------------- |

| inputFile | Required: Relative or absolue path of a code (text) file. | `undefined` |

| outputFile | Required: Relative or absolue of the output image file. | `undefined` |

| language | Language of the code file. | `LANGUAGES.DART` |

| theme | Theme for the syntax highlighting. | `THEMES.FIREWATCH` |

| format | Format of the output image file. | `IMAGE_FORMATS.PNG` |

| ignoreLineNumbers | Avoid adding line numbers to the code. | `false` |

| scale | DPI scale factor of the output image. | `2` |

| hasFrame | Add OSX window frame in the output image. | `true` |

| execute | Execute a command with `inputFile` and inject result in output image file. | `null` |

| displayCommand | An alternative command to display in the output image. | `execute` option value |

> Supported themes: https://iterm2colorschemes.com/ 


Supported languages: https://github.com/highlightjs/highlight.js/tree/master/src/languages 


Supported image formats: png,jpeg

### Example

```js

const path = require( 'path' );

// import library functions and constants

const { convert, IMAGE_FORMATS, LANGUAGES, THEMES } = require( '../' );

// create image of a code file

convert( {

    // by ignoring `outputFile` option, promise resolution will return an image buffer

    outputFile: path.resolve( __dirname, 'set-data-structure.png' ),

    inputFile: path.resolve( __dirname, 'set-data-structure.dart' ),

    language: LANGUAGES.DART,

    format: IMAGE_FORMATS.PNG,

    theme: THEMES.FIREWATCH,

    ignoreLineNumbers: false,

    scale: 2,

    hasFrame: true,

    frameTitle: 'Dart Sets Data Structure',

    execute: 'dart __FILE__', // `__FILE__` placeholder is mandatory

    displayCommand: 'dart sets.dart',

} ).then( () => {

    console.log( 'DONE!' );

} );

```

#### Output Image

![example](/test/set-data-structure.png?raw=true)

## CLI

```

$ catage --help

Usage: catage [options]  

Convert code (text) file to an image file

Options:

  -v, --version                       Prints current CLI version.

  -l, --language            Language of the code in the input file

  -t, --theme                  Theme for the syntax highlighting

  -f, --format                Format of the output image file ( png / jpeg / jpg / svg ).

  -s, --scale                  DPI scale factor of the output image

  --no-line-numbers                   Ignore line numbers in the code

  --no-frame                          Ignore OSX window frame in the output image

  --frame-title           Title of the OSX window frame

  --execute                  Command to execute with the code file. You must provide `__FILE__` placeholder in the command string.

  --display-command   An alternative command to display in the output result.

  -h, --help                          output usage information

```

### 1. Example

```

catage recursive-function.py recursive-function.png -l python -t "Builtin Solarized Light" --frame-title "Recursive Function" --execute="python3 __FILE__" --display-command="python recursive-function.py"

```

#### Output Image



### 2. Simplest example

```

catage go-defer.go go-defer.jpg -l go -t AtomOneLight -f jpeg --no-line-numbers --no-frame

```

#### Output Image



## Tricks

- If you want to take screenshot of a plain text file (no-language), provide any value to the `language` option that does not listed in supported languages. Since it is a plain text file, you can not use `execute` option. Also the code won't be syntax highlighted.

- If you are using another program to trigger `catage` command, then make sure your program is inheriting `STDIO` of the shell process which started it. This is necessary for syntax highlighting.

## Warning

This tool is dependent on `puppeteer` NPM package which has external dependency on headless Chromium browser. After installation, `puppeteer` downloads Chromium browser which could be more than 100MB in zipped format.