Executando verificação de segurança...
100

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

[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]


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)

Hello Wolrd

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:

TituloColuna a centroColura a direita
Dado 1Dado 2Dado 3
Dado 4Dado 5Dado 6
Dado 7Dado 8Dado 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.

[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. 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 2

[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:
❤️ 😊

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

Footnotes

  1. Nota_1 Texto de rodapé 1.

  2. Nota_2 Texto de rodapé 2.

Carregando publicação patrocinada...
3
2

Ótimo conteúdo!
Lembrando que para usuários de leitor de telas, descrever as imagens utilizadas nos posts, é de suma importância!
E é exatamente para isto que serve o texto que fica entre os [] (colchetes), para que caso a imagem não seja carregada, este seja mostrado ao usuário, e no caso da acessibilidade, mesmo a imagem carregando visualmente, este é lido pelo leitor de telas, proporcionando uma experiência de acessibilidade a usuários com deficiência visual.

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

Imagem com o texto Hello World

2

Excelente MatheusLima! Adicionei esta informação no conteúdo do post para ressaltar a importância do uso de uma descrição precisa ao postar imagens nos tabs.

2

Perfeito mano!
Não sou programador, apenas simpatizante da área e aprendendo aos poucos, e estava vendo os posts da galera todos bonitos e organizados e não estava encontrando função "clicável" como em comentários de fóruns comuns pra fazer essas formatações.
Valeu!

1

E aí nunes, tranquilo? Gratidão pelo seu feed! 🙏 Justamente por perceber que muitas pessoas não tinham conhecimento dessa linguagem é que resolvi traze-lá aqui para ajudar a melhorar o ambiente como um todo! Fico feliz em saber que pude te ajudar de alguma forma, tmj ✌️

2

Tabelas

| 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 |
TituloColuna a centroColura a direita
Dado 1Dado 2Dado 3
Dado 4Dado 5Dado 6
Dado 7Dado 8Dado 9
1
1

Opa MestriRodrigo, obrigado por contribuir com esse post! Eu tentei inserir as tabelas, mas não consegui fazer direito, agradeço pela sua contribuição! 🙏

1

Citação

> Opa `MestriRodrigo`, obrigado por contribuir com esse post! Eu tentei inserir as tabelas, mas não consegui fazer direito, agradeço pela sua contribuição! 🙏

Opa MestriRodrigo, obrigado por contribuir com esse post! Eu tentei inserir as tabelas, mas não consegui fazer direito, agradeço pela sua contribuição! 🙏

Lembra que também tem a citação.

-1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

[MARKDOWN]

Muito obrigada @lucaswilliams!

É realmente muito útil que Markdown funcione aqui no TabNews, espero que com o tempo liberem mais funções para conteúdos cada vez mais completos.

1
1
1
1
1
1
1
1
1

[Post Markdown]
Viva! É o que eu estava procurando. Valeu lucaswilliams e sabe já estou a salvar convoforme o teu método. filipedeschamps vou consutar agora as markdowns que funcionam na Tabnews, quero estar por dentro.

1

Realmente Util...

Estou "brincando" com o Markdown para conseguir aprender.

  • Deixa uma mensagem motivacional para iniciantes na programação e amantes de tecnilogia que querem mudar de área.*
1
1
1
1
1
1
1

Essa é uma publicação bastante interessante, ainda mais no meu caso que estou iniciando um processo de criação de um Zettelkasten no obsidian, todo conteúdo de markdown está semdo extremamente útil.

1
1
1
1
1
1
1

[SavePost]

Quando ouvi falar da primeira vez dessa linguagem me encantei, tive várias ideias para um README em projetos no GitHub que inclusive ainda estão em minha mente rs mas não consegui colocá-las em prática ainda.

1
1
1
1

[POST DELICINHA]

Muito Útil

Eu já sabia da existencia do markdown, mas nunca soube usar muito bem. Valeu pelo post, vou usar aqui pro TabNews e para projetos também. 😄

1
1
2
1
1
1
1

Incrível quanta coisa tem. Uma ótima implementação que poderiamos fazer é poder analisar algum post como Markdown, assim, quando alguém fazer algo diferenciado, possamos ter como inspiração futura.

1
1
1
1
0
0
0
0