Um breve resumo...

Opa, tudo bom? Eu espero que sim! Gostaria de iniciar esta postagem com a seguinte pergunta: Você tem interesse em personalizar ou apenas formatar melhor seus posts no Tabnews? Se a resposta for sim, quero lhe apresentar o: Markdown.

O que é markdown e para que serve?

Em resumo, o Markdown é uma linguagem simples de marcação que permite estilizar textos e sinalizar aquilo que é importante em um conteúdo como por exemplo: o que é um tópico, o que são links e imagens, o que é um texto codificado e etc sem a necessidade de utilizar marcações mais complexas. Apesar de muitas aqui já conhecerem a linguagem e a utilizarem, percebi que muitos "Tabbers" novos na comunidade ainda não o utilizam em suas postagens, portanto, gostaria de apresentar algumas dicas de como usá-los em seus posts.

Sumário

Como salvar este post? 1. Formatando títulos 2. Formatando Textos 3. Inserindo Links 4. Imagens 5. Criando listas 6. Citações by Mestrirodrigo 7. Tabelas by Mestrirodrigo 8. Notas de rodapé by SureAndrey 9. Códigos simples by SureAndrey 10. Linguagens de programação by SureAndrey 11. Emojis by SureAndrey 12. Ignorando um caractere markdown by SureAndrey

Comandos Markdown

Formatando títulos

Para criar títulos, utilize "#" antes da palavra, onde o mínimo permitido é 1 e o máximo é 6, veja o exemplo:

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

Resultados:

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

[Retornar ao topo]

Formatando textos

Itálico

Utilize _ ou * no começo e no final de um texto.

*Texto 1* = Texto 1 _Texto 2_ = Texto 2

Negrito

Utilize ** ou __ no começo e no final de um texto.

**Texto 1** = Texto 1 __Texto 2__ = Texto 2

Riscado

Utilize ~~ no começo e no final de um texto.

~~Texto riscasdo~~ = Texto riscado

Subscrito

Utilize <sub> no começo e </sub> no final de um texto.

<sub>Subscrito</sub> = Texto subscrito

Sobrescrito

Utilize <sup> no começo e </sup> no final de um texto.

<sup>Sobrescrito</sup> = Texto sobrescrito

[Retornar ao topo]

Inserindo links

Existem duas formas de criar links com markdown:

Atribuindo uma palavra chave ao link: Coloque dentro das chaves o texto que você quer que apareça e entre os parênteses o endereço de destino, no seguinte formato: [Texto](Link)

Exemplo: [Google](https://google.com) Google

Link direto: Coloque a URL entre < >, o endereço ficará visível e será clicável pelo usuário. A formatação ficará assim: <https://google.com/>.

[Retornar ao topo]

Imagens

Para inserir uma imagem, deve-se adicionar um ponto de exclamação ! no início do código, como no exemplo abaixo:

![Nome_de_exibição](URL da imagem)

Exemplo: ![Imagem com o texto Hello World](http://ltecnologia.com.br/blog/wp-content/webp-express/webp-images/uploads/2015/02/helloworld.png.webp)

Lembrando que para usuários com deficiência visual descrever as imagens utilizadas nos posts é de suma importância! E para isto que serve o texto que fica entre os [ ], para que caso a imagem do post não seja carregada, o texto seja lido por um leitor de telas proporcionando uma melhor experiência de acessibilidade a usuários com este tipo de deficiência.

Informação divulgada pelo Tabber: MatheusLima

[Retornar ao topo]

Criando listas

Listas ordenadas

Para este estilo, utilize o "número do item" seguido do ".", desta forma: 1. Lista ordenada

1. Lista ordenada

Listas não ordenadas

Para este estilo, utilize um * ou - ou + na frente do item da lista.

Exemplos:

* Item 1

• Item 1

+ Item 2

• Item 2

- Item 3

• Item 3

Lista de tarefas

Para criar uma lista de tarefas, coloque um "- [ ]" antes dos itens da lista. Para marcar uma tarefa como concluída, use: "- [x]."

Exemplo: - [ ] Tarefa 1

• Tarefa 1

- [x] Tarefa 2

• Tarefa 2

[Retornar ao topo]

Contribuições

Citações (Quote)

Sugestão dada pelo tabber Mestrirodrigo

Para transformar um texto em uma citação, utilize o sinal > no início da linha que será formatada. Exemplo:

>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Resultado:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[Retornar ao topo]

Tabelas

Sugestão dada pelo tabber Mestrirodrigo

Na criação de tabelas, utilize "|" para criar colunas e "-" para criar as linhas. Exemplo:

| Titulo | Coluna a centro | Colura a direita |
|--------|:---------------:|-----------------:|
| Dado 1 |     Dado 2      |           Dado 3 |
| Dado 4 |     Dado 5      |           Dado 6 |
| Dado 7 |     Dado 8      |           Dado 9 |

Resultado:

Observação: Os espaços utilizados durante a criação da tabela são dispensáveis, portanto sendo utilizados apenas para fins de visibilidade.

[Retornar ao topo]

Notas de rodapé

Sugestão dada pelo tabber SureAndrey

Para criar um link para nota de rodapé, utilize a seguinte sintaxe: [^1] [^2] [^3]...

Exemplo: Lorem Ipsum is simply dummy text of the printing and typesetting industry. [^1] Lorem Ipsum is simply dummy text of the printing and typesetting industry. [^2]

[^1]: <nome_rodapé_1> Escreva aqui o texto que será indexado ao rodapé da página. [^2]: <nome_rodapé_2> Escreva aqui o texto que será indexado ao rodapé da página.

Resultado: Lorem Ipsum is simply dummy text of the printing and typesetting industry. ¹ Lorem Ipsum is simply dummy text of the printing and typesetting industry. ²

[Retornar ao topo]

Códigos simples

Sugestão dada pelo tabber SureAndrey

Para inserir exemplos de código simples dentro de uma publicação utilize: ``

Exemplo: `código` Resultado: Código

[Retornar ao topo]

Linguagens de programação

Sugestão dada pelo tabber SureAndrey

Para exibir um código de uma linguagem de programação utilize a seguinte sintaxe:

```<nome_da_lingugem> <código> ```

Exemplos:

Javascript

```js console.log('Hello World!) ```

Resultado:

console.log('Hello World!')

Python

```py print("Hello World!") ```

Resultado:

print("Helo World!")

[Retornar ao topo]

Emojis

Sugestão dada pelo tabber SureAndrey

Para utilizar emojis em markdown use: ":<nome_do_emoji>:" ou pressione a tecla Win + . no seu teclado.

Exemplo: :heart: :blush:

Resultado: :heart: :blush:

Para ver uma lista completa de códigos de emoji, acesse: Lista de emojis

[Retornar ao topo]

Ignorando um caractere reservado

Sugestão dada pelo tabber SureAndrey

Para ignorar um caractere markdown use: "\" Por exemplo, ao utilizar o seguinte comando: `código` Eu teria o seguinte resultado: código

Porém, ao colocar \ antes do caractere ` eu tenho o seguinte resultado: Ao digitar \`código\` eu tenho o seguinte resultado: `código` e não código

[Retornar ao topo]

Considerações Finais

Postei somente alguns comandos simples e básicos da linguagem, portanto, se você que já utiliza comandos markdowns que ainda não foram citados neste post, peço que comente e ajude aqueles que estão se aventurando nesta linguagem. 😁

Gostou desse post e quer salva-lo? Criei um post sobre isso: Como salvar um post Da uma olhadinha lá 😁

Abraços!

Nem todos os comandos markdowns disponíveis na internet funcionam nesta plataforma, portanto, criei um issue no github da tabnews para que possam sugerir novos comandos a serem incorporados na plataforma futuramente pelos desenvolvedores, acesse em: Tabnews