Como utilizar componentes avançados para aprimorar seu artigo
15/09/2023
Publico
As ferramentas aqui apresentadas não são padrão da especificação Markdown. Entretanto eles fazem parte da GitHub flavored markdown (GFM). Elas podem ser úteis na clarificação e melhor didática de seus artigos.
Tabelas são ferramentas extremamente úteis, você pode utilizar a ferramenta de apoio localizada na barra de ferramentas do editor de artigo, ou faze-las manualmente, a sintaxe pode parecer um pouco intimidadora a principio, entretanto seu uso é extremamente simples:
É possível criar tabelas usando a barra vertical (pipes) | para definir colunas e linhas. Os hifens - criam o cabeçalho de cada coluna, enquanto que as barras separam cada coluna. Inclua uma linha em branco antes da tabela para que ela seja renderizada corretamente.
| Primeiro cabeçalho | Segundo cabeçalho |
|---|---|
| Conteúdo da célula | Outra célula |
| Mais informação | Ainda mais |
| Primeiro cabeçalho | Segundo cabeçalho |
| --- | --- |
| Conteúdo da célula | Outra célula |
| Mais informação | Ainda mais |O numero de hifens - precisa ser maior que 3 entretanto não tem limite máximo:
| Primeiro cabeçalho | Segundo cabeçalho |
| ------------------ | ----------------- |
| Conteúdo da célula | Outra célula |
| Mais informação | Ainda mais |As barras verticais (pipes) | laterias são opcionais, você também não precisa fazer o Markdown do código fontes ser alinhado.
| Markdown | Menos | Bonito |
|---|---|---|
| Ainda | renderiza | perfeitamente |
| 1 | 2 | 3 |
Markdown | Menos | Bonito
--- | --- | ---
*Ainda* | `renderiza` | **perfeitamente**
1 | 2 | 3Dois pontos : podem ser utilizados para alinhar colunas.
| Esquerda | Centro | Direita |
|---|---|---|
| coluna 1 é | alinhada a | esquerda |
| coluna 2 é | alinhada ao | centro |
| coluna 3 é | alinhada a | direita |
| Esquerda | Centro | Direita |
| --- | :---: | ---: |
| coluna 1 é | alinhada a | esquerda |
| coluna 2 é | alinhada ao | centro |
| coluna 3 é | alinhada a | direita |Você pode adicionar símbolos de teclas em seus artigos, como por exemplo Ctrl + 2.
A sintaxe de utilização dessa feature é a seguinte
<kbd>Ctrl</kbd>Esse artificio pode ser útil na criação de tutoriais de passo a passo relacionados a computadores e muito mais!
Listas de tarefas são artifícios não interativos. Você pode usá-los por exemplo para apresentar quais passos ja foram executados e quais faltam em um processo.
- [ ] Ovo frito
- [ ] Ovo
- [x] Sal
- [ ] Óleo
- [x] ArrozVocê pode destacar trechos de seus artigos, através do uso da tag mark.
Eu sou um texto destacado 😊.
Eu sou um <mark>texto destacado</mark> 😊.Detalhes ou do inglês Accordion são componentes extremamente úteis, para a tag <details> e dentro dela seu texto para expandir é definido usando a tag <summary>.
Posso colocar o que eu quiser aqui
| E estará | escondido |
|---|---|
| Eba | Eba |
| Eba | Eba |
<details>
<summary>Eu posso ser expandido</summary>
* Olá você me encontrou
*Posso colocar o que eu* **quiser aqui**
| E estará | escondido |
| --- | --- |
| Eba | Eba |
| Eba | Eba |
</details>Para que a cessão seja expandida por padrão, simplismente inclua o atributo open dentro da tag <details>
World!
<details open>
<summary>Hello</summary>
World!
</details>