TypeScript

Gerador de imagens de código TypeScript

Transforme trechos de TypeScript em imagens que valem a pena compartilhar, sem sair do seu Mac.

Vale a pena fotografar TypeScript justamente porque os tipos são o assunto. Um bloco de código comum tira exatamente aquilo que você queria mostrar.

O Codeshot detecta TypeScript pelo código que você cola, então não há seletor de linguagem para errar. Aqui está o mesmo trecho em três dos 30 temas inclusos, renderizados com as folhas de estilo do próprio app.

type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);
Atom One · escuro
type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);
GitHub · escuro
type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);
Tokyo Night · escuro

Escolhendo um tema para TypeScript

Assinaturas de tipo esticam as linhas rápido. Desligue os números de linha se eles não disserem nada e dê mais margem horizontal à janela, para os genéricos não esbarrarem na borda.

Acertando o tamanho

Deixe a imagem seguir o conteúdo ou fixe uma proporção — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 ou 3:4 — e exporte em 1×, 2× ou 3× para que continue nítida em telas retina. Copie direto para a área de transferência com C ou salve com S.

Veja os 30 temas lado a lado ou leia o fluxo completo.

Feito para TypeScript e outras 59 linguagens

Tudo roda no seu Mac. Seu código nunca sai dele.

Baixar para macOS