Um pouco mais sobre Markdown
Introdução
Recentemente eu fiz uma publicação ensinando alguns conceitos básicos e muito úteis sobre o markdown, só que eu andei dando uma pesquisada mais profunda sobre essa forma criativa e fascinante de mostrar textos e acabei encontrando mais e mais coisinhas. Por isso estou fazendo esse post, para complementar o anterior!!
Sumário
Texto
Itálico e Bold
No post passado, eu mostrei como fazer textos em itálico e bold, só que eu fiz eles separadamente. Para você conseguir utilizar os dois ao mesmo tempo, basta adicionar um asterisco * ou um sinal de sublinhado _ a mais, antes e depois da frase/texto que você deseja tornar itálico e bold
Código:
***itálico e bold***
Você também pode fazer assim (eu acho mais complicado):
**_itálico e bold_** ou __*itálico e bold*__
Citações
Indentação de citações
É possivel indentar citações, para fazer isso, basta você utilizar sinais de maior > um seguido do outro
Tipo
Assim
E assim
Por diante!!
Código:
>Tipo
>>Assim
>>>E assim
>>>>Por diante!!
Outros elementos em conjunto com citações
As citações também suportam outros elementos dentro dela, alguns exemplos são títulos, listas, modificações de textos e por aí vai!!
Esse é o meu título
- E aqui minha lista!!
- Mais um
elemento
Código:
> ### Esse é o meu título
> * E aqui minha **lista**!!
> * Mais um `elemento`
Citações em outros elementos
Assim como é possivel colocar elementos dentro de citações, também conseguimos colocar citações dentro de outros elementos, como por exemplo as litas
- Essa é uma lista
-
Que possui uma
citação!!
Código:
* Essa é uma lista
* >Que possui uma `citação`!!
Tirando a função da crase
Às vezes queremos usar o sinal de crase ` em algum bloco de código, para fazer isso, basta você usar duas crases seguidas `` que assim as crases deixam de ter sua função (se você não entendeu nadinha, acho que os códigos vão te ajudar!!)
Código:
Um só crase dentro de um bloco de código: `` ` ``
Duas crases dentro de um bloco de código: ``` `` ```
Três crases ou mais dentro de um bloco de código: `` ``` `` || `` ````` ``
Tabelas
Alinhamento dos textos
Eu já expliquei como fazer tabelas nesse outro post, mas acabei descobrindo depois que existe um jeito de alinhar os textos dentro da tabela!!
| Texto | Esquerda | Centro | Direita (mais espaço só pra diferença ser perceptivel) |
|---|---|---|---|
| Teste | Teste | Teste | Teste |
Para fazer isso, basta você utilizar os dois pontos : no lugar que você quer a orientação do seu texto!!
| Orientação | Exemplo |
|---|---|
| Esquerda | :------ |
| Centro | :-----: |
| Direita | ------: |
O comportamento padrão dos textos é ficar na esquerda!!
Código:
| Texto | Esquerda | Centro | Direita (mais espaço só pra diferença ser perceptivel)|
| ----- | :------- | :----: | ----------------------------------------------------: |
| Teste | Teste | Teste | Teste |
Usando HTML e CSS
Mesmo estando usando o markdown é possivel usar tags HTML em conjunto com atributos do CSS para criar textos mais diferentes e criar outras funções também!!
Uma tag que eu usei bastante, tanto nesse post, como no post passado foi a tag <a></a> do HTML, ela me possibilitou usar IDs para definir os títulos e assim conseguir navegar pela página usando o súmario, esse é só um exemplo, mas você com certeza pode explorar muito mais isso!!
Código:
- Para criar a tag:
<a id="summary"> Sumário </a>
- Para adicionar o link que leva pra tag:
[Súmario](#omininola-content-summary)
Emojis e outros símbolos
Emojis
Você pode usar emoji shortcodes para conseguir exibir um emoji, para fazer isso, basta digitar o shotrcode do emoji que você quer dentro de 2 sinais de dois pontos ⭐ :star: eu achei uma lista de emoji shortcode no github, veja a lista aqui, mas saiba quem nem todos os emojis vão funcionar
Outra forma de usar emojis é simplesmente colando eles aqui, o que é muito mais fácil, porém é menos maneiro 😃
Símbolos
Você pode usar códigos de símbolos HTML também, aqui tem uma lista deles também, para usar, basta inseri-los no seu documento!! Ω Ω, desses aqui, eu acho que todos funcionam!!
Notas do rodapé
Notas simples
As notas do rodapé1 ... Para adicionar notas assim em sua seu documento, basta usar o acento circunflexo ^ dentro de dois colchetes [] e logo depois do acento, você inclui o número, nesse caso foi 12
Código:
Notas de rodapé simples: [^1], [^2]
Notas grandes
As notas grandes, têm a mesma função que as notas simples, porém, nelas você consegue adicionar alguns elementos, como citações e blocos de código. Mas para utiliza-las, é necessário trocar o número dentro dos colchetes por bignote, a mesma coisa se aplica ao local em que você deseja levar o usuário!!3
Elas também seguem o mesmo princípio de númeração, só precisam ter a palavra bignote dentro dos colchetes4
Código:
Notas grandes de rodapé: [^bignote]
Footnotes
-
As notas de rodapé são aquelas que oferecem informação adicional com interesse para o leitor, mas que não podem estar incluídas no texto corrente de maneira fluida. Por isso, cria-se uma espécie de reenvio (como um asterisco ou um número) e reencaminha-se a informação para o final da página. ↩
-
Importante falar que para conectar essas notas, você precisa inserir também no local onde essas notas serão levadas, para fazer isso, você usa a seguinte combinação
[^1]:, só prestar atenção que o mesmo número que se encontrar dentro dos colchetes, tem que ser o mesmo número que você deseja levar o usuário!! ↩ -
Esse é o código que você colocará no local que você deseja levar suas notas
Código:
Notas simples: [^1]: && [^2]: Nota grande: [^bignote]: -
Código:
Nota grande: [^bignote1]: