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, …).

Quando o site não tem um formatador para código (como o caso do iMasters), o código fica sem nenhuma cor ou destaque, tornando-o pouco intuitivo ou interessante. É por isso que geralmente usamos 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!

https://youtu.be/6KA3j71wxn8

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.

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.

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

• Padding (vertical e horizontal)
• Fonte (estilo, tamanho)
• Line Numbers (on/off)
• Prettify (você pode subir uma configuração personalizada)
• Drop Shadow
• 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.

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

Agora não tem mais desculpas para mostrar os seus códigos “sem sal” 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.

Referências

• https://carbon.now.sh/
• https://medium.com/code-prestige/carbon-imagens-do-seu-c%C3%B3digo-com-visual-incr%C3%ADvel-7854c5f05fd4