snap-crackle-shot

Snapshot

A CLI tool that grabs screenshots of code files and outputs them for later use, can be used for documentation or whatever your imagination can come up with :)

It will also generate html snapshots of your code files with an applied code theme of your choice, this can then be embedded in a website, for easy copying and pasting or just viewing.

Installation

You can use the package in two ways, the first is using it as a CLI client and the second is using it as a Dependency in a NodeJS project

As CLI client

Linux & Mac

npm i snap-crackle-shot --global

Windows

npm link snap-crackle-shot

As Dependency

npm install snap-crackle-shot --save

Uninstall

npm uninstall -g snap-crackle-shot

Examples

Language support

The tool uses highlightjs for its styling capabilities and highlightjs supports a plethora of languages. You can check all supported languages as seen below.

node snapshot -supported

Example output

┌─────────┬────────────────────────────────┬──────────────────────────────────────────────────────────┐
│ (index) │            language            │                         fileType                         │
├─────────┼────────────────────────────────┼──────────────────────────────────────────────────────────┤
│    0    │              '1C'              │                           '1c'                           │
│    1    │              '4D'              │                           '4d'                           │
│    2    │             'ABAP'             │                     'sap-abap, abap'                     │
│    3    │             'ABNF'             │                          'abnf'                          │
...

NOTE: Please use the fileType when specifying languages in the relevant command.

Code Styling

The tool allows for customizing the code style, for example you might want to use GitHub code styling. You can check all available styles as seen below.

Command to run

node snapshot -themes

Example output

┌─────────┬────────────────────────────────────────┐
│ (index) │                 Values                 │
├─────────┼────────────────────────────────────────┤
│    0    │              'a11y-dark'               │
│    1    │              'a11y-light'              │
│    2    │                'agate'                 │
...

Update themes

Themes may be updated by the highlightjs library, to get new updates you can run the command below, which will pick up any new themes available

node snapshot -update

Taking Screenshots

To take screenshots of your code files you need to provide the directory with the dir command pointing to your code files. By default, all supported languages will be used and the default theme of github-dark will be applied.

node snapshot dir "/home/user/project"

NOTE: If you do not supply an output directory with -output, --outputDirectory <string> switch, screenshots with be saved in the default location specific to the OS you are on seen below

Windows

C:\snapshots

Linux & Mac

/home/snapshots

Specify output directory for screenshots

Use the -output, --outputDirectory <string> switch to specify the output directory for screenshots.

snapshot dir "/home/user/project" -output "/home/user/snapshots"

Exclude folders

If your project contains folders you do not wish to capture, you can exclude these folders with the -ignore, --ignoreFolders [folders...] switch which takes a list of folder names to exclude as seen below.

node snapshot dir "/home/user/project" -ignore "folder1" "folder2"

Only include specified file types

If you would like to only screenshot certain files, you can use the -types, --fileTypes [types...] switch which takes a list of file types names to include as seen below.

node snapshot dir "/home/user/project" -types "xml" "java"

NOTE: If you do not specify -types then by default all supported languages will be used

Change theme

To change the default theme you can specify a valid theme yourself using the -style, --codeStyle <string> switch as seen below.

node snapshot dir "/home/user/project" -style "a11y-light"

NOTE: To view all available themes please look here.

Change theme per language

If you might have a project that consists of different coding languages, and you would like to specify a different theme per coding language you can do that with the -styles, --codeStyles [styles...] switch by providing a pair of "language:style" arguments as seen below.

node snapshot dir "/home/user/project" -styles "cs:arta" "java:docco"

NOTE: To view all supported languages please look here.

Other

For viewing help in the command line tool you can use

node snapshot -h

and to view help for the dir command you can use

node snapshot dir -h