Tabnews 🟡🔵🔴 - Aprenda a personalizar suas postagens com Markdown
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
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
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/>.
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
Criando listas
Listas ordenadas
Para este estilo, utilize o "número do item" seguido do ".", desta forma:
1. Lista ordenada
- 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
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.
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:
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 |
Observação: Os espaços utilizados durante a criação da tabela são dispensáveis, portanto sendo utilizados apenas para fins de visibilidade.
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. 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 2
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
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!")
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:
❤️ 😊
Para ver uma lista completa de códigos de emoji, acesse: Lista de emojis
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
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