Source code shots

Source Code Shots

API to generate beautiful images of your source code.

Documentation

Source Code Shots is free for personal projects with reasonable usage. Please contact me before sending large volumes of requests or if you would like to use Source Code Shots at your company.

Simple Image URL

If you have a short snippet of code, you can create a simple url that will return an image. Only use this method if the resulting URL is less than 2083 characters, otherwise some browsers may reject your request. If it is over 4kb, the server will also reject the request.

This method is ideal for creating dynamic urls to put in the src prop of animg tag.

Path

/api/image

Query Parameters

Param	Type	Example
`code`	`string (required)`	`console.log(%22hello%20world%22)`
`language`	`Supported Language`	`js`
`theme`	`Supported Theme`	`dark-plus`
`tabWidth`	`Positive integer`	`2`

Example

https://sourcecodeshots.com/api/image?language=js&theme=dark-plus&code=console.log(%22hello%20world%22)

<img src="https://sourcecodeshots.com/api/image?language=js&theme=dark-plus&code=console.log(%22hello%20world%22)" />

POST Request

If you have a larger code snippet, you can use a POST request to get image data.

Post requests accept an object with code and settings as JSON and return an image.

Path

/api/image

Headers

Header	Value
`Content-Type`	`application/json`

Body

Type Example

Type	Example
`{ code: string; settings: { language: Supported Language, theme: Supported Theme, tabWidth: integer (defaults to 2) } }`	`{ code: "console.log("hello world"), settings: { language: "js", theme: "dark-plus" } }`

{
  code: string;
  settings: {
    language: Supported Language,
    theme: Supported Theme,
    tabWidth: integer (defaults to 2)
  }
}

{
  code: "console.log("hello world"),
  settings: {
    language: "js",
    theme: "dark-plus"
  }
}

Example

async function fetchImage() {
  const response = await fetch('https://sourcecodeshots.com/api/image', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      code: 'console.log("hello world")',
      settings: {
        language: 'js',
        theme: 'dark-plus',
      },
    }),
  });
  return await response.blob();
}

Get a permanent URL

You can use the same request body as the POST example above to get a permanent URL for your image. You can share the permanent url on social media, put it in an img on a blog, add it to a GitHub issue, etc.

The request accepts an object with code and settings as JSON and returns JSON with a `url` key.

Path

/api/image/permalink

Headers

Header	Value
`Content-Type`	`application/json`

Body

Type Example

Type	Example
`{ code: string; settings: { language: Supported Language, theme: Supported Theme, tabWidth: integer (defaults to 2) } }`	`{ code: "console.log("hello world"), settings: { language: "js", theme: "dark-plus" } }`

{
  code: string;
  settings: {
    language: Supported Language,
    theme: Supported Theme,
    tabWidth: integer (defaults to 2)
  }
}

{
  code: "console.log("hello world"),
  settings: {
    language: "js",
    theme: "dark-plus"
  }
}

Response Body

Type	Example
`{ url: string; }`	`{ url: "https://sourcecodeshots.com/image/yvnYTD8AWdzl2SRIBdwH.png" }`

Example

async function fetchPermanentUrl() {
  const response = await fetch(
    'https://sourcecodeshots.com/api/image/permalink',
    {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        code: 'console.log("hello world")',
        settings: {
          language: 'js',
          theme: 'dark-plus',
        },
      }),
    },
  );
  const json = await response.json();
  return json.url;
}

# Highlight code

You can also use the API to highlight code using the token info API. Submit code to the API and it will return a list of tokens with styling information.

Path

/api/token-info

Headers

Header	Value
`Content-Type`	`application/json`

Body

Type Example

Type	Example
`{ code: string; settings: { language: Supported Language, theme: Supported Theme, tabWidth: integer (defaults to 2) } }`	`{ code: "console.log("hello world"), settings: { language: "js", theme: "dark-plus" } }`

{
  code: string;
  settings: {
    language: Supported Language,
    theme: Supported Theme,
    tabWidth: integer (defaults to 2)
  }
}

{
  code: "console.log("hello world"),
  settings: {
    language: "js",
    theme: "dark-plus"
  }
}

Response Body

Type Example

Type	Example
`{ backgroundColor: string; foregroundColor: string; windowTheme: 'light' \| 'dark'; tokens: Array< Array<{ text: string; foregroundColor: string; backgroundColor: string; isItalic: boolean; isBold: boolean; isUnderlined: boolean; }> > }`	{ "backgroundColor": "#1E1E1E", "foregroundColor": "#D4D4D4", "backdropColor": "transparent", "windowTheme": "dark" "tokens": [ [ { "text": "console", "foregroundColor": "#4EC9B0", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false }, { "text": ".", "foregroundColor": "#D4D4D4", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false }, { "text": "log", "foregroundColor": "#DCDCAA", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false }, { "text": "(", "foregroundColor": "#D4D4D4", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false }, { "text": ""hello world"", "foregroundColor": "#CE9178", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false }, { "text": ")", "foregroundColor": "#D4D4D4", "backgroundColor": "#1E1E1E", "isItalic": false, "isBold": false, "isUnderlined": false } ] ] }

{
  backgroundColor: string;
  foregroundColor: string;
  windowTheme: 'light' | 'dark';
  tokens: Array<
    Array<{
      text: string;
      foregroundColor: string;
      backgroundColor: string;
      isItalic: boolean;
      isBold: boolean;
      isUnderlined: boolean;
    }>
  >
}

{
  "backgroundColor": "#1E1E1E",
  "foregroundColor": "#D4D4D4",
  "backdropColor": "transparent",
  "windowTheme": "dark"
  "tokens": [
    [
      {
        "text": "console",
        "foregroundColor": "#4EC9B0",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      },
      {
        "text": ".",
        "foregroundColor": "#D4D4D4",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      },
      {
        "text": "log",
        "foregroundColor": "#DCDCAA",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      },
      {
        "text": "(",
        "foregroundColor": "#D4D4D4",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      },
      {
        "text": ""hello world"",
        "foregroundColor": "#CE9178",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      },
      {
        "text": ")",
        "foregroundColor": "#D4D4D4",
        "backgroundColor": "#1E1E1E",
        "isItalic": false,
        "isBold": false,
        "isUnderlined": false
      }
    ]
  ]
}

Example

async function highlightCode(code: string) {
  const response = await fetch('https://sourcecodeshots.com/api/token-info', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      code: code,
      settings: {
        language: 'js',
        theme: 'dark-plus',
      },
    }),
  });
  const tokenInfo = await response.json();

  return (
    <pre
      style={{
        color: tokenInfo.foregroundColor,
        background: tokenInfo.backgroundColor,
      }}>
      <code>
        {tokenInfo.tokens.map((lineTokens, idx) => {
          return (
            <React.Fragment key={idx}>
              {lineTokens.map((token, tokenIdx) => {
                const style = {
                  color: token.foregroundColor,
                };
                if (token.isItalic) {
                  style.fontStyle = 'italic';
                }
                if (token.isBold) {
                  style.fontWeight = 'bold';
                }
                if (token.isUnderlined) {
                  style.textDecoration = 'underline';
                }
                return (
                  <span key={tokenIdx} style={style}>
                    {token.text}
                  </span>
                );
              })}
              {idx === tokenInfo.tokens.length - 1 ? null : '\n'}
            </React.Fragment>
          );
        })}
      </code>
    </pre>
  );
}

Supported Themes

These are all of the themes that the API supports. Use the value in the Id column when sending a request to the API.

Contact me if you would like a theme not listed here.

Name	`Id`	Example
Abyss	`abyss`
Aylin	`aylin`
Dark+ (default dark)	`dark-plus`
Light+ (default light)	`light-plus`
GitHub Dark	`github-dark`
GitHub Light	`github-light`
Dark (Visual Studio)	`visual-studio-dark`
Light (Visual Studio)	`visual-studio-light`
High Contrast	`high-contrast`
Kimbie Dark	`kimbie-dark`
Monokai Dimmed	`dimmed-monokai`
Monokai	`monokai`
Night Owl	`night-owl`
Night Owl (No Italics)	`night-owl-no-italic`
Night Owl Light	`night-owl-light`
Night Owl Light (No Italics)	`night-owl-light-no-italic`
Quiet Light	`quietlight`
Red	`red`
Solarized Dark	`solarized-dark`
Solarized Light	`solarized-light`
Tomorrow Night Blue	`tomorrow-night-blue`

Supported Languages

These are all of the languages that the API supports. Use the value in the Id column when sending a request to the API.

Contact me if you would like a language not listed here.

Name	`Id`	Example
Ada	`ada`
Batch	`batch`
C	`c`
C#	`csharp`
C++	`cpp`
Clojure	`clojure`
COBOL	`cobol`
CoffeeScript	`coffee`
Common Lisp	`commonlisp`
Crystal	`crystal`
CSS	`css`
Cucumber (Gherkin)	`gherkin`
D	`dscript`
Dart	`dart`
Diff	`diff`
Django	`django`
Dockerfile	`dockerfile`
Elixir	`elixir`
Elm	`elm`
Erlang	`erlang`
F#	`fsharp`
Fortran	`fortran`
Git Commit	`git-commit`
Git Rebase	`git-rebase`
Go	`go`
GraphQL	`graphql`
Groovy	`groovy`
Handlebars	`handlebars`
Haskell	`haskell`
HLSL	`hlsl`
HTML	`html`
Ignore	`ignore`
INI	`cfg`
Java	`java`
JavaScript	`js`
JSON	`json`
JSON5	`jsonwithcomments`
JSX	`jsx`
Julia	`julia`
Kotlin	`kts`
LaTex	`latex`
Less	`less`
Log	`log`
Lua	`lua`
Makefile	`makefile`
Markdown	`markdown`
Mathematica	`mathematica`
N-Triples	`ntriples`
NGINX Conf	`nginx`
Nim	`nim`
Objective-C	`objective-c`
Objective-C++	`objective-cpp`
OCaml	`ocaml`
Octave	`octave`
Pascal	`pascal`
Perl	`perl`
PHP	`php`
Plain Text	`text`
Powershell	`powershell`
Python	`python`
R	`r`
Racket	`racket`
Raku (Perl 6)	`perl6`
Reason	`reason`
Reason Lisp	`reason_lisp`
ReScript	`rescript`
RISC-V	`riscv`
Ruby	`ruby`
Rust	`rust`
Sass	`sass`
Scala	`scala`
Scheme	`scheme`
SCSS	`scss`
ShaderLab	`shaderlab`
Shell	`shellscript`
SmallTalk	`smalltalk`
SQL	`sql`
Swift	`swift`
TCL	`tcl`
TOML	`toml`
TSX	`tsx`
Twig	`twig`
TypeScript	`ts`
Verilog	`verilog`
VHDL	`vhdl`
Visual Basic	`visualbasic`
Vue HTML	`vue`
XML	`xml`
XQuery	`xquery`
Yaml	`yaml`
Zig	`zig`