Carbon — Imagens do seu código com visual incrível

Se você é assim como eu e gosta de escrever artigos, ensinar programação, ajudar as pessoas e/ou fazer palestras sobre tecnologia, essa dica é especialmente pra você.

Quando não estamos trabalhando com editores de código, fica realmente difícil mostrar o código para alguém. Seja em um slide, em um artigo ou em qualquer outro formato, o código não fica legal porque geralmente não conta com a formatação que temos nos editores (ex: VS Code, Atom, Sublime, …).

Aqui mesmo na plataforma do Medium, se eu quiser mostrar pra vocês uma função em JavaScript (ou em qualquer outra linguagem na verdade), o código não fica muito intuitivo nem interessante:

const soma = (n1,n2) => {
  return n1 + n2;
}

É por isso que geralmente uso o Gist do GitHub pra isso.

Mas e se eu te disser que existe uma outra alternativa bem legal que deixa o nosso código apresentável desta maneira:

O que você acha? Bem legal né? Se achou interessante, leia o resto do artigo (ou veja o vídeo abaixo) para saber mais sobre como funciona o Carbon.

Versão em Vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Não deixe de se inscrever no nosso canal!

Mostrando o seu código like a boss

O Carbon é um projeto de código aberto que tem como objetivo tornar a visualização e compartilhamento de código mais amigável e agradável. O projeto está disponível no GitHub e já conta com mais de 22 mil estrelas, o que de certa maneira mostra o sucesso da ferramenta.

Para utilizá-la o processo é extremamente simples. Sempre que você quiser compartilhar algum trecho de código, basta entrar na home page do Carbon.

Página inicial do projeto Carbon

Todo o processo é feito sem sair desta página. Está vendo onde o código JavaScript está escrito? Pois bem, esta área é editável. Você pode apagar o código que está lá e colocar o que quiser ali, desde JavaScript, Python, Java, até comandos Bash; afinal, o Carbon dá suporte a mais de 30 linguagens de programação e vários temas diferentes.

Opções de personalização do Carbon

Além disso, temos o botão da engrenagem. Nesta opção, encontramos configurações mais avançadas, tais como:

1. Padding (vertical e horizontal)
2. Fonte (estilo, tamanho)
3. Line Numbers (on/off)
4. Prettify (você pode subir uma configuração personalizada)
5. Drop Shadow
6. Etc

Todas estas configurações são salvas em local storage e podem ficar associadas ao seu perfil, basta logar com a sua conta do GitHub no canto superior direito do site.

Configurações avançadas

Por fim, temos o botão de Export. O legal do Carbon é que ele nos dá duas possibilidades muito boas de exportação:

1. Imagem PNG ou SVG
2. Embed por URL ou iFrame

O exemplo que mostrei pra vocês no início do artigo foi usando o Embed por URL. O Medium conseguiu interpretar o link e renderizar o código dando até mesmo a opção para que você possam copiar o seu conteúdo.

Agora não tem mais desculpas para mostrar os seus códigos

assim

nas suas apresentações. ;P

Conclusão

Existem mil e uma maneiras diferentes de mostrar o seu código para uma outra pessoa, mas poucas delas são tão eficientes visualmente quanto o Carbon. Ao imitar os editores de código, a plataforma nos oferece a oportunidade de mostrar trechos de código de uma maneira bonita e eficiente, sem tornar este processo chato e/ou burocrático demais. É uma ferramenta digna de se deixar nos favoritos.

Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! https://www.codeprestige.com.br • Facebook, Twitter, Youtube

Siga o autor deste artigo nas redes sociais e troque uma ideia! https://www.diegopinho.com.br • Twitter, LinkedIn