Como trabalhar com Markdown com sabor do GitHub no Linux
Markdown é uma linguagem de formatação criada para a web. O objetivo do markdown é facilitar a vida quando estamos escrevendo na internet. Com o tempo, muitos tipos de descontos são criados. Mas neste artigo, nosso foco será principalmente no Github Flavored Markdown (GFM).
O Github é baseado no CommonMark. Existem muitos recursos adicionais suportados no GFM, como tabelas, delimitação de código, etc. Vamos começar e explorar a sintaxe do GFM e como usá-lo em diferentes casos.
Estou usando o VScode para demonstrar isso, mas você pode escolher qualquer editor Linux adequado para você. Alguns editores como Atom e Vscode vêm com suporte a markdown e para alguns editores, precisamos instalar um plugin de markdown.
Para trabalhar com markdown o arquivo deve ser salvo com .md ou .markdown como extensão.
Como adicionar títulos ao editor Markdown
Existem 6 níveis de título suportados na redução. Para criar um título, use o símbolo Hash (#) seguido de um espaço e do nome do título. Quanto maior o valor do hash, menor o tamanho do título.
NOTA: H1 e H2 terão um estilo de sublinhado por padrão.
Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading 6
Às vezes você pode querer alinhar o título em direção ao centro. Mas a triste história é que o alinhamento não é suportado por padrão na redução. Por padrão, os títulos são renderizados com alinhamento à esquerda. Você pode incorporar tags HTML/CSS no markdown para obter alinhamento.
<h1 style="text-align:center">MARKDOWN</h1>
<h1 style="text-align:left">MARKDOWN</h1>
<h1 style="text-align:right">MARKDOWN</h1>
<h1 style="text-align:justify">MARKDOWN</h1>
Como adicionar comentários ao editor Markdown
Os comentários são uma forma de documentar certas coisas para uma melhor compreensão do código/documentos. Isso não será renderizado pelo mecanismo de redução.
<!--
Comment block
-->
Como renderizar texto como uma única linha
Normalmente, quando você digita algo em linhas separadas, uma após a outra, a marcação irá renderizá-lo como uma única linha.
Você pode criar quebras de linha de duas maneiras.
- Quebra de linha suave
- Quebra da linha dura
Quebras suaves de linha podem ser criadas adicionando dois espaços no final da linha. Dessa forma, a marcação renderizará cada linha em linhas separadas.
Quebras de linha rígida podem ser criadas inserindo uma linha vazia entre cada linha.
Como adicionar linhas horizontais
A regra horizontal pode ser criada colocando três ou mais asteriscos (*), hífens(-) ou sublinhados(_) em uma única linha. Também não há problema em adicionar espaço entre eles.
* * *
---
___
Como deixar um texto em negrito
Para tornar palavras ou linhas NEGRO, coloque a palavra ou linhas entre asteriscos duplos (**) ou sublinhado duplo (__).
**Making this sentence bold using double asterisks.**
__Making this sentence bold using double underscore.__
Como fazer um texto em itálico
Para formar palavras ou linhas em ITÁLICO, coloque a palavra ou linhas entre asteriscos simples (*) ou sublinhado único (_).
*Making this line to be italicized using asterisks.*
_Making this line to be italicized using underscore._
Como adicionar um tachado às linhas
Para atacar qualquer coisa você tem que usar um til duplo. Coloque tudo o que você precisa riscar entre os tils duplos (~~).
I am just striking the word ~~Howdy~~.
~~I am striking off the entire line.~~
Como adicionar uma citação em bloco
Use Maior que um símbolo (>) para blockquote.
> Single line blockquote.
Veja como a citação em bloco abaixo é renderizada. Ambas as linhas são renderizadas na mesma linha.
> first line
> Second line
> Third line
> Fourth line
Você pode usar o retorno de linha deixando dois espaços no final de cada linha. Desta forma, cada linha não será renderizada em uma única linha.
Deixe as linhas alternativas vazias prefixadas por um símbolo maior. Dessa forma, você pode criar uma quebra de linha entre cada linha do mesmo bloco.
> first line
>
> Second line
>
> Third line
>
> Fourth line
Você também pode criar aspas em bloco aninhadas adicionando dois símbolos maiores que (>>).
Criar código embutido
Use BACKTICK para criar código embutido. O exemplo abaixo demonstra como criar código embutido. Veja a palavra notas e leia-me, que foi renderizada como código embutido.
Markdown is one of the best tools for taking `notes` and creating `readme` files.
Adicionar destaque de sintaxe de bloco de código
Adicione tabulações ou 4 espaços e coloque seu código para renderizá-lo como um bloco de código. Como alternativa, coloque seu código entre três crases para fazer com que o bloco seja renderizado como um bloco de código. O recurso importante a ser observado aqui é o destaque de sintaxe. Normalmente quando você coloca o código dentro do bloco não há nenhum esquema de cores aplicado a ele.
```
echo "Hello world"
```
Agora veja o mesmo exemplo, o esquema de cores é aplicado automaticamente. Isso é possível adicionando o nome da linguagem de programação após três crases que aplicarão o esquema de cores ao código.
```bash
echo "Hello world"
```
Exemplo de código python.
```python
def fp():
print("Hello World!!!")
fp()
```
Exemplo de consulta SQL.
```sql
SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE
WHERE SALARY_EMP<(SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE)
```
Crie listas ordenadas e não ordenadas
Os itens podem ser organizados em listas ordenadas e listas não ordenadas em descontos. Para criar uma lista ordenada, adicione números seguidos de um ponto final. A parte interessante a ser observada aqui é que o número não precisa ser sequencial. O mecanismo Markdown é inteligente o suficiente para entender que é uma lista ordenada, mesmo se fizermos a ordenação não sequencial.
No exemplo abaixo, você pode ver que criei uma lista ordenada com ordem não sequencial (10, 15, 150), mas o mecanismo de redução a renderiza na ordem correta. Você também pode criar uma lista aninhada conforme mostrado na imagem.
Para criar uma lista não ordenada, use sinal de adição (+) asteriscos (*) ou traço (-) seguido por um espaço e conteúdo da lista. Semelhante à lista ordenada, você também pode criar uma lista aninhada aqui.
Criar lista de tarefas
Este é um recurso especial do GFM. Você pode criar uma lista de tarefas conforme mostrado na imagem abaixo. Para marcar a tarefa como concluída, você deve adicionar 'x' entre colchetes, conforme mostrado na imagem.
Adicionar links ao texto
Para adicionar um link, siga a sintaxe abaixo.
[Tecmint](https://linux-console.net "The best site for Linux")
Vamos dividir a sintaxe em 3 partes.
- Texto a ser exibido – Este é o texto que será colocado entre colchetes ([Tecmint]).
- Link – você colocará o link real entre parênteses.
- Título – Ao passar o mouse sobre o texto, será exibida uma dica de ferramenta para o link. O título deve ser colocado entre aspas conforme mostrado na imagem.
Na imagem abaixo você pode ver que “Tecmint” é meu texto de exibição e quando eu clicar nele ele me redirecionará para “linux-console.net”.
Você também pode criar links colocando-os entre colchetes angulares < .
Adicionar links às imagens
A sintaxe da imagem é semelhante à adição de links. Para adicionar uma imagem, siga a sintaxe abaixo.
Vamos dividir a sintaxe em 3 partes.
- Texto alternativo – O texto alternativo será colocado entre colchetes (![texto alternativo]). Se uma imagem estiver quebrada ou não for possível carregar, este texto será exibido junto com um símbolo quebrado.
- Link – Dentro dos colchetes você colocará o link real para a imagem.
- Título – Ao passar o mouse sobre a imagem, será exibido o nome da imagem. O título deve ser colocado entre aspas conforme mostrado na imagem.
Você também pode criar um link com imagens. Quando um usuário clica na imagem ele será redirecionado para um link externo. A sintaxe permanece a mesma com poucas modificações. Coloque a mesma sintaxe que usamos para inserir uma imagem entre colchetes seguida por um link entre parênteses.
[](https://en.wikipedia.org/wiki/Markdown)
Crie uma tabela
Tabelas não são suportadas na versão original do markdown. É um dos recursos especiais que acompanham o GFM. Vamos ver como construir uma mesa passo a passo.
A primeira parte é criar nomes de colunas. Os nomes das colunas podem ser criados separando-os com barras verticais (|).
| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
Na segunda linha, use travessões (-) em combinação com dois pontos (:). Os traços informam ao mecanismo de redução que isso deve ser renderizado como uma tabela e os dois pontos decidem se nosso texto deve ser alinhado ao centro, à esquerda ou à direita.
| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
:---: ⇒ Center alignment
:--- ⇒ Left alignment
---: ⇒ Right alignment
A partir da terceira linha você pode começar a criar registros. Os registros devem ser separados por uma barra vertical (|).
| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
| Ravi | 30 | 127 |
| karthick | 27 | 128 |
Na imagem acima, você pode ver que a tabela foi renderizada corretamente. A coluna 1 está alinhada ao centro, as colunas 2 e 3 estão alinhadas à esquerda e à direita. Se estiver usando Vscode, você pode usar “Markdown Table Prettifier” para formatar a tabela de maneira organizada.
Crie um emoji
GFM oferece suporte a uma ampla variedade de emojis. Dê uma olhada na folha de dicas de emojis.
É isso neste artigo. Se você tiver algum comentário, poste-o na seção de comentários.