DEV Community

Diego Martins de Pinho
Diego Martins de Pinho

Posted on

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

Quando o site não tem um highlighter para código, 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 no caso de slides, nem o Gist salva.

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

Código produzido no Carbon

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 darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Mostrando o seu site 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 homepage 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:

  • 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.

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

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

Top comments (0)