Dicas de como escrever um artigo com código fonte no Medium

Você está começando a escrever artigos no Medium, mas não sabe como compartilhar seus exemplos de código? Ou então você já escreve, mas não gosta da solução padrão? Esse artigo vai mostrar para você as alternativas para escrever um artigo no medium de uma maneira que fique fácil compartilhar seus códigos de exemplo.

De um tempo pra cá eu resolvi ser mais participativo na comunidade. Para isso eu comecei a unir o útil ao agradável. Passei a me arriscar a palestrar sobre temas que eu considero interessante ou que estou estudando no momento, passei a compartilhar mais conteúdo de outras pessoas que eu julgo serem úteis etc.

Ainda nessa ideia de transformar o que pode ser bom para os outros, bom pra mim também, tenho tentado escrever mais (que é uma atividade que eu gosto muito de fazer). Dessa forma eu acabo sempre tendo um material pra consulta — para compensar minha memória que nem sempre é boa — e, de quebra, ainda compartilho uma informação consolidada para pessoas que venham a precisar dela no futuro.

Logo Medium

Para essa última atividade, eu decidi que concentraria todo meu material no Medium. Criei publications para que eu pudesse falar sobre temas diversos que me estimulam e assim tenho mantido. Esse aqui em especial (Responsive) é a publication que eu costumo abordar sobre temas voltados a Engenharia de Softwares.

E é justamente nesse contexto de Engenharia de Softwares que acaba demandando um pouco mais de trabalho. Motivo? Compartilhar código. E é pensando nisso que aqui vão algumas dicas para tentar ajudar quem quiser passar a escrever mais sobre o assunto. Então vamos a elas…

Usando os recursos nativos

Nativamente o Medium oferece recursos nativos para compartilhamento de código. Você pode fazer de duas maneiras, código inline ou bloco de código e para ambas, você pode usar alguns atalhos específicos.

Para você adicionar um , basta você começar o que está escrevendo com crase (`). Com isso, você consegue fazer o seu código ficar como o exemplo acima.

Para você criar um blogo de código, existe um atalho que você pode utilizar. Por exemplo:

  • Se estiver em um ambiente Linux ou Windows: Ctrl + Alt + 6 ou ```
  • Se estiver em um ambiente MacOS: ⌘ + Alt + 6 ou ```

E você terá algo parecido com isso…

package mainimport "fmt"func main() {
fmt.Printf("hello, world\n")
}

Usando Github Gist

Com o modelo anterior você tem a vantagem de não precisar de recursos externos para poder colocar seu código para ilustrar seu texto. Entretanto, convenhamos que ele não fica muito atrativo, pois sempre ficará com a mesma cara… cinza. Dependendo do que você está colocando, a legibilidade pode ficar bem ruim. Dessa forma uma opção bem interessante é usar o Github Gist como origem do código. Dessa forma, você terá algo parecido com isso:

Para você obter esse resultado, basta criar um Gist no seu Github e selecionar a opção de compartilhar como Link

Imagem de como compartilhar um Gist como link

Copie e cole esse link na sua publicação e depois de alguns segundos ela aparecerá como no exemplo acima.

Essa é uma opção muito interessante, pois você consegue ter uma legibilidade bem bacana do código.

Usando o JSFiddle

Um outro recurso que eu descobri esses dias e achei incrível é o JSFiddle. Apesar dele ser voltado a quem desenvolve no universo JavaScript + CSS + HTML, é uma ferramenta interessantíssima, pois num único code snnipet você pode colocar várias tecnologias ao mesmo tempo e ainda ter uma aba de resultado como no exemplo abaixo.

A utilização dele é muito simples. Desenvolva seus exemplo na ferramenta e quando você estiver com um resultado que lhe satisfaça, use o link de compartilhamento e cole no medium.

Tela do JSFiddler

Usando o Carbon

A última ferramenta que vamos abordar é o Carbon. Ele é uma opção que normalmente eu utilizo para meus slides, mas que pode servir perfeitamente nos textos do Medium.

Ele oferece algumas opções de compartilhamento como via imagem ou via link. Na opção de link, ela ficará como no exemplo abaixo.

Também se mostrou uma opção muito interessante e que deixa a apresentação do código limpa e elegante.

Tela de utilização do Carbon

Conclusão

A ideia desse texto foi mostrar recursos que podem tornar seus artigos mais atrativos para os seus leitores, facilitando a reutilização dos exemplos que você está compartilhando. Agora basta você escolher o exemplo que mais te agradar e a partir daí é mãos a obra.

Espero que esse artigo tenha sido proveitoso. E você… como escreve seus artigos?

Responsive

Software Engineering Blog & Programming Tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store