code-formatter typescript vercel-serverless-functions

Styled Code Formats

Generate SVG styled code

Description

Styled Code Formats is a serverless function that generates dynamically images with styled code format (png, jpeg). For the tech stack, Styled Code Formats using Typescript and serverless function from Vercel stack.

How to use

It's simple, you can copy paste this markdown content, like this one:

![Styled Code Formats](https://styled-code-formats.vercel.app/api?theme=[value]&type=[value]&encoding=[value]&fullPage=[value]&width=[value]&height=[pattern]&selector=[value])

There are several options you can use from the list:

Options	Description	Type	Example	Query Params
[Theme]	Screenshot theme	`String`	default	`?theme=[value]`
[Type]	Image type	`String`	png/jpeg	`&type=[value]`
[Encoding]	Image encoding	`String`	base64/binary	`&encoding=[value]`
[FullPage]	Enable/disable full page view	`Boolean`	true	`&fullPage=[value]`
[Width]	Screenshot image width	`String`	800px	`&width=[value]`
[Height]	Screenshot image height	`String`	800px	`&height=[value]`
[Selector]	Html element selector	`String`	#element	`&selector=[value]`

Here is a list of supported screenshot themes:

Name	Value
Default	default

Example

This is example of using Styled Code Formats:

curl command:

curl -d "data=Y29uc29sZS5sb2coImhlbGxvIHdvcmxkIik=" -X POST https://styled-code-formats.vercel.app/api?[params]

NodeJS script:

import { readFile, writeFile } from 'fs'
import { stringify } from 'querystring'

import * as fetchImport from 'node-fetch'

import { promisify } from 'util'

const fetch = fetchImport.default || fetchImport
const readFileAsync = promisify(readFile)
const writeFileAsync = promisify(writeFile)

const getScreenshot = async (): Promise<void> => {
    const code = await readFileAsync('./typings/form-data/form-data.d.ts')

    const language = 'ts'

    const params = {
        backgroundColor: '#E6EDF8',
        dropShadow: true,
        dropShadowBlurRadius: '68px',
        dropShadowOffsetY: '20px',
        fontFamily: 'Fira Code',
        fontSize: '14px',
        lineHeight: '133%',
        lineNumbers: false,
        paddingHorizontal: '35px',
        paddingVertical: '49px',
        squaredImage: false,
        theme: 'nord',
        widthAdjustment: true,
        language,
    }

    const data = `data=${code.toString('base64')}`

    try {
        const options = {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            referrerPolicy: 'no-referrer',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: data,
        }

        const response = await fetch(
            `https://styled-code-formats.vercel.app/api?${stringify(params)}`,
            options
        )

        if (response.status === 200) {
            const text = await response.text()
            const imageData = `data:image/png;base64,${text.replaceAll('"', '')}`

            await writeFileAsync('./data/image.txt', imageData)
        } else {
            console.error(response)
        }
    } catch (error) {
        console.error(error)
    }
}

void getScreenshot()

Visitor stats

Licensing

Styled Code Formats is distributed under LGPL version 3 or later, [License]. LGPLv3 is additional permissions on top of GPLv3.

Authors

Styled Code Formats is maintained by the following GitHub team-members:

with community support please contact with us if you have some question or proposition.

Versioning

The project uses SemVer for versioning. For the versions available, see the tags on this repository.

Contribution

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us (emoji key).

This project follows the all-contributors specification. Contributions of any kind are welcome!

See also the list of contributors who participated in this project.

Acknowledgement

Forks

Issues

Team Tools

Styled Code Formats Team would like inform that JetBrains is helping by provided IDE to develop the application. Thanks to its support program for an Open Source projects!

Styled Code Formats has experimental support for Gitpod, a pre-configured development environment that runs in your browser. To use Gitpod, click the button below and sign in with GitHub. Gitpod also offers a browser add-on, though it is not required.