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:
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.
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:
- Imagem PNG ou SVG
- 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.
Top comments (0)