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.

Marco Paulo Ollivier
Responsive
5 min readJul 27, 2019

--

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 codigo em um linha, 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…

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?

--

--

Marco Paulo Ollivier
Responsive

Software Engineer @flash || Gopher || @gopheriomeetup organizer