O Básico de Markdown
Markdown é uma sintaxe de marcação leve que permite inserir elementos de formatação em um texto puro. Nele é bastante fácil configurar a visualização de titulos, listas, italico, negrito, links, etc. Aplicativos como o Github possuem suporte a ele.
Vários editores possuem recursos para visualizar as formatações definidas em um arquivo markdown(.md), como por exemplo, no VSCode pode-se utilizar o plugin Markdown All in One. Ou pode-se utilizar um editor online como o dillinger.io(utilize ele para testar as marcações).
Lista de comandos em Markdown
Abaixo você pode ver uma lista dos comandos disponíveis no markdown
Paragráfos
Para criar um parágrafo separamos uma linha de texto com uma linha em branco.
Títulos
Linhas que começam com o caractere # são consideradas um título, o número de # é correspondente ao nível do titulo
# Título <h1>
## Título <h2>
### Título <h3>
#### Título <h4>
##### Título <h5>
###### Título <h6>
Ênfase
Para se adicionar uma enfase a um conteúdo marca-se o inicio dele com asterico * ou um underline _.
- Italico: utiliza-se somente um asterisco ou undeline.
- Negrito:utiliza-se dois asteriscos ou undeline.
*italico*
_italico_
**negrito**
__negrito__
Links
Podemos marcar links de duas formar uma de forma direta simplesmente colocando o endereço do link desejado entre os caracteres de < e > onde o rótulo do link será o próprio endereço do link, ou podemos informar o rótulo do link entre colchetes [] e endereço entre parênteses ().
<https://www.botecodigital.dev.br>
[BotecoDigital](https://www.botecodigital.dev.br)
Imagens
A marcação para inserir uma imagem é semelhante a inserir um link com rótulo, colocamos o rótulo(que seria o texto alternativo da imagem) entre colchetes [] e o link para imagem entre parentes. O caminho do link pode ser absoluto ou relativo ao documento em que foi inserido.
Listas de itens
Para listas não ordenadas inserimos um caractere de asterico * no inicio de cada item da lista
* item 1
* item 2
* item 3
Para listas não ordenadas inserimos um caractere numérico seguido de um ponto no inicio da lista.
1. item 1
2. item 2
3. item 3
Podemos inserir subitens utilizando tabulações.
* item 1
* item 1.1
* item 1.2
* item 2
Para listas de checkbox utilizamos os caracteres de abre e fecha colchetes com um espaço [ ] para um item não marcado e um abre e fecha colchetes com um x para um item marcado [x]. (* alguns parsers não suportam esta macração)
[x] item 1
[ ] item 2
[ ] item 3
Tabela
Para escrever uma tabela separamos as colunas com um pipe | e separamos a linha de título das colunas das de dados utilizando hífens -. Veja o exemplo abaixo para ficar mais claro.
Produto | Quantidade | Valor
---------|------------|---------
Mouse | 1 | R$ 60,00
Teclado | 1 | R$ 120,00
Monitor | 1 | R$ 800,00
Para alinhar o conteúdo das colunas utilizamos o caractere de : na linha de hífens. Colocando o : no lado direito dos hífens a coluna será alinhada a direita, se colocado : na direita e esquerda será alinhado ao centro, se colocado na esquerda será alinhado a esquerda.
Produto | Quantidade | Valor
:--------|:----------:|---------:
Mouse | 1 | R$ 60,00
Teclado | 1 | R$ 120,00
Monitor | 1 | R$ 800,00
Citação
Adicionamos uma citação iniciando a linha com um caractere de maior que >, uma citação pode ter multiplas linhas.
>esta é uma citação
>apenas um exemplo
Código
Temos duas formas de adicionar uma marcação de código. Uma inline e outra em bloco.
Para um código inline colocamos o código entre acentos grave `.
Utilizamos uma tag `<h1>` para titulos importantes
Para blocos de código colocamos todas as linha de código entre três acentos grave `.
```
<?php
echo "Olá Mundo!";
```
Podemos especificar a linguagem do código inserido colocando o nome da linguagem junto a abertura do bloco como mostrado abaixo
```php
<?php
echo "Olá Mundo!";
```
```javascript
alert('olá mundo');
```
Nota de Rodapé
Podemos colocar uma referência de nota de rodapé com a marcação de um acento circunflexo seguido de um identificador, os dois dentro de colchetes. Para adicionar a própria nota de rodapé usa-se a mesma marcação da referência seguida de dois pontos e o texto da nota do rodapé.
Aqui tem uma sentença com uma nota de rodapé . [^1]
[^1]: Esta é uma nota de rodapé.
Tachado
Para marcar um conteúdo como taxado se coloca o texto entre dois sinais de til.
~~Um texto taxado.~~
Highlight
Para destacar um conteúdo colocamos o texto entre dois sinais de igual.
Eu preciso destacar estas ==importantes palavras==.
Subscrito/Sobrescrito
Para colocar um texto subscrito colocamos ele entre acentos til e para sobrescrito entre acentos circunflexo
Subscrito: H~2~O
Sobrescrito: X^2^
Convertendo Markdown em HTML com PHP
Existem diversas bibliotecas para converter Markdown em código HTML, uma interessante e bastante simples é Parsedown que suporta as principais marcações. Utilizamos o composer para instalá-lo.
composer require erusev/parsedown
Primeiro criamos um objeto Parsedown e depois basta passar o código markdown para o método text que irá retornar o código HTML.
include 'vendor/autoload.php';
$parsedown = new Parsedown();
echo $parsedown->text('Olá _Mundo_!');
// Saída: <p>Olá <em>Mundo</em>!</p>
Caso estivermos “parseando” um código não confiável(entrada de usuário) podemos utilizar o método setSafeMode(true) para realizar a sanitização da entrada.
$parsedown = new Parsedown();
$parsedown->setSafeMode(true);
echo $parsedown->text('Uma *tag* <h1>teste</h1>');
Bom era isso, espero que tenha ajudado. T++