Styled Code Formats

Generate SVG styled code

Table of contents

• Description
• How to use
• Example
• Visitor stats
• Licensing
• Authors
• Versioning
• Contribution
• Acknowledgement
• Forks
• Issues
• Team Tools
• OpenGraph Card
• Development Support

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.

OpenGraph Card

Development Support

Like Styled Code Formats ? Consider buying me a coffee :)

---