Carbon — Imagens do seu código com visual incrível
Tags: opensource
Published: 2020-01-24 20:08:09

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](https://gist.github.com/) 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](https://thepracticaldev.s3.amazonaws.com/i/4vsgcvq2yrkkpx2nuzeh.png)

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](https://carbon.now.sh/).

### 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!

{% youtube 6KA3j71wxn8 %}

### Mostrando o seu site Like a Boss

O [Carbon](https://carbon.now.sh/) é 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](https://thepracticaldev.s3.amazonaws.com/i/pvqz92tvse4y1sxify52.png)

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](https://thepracticaldev.s3.amazonaws.com/i/uo55kkq478q7rfgqu4t3.png)

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](https://thepracticaldev.s3.amazonaws.com/i/v5mao0nguegqydei87em.png)

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

* [Site oficial do Medium](https://carbon.now.sh/)
* [Artigo publicado no blog da Code Prestige](https://medium.com/code-prestige/carbon-imagens-do-seu-c%C3%B3digo-com-visual-incr%C3%ADvel-7854c5f05fd4)