Artigos de Tecnologia e Negócios > Front-end

Criando anotações com Markdown

Felipe Nascimento
Felipe Nascimento

Recentemente comecei a fazer o curso Javascript: programando na linguagem da web e resolvi me organizar com relação às anotações que estou criando.

Normalmente eu mantenho as anotações em cadernos, que cá entre nós, não é muito eficiente quando preciso procurar algum texto específico, além de que com o passar do tempo eles acabam sendo esquecidos dentro do armário.

Para resolver esse problema eu optei por utilizar o github que além de manter a organização, podemos fazer uso da linguagem de marcação Markdown, que vai converter o nosso texto para um HTML válido.

A primeira aula do curso de Javascript se chama Introdução, agora que o repositório está pronto, podemos partir para as anotações. 

Criando anotações

Para criar um arquivo basta clicarmos em Create new files e teremos acesso ao editor de texto dentro do github. Não podemos nos esquecer de salvar o nome do arquivo com a extensão .md, já que queremos escrever em markdown.

Agora que estamos prontos para escrever, vamos começar com o título. 

Título no markdown

No markdown podemos escolher entre título e variações de subtítulo utilizando a cerquilha # sendo que a quantidade representa o estilo do título:

# Título nível 1
## Título nível 2
### Título nível 3
#### Título nível 4
##### Título nível 5
###### Título nível 6

O nome do primeiro vídeo é “Por que aprender Javascript?” Vamos deixá-lo como título nível 2: 

## Por que aprender Javascript?

Sempre que quisermos saber como está ficando o resultado, podemos clicar em preview changes :

Com o título da primeira aula criado, anotamos alguns tópicos importantes.

Listas ordenadas e desordenadas

Como eu gosto fazer anotações por tópicos, o markdown nos oferece duas possibilidades.

A primeira opção é usar listas ordenadas, colocando o número seguido de ponto antes do tópico:

1. É a linguagem de programação nativa da web.
2. É uma linguagem bastante poderosa que permite que o usuário consiga interagir com a página.
3. O JavaScript está presente em diversas áreas do desenvolvimento, ampliando as habilidades de desenvolvedor para os mais diversos ramos da tecnologia.

No preview changes nossa lista ordenada ficou assim:

A segunda opção é a lista desordenada, para usá-la basta colocar * antes do tópico:

* É a linguagem de programação nativa da web.
* É uma linguagem bastante poderosa que permite que o usuário consiga interagir com a página.
* O JavaScript está presente em diversas áreas do desenvolvimento, ampliando as habilidades de desenvolvedor para os mais diversos ramos da tecnologia.

No preview changes a lista desordenada fica do seguinte modo:

Outra coisa que eu gosto de fazer é destacar palavras chaves, vamos ver como podemos fazer isso com markdown.

Colocando palavras em negrito e em itálico

Para destacar as palavras temos a opção de utilizar negrito **xx** ou itálico *x* nas palavras:

* É a linguagem de programação **nativa da web**.
* É uma linguagem bastante poderosa que permite que o usuário consiga interagir com a página.
* *O JavaScript* está presente em diversas áreas do desenvolvimento, ampliando as habilidades de desenvolvedor para os mais diversos ramos da tecnologia.

Se clicarmos em preview vamos ver o seguinte:

Nas próximas aulas já veremos alguns pequenos trechos de código e felizmente o markdown oferece uma solução muito boa realizar esse tipo tarefa.

Usando bloco de código

O primeiro código que temos contato no curso é uma função alert que exibe o famoso Olá Mundo. Para deixar a anotação com formato de código temos que abrir um bloco com três backticks (```) colocar o nome da linguagem e fechar com três backticks (```).

Novamente clicando em preview changes veremos:

Bem legal essa formatação! 

Durante a aula o instrutor também fez uma citação muito interessante e eu gostaria de indicar que é uma citação. Como podemos fazer isso usando markdown?

Usando blockquote ( citação )

O markdown nos oferece uma maneira bem fácil de criar citações, basta utilizar > antes do texto e como resultado teremos:

Já fizemos anotações de duas aulas, agora vamos mexer um pouco mais no README, deixando mais didático com imagens, links, checkbox e mais algumas informações. 

Colocando uma imagem no README 

Vamos colocar uma imagem para deixar nosso repositório mais feliz e fácil de entender do que se trata. Usamos o seguinte trecho de código:

![imagem](url da imagem)

Se clicarmos no Preview Changes termos:

Na intenção de deixar o README mais completo, vamos criar links que redirecionam para as aulas específicas.

Criando links

Para criar os links para as aulas, basta fazermos: 

[nome da aula](url da aula)

E teremos o seguinte resultado:

Como podemos perceber, Introdução apareceu em azul, o que indica link. Quando clicarmos seremos direcionados para as anotações da aula Introdução.

Uma outra formatação interessante para colocar no nosso README são as checkboxes, que vão indicar se aquela aula está completa ou não.

Checkbox

O código para usar checkbox é bem parecido com o de links, o que diferencia é um colchete extra que se deixamos um X indica que a aula está completa, caso contrário deixamos vazia dessa maneira:

- [ ] [Introdução](https://github.com/felipedotcom/Notes/blob/master/Introducao.md)

Novamente indo em Preview Changes:

Vemos nossas checkbox ao lado das aulas.

Para finalizar as anotações da aula 2, vamos criar uma tabela para ficar mais fácil de visualizar o significado de algumas tags.

Tabela

Para criar uma tabela usando markdown, precisamos fazer a combinação de pipeline | e  traço - :

No Preview Changes a tabela fica assim:

Essa foi a maneira que eu encontrei de organizar meus estudos e, de quebra, aprendi a usar vários tipos de formatação com markdown!

Para saber mais

Nessa lista tem uma infinidade de emojis que podemos usar para deixar nossas anotações mais feliz =) 

E para finalizar vamos colocar uma barra de progresso para indicar o quanto falta finalizar o curso utilizando a seguinte formatação:

Clicando em Preview Changes temos:

A barra de progresso aparece logo abaixo do título, bem legal!

Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação engenheiro front-end. Nela, você verá como programar em Javascript, enquanto usa minhas dicas para criar anotações.

Artigos de Tecnologia e Negócios > Front-end