Como trabalhar com o Markdown com sabor do Github no Linux

- 1871
- 514
- Mr. Mitchell Hansen
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, existem muitos sabores de marcha. Mas neste artigo, nosso foco será principalmente no Markdown com sabor do GitHub (GFM).
Github é baseado em Commonmark. Existem muitos recursos adicionais suportados na GFM, como tabelas, cercas de código, etc. Vamos entrar e explorar a sintaxe para GFM e como usá -la em diferentes casos.
Estou usando o vscode para demonstrar isso, mas você pode escolher qualquer editor Linux que seja adequado para você. Alguns editores como Atom e VScode vêm com suporte de remarca e, para alguns editores, precisamos instalar um plug -in de marcação.
Para trabalhar com o Markdown, o arquivo deve ser salvo .MD
ou .Markdown
como uma extensão.
Como adicionar títulos ao editor de Markdown
Há 6 níveis de cabeçalho suportado no Markdown. Para criar um título, use o hash (#)
símbolo seguido de um espaço e nome do cabeçalho. Maior o valor do hash diminuir o tamanho do cabeçalho.
OBSERVAÇÃO: H1 e H2 terá um estilo sublinhado por padrão.
#Heading1 ## Heading2 ### Heading3 #### Heading4 ##### heading5 ###### tabela 6

Às vezes você pode querer alinhar o caminho em direção ao centro. Mas a triste história é o alinhamento não é suportado por padrão no Markdown. Por padrão, os títulos são renderizados com o alinhamento esquerdo. Você pode incorporar tags HTML/CSS no Markdown para obter alinhamento.
Markdown
Markdown
Markdown
Markdown

Como adicionar comentários ao editor de Markdown
Os comentários são uma maneira de documentar certas coisas para uma melhor compreensão do código/documentos. Isso não será renderizado pelo mecanismo de Markdown.

Como renderizar o texto como uma única linha
Normalmente, quando você digita algo em linhas separadas uma após outra marcação, a renderá como uma única linha.

Você pode criar quebras de linha de duas maneiras.
- Quebra de linha suave
- Quebra de linha dura
Quebras de linha suave pode ser criado adicionando dois espaços no final da linha. Dessa forma, o Markdown renderizará cada linha para ser linhas separadas.

Breaks de linha dura pode ser criado inserindo uma linha vazia entre cada linha.

Como adicionar linhas horizontais
O Regra horizontal pode ser criado colocando três ou mais asteriscos (*), hífens (-), ou sublinhado (_) em uma única linha. Também é bom adicionar espaço entre eles.
* * * --- ___

Como fazer um texto ousado
Para fazer palavras ou linhas AUDACIOSO, cercar a palavra ou linhas entre asteriscos duplos (**)
ou sublinhado duplo (__)
.
** Tornando esta frase ousada usando asteriscos duplos.** __king esta frase em negrito usando sublinhado duplo.__

Como fazer um texto em itálico
Para fazer palavras ou linhas Itálico, cercar a palavra ou linhas entre asteriscos únicos (*)
ou sublinhado único (_)
.
*Fazendo esta linha a ser em itálico usando asteriscos.* _Manando esta linha a ser em itálico usando sublinhado._

Como adicionar uma greve às linhas
Para atingir qualquer coisa que você tenha que usar um duplo tilde. Cercada o que você precisar para atacar entre tildas duplas (~~)
.
Estou apenas impressionando a palavra ~~ Olá ~~. ~~ Estou impressionando toda a linha.~~

Como adicionar um blockQuote
Use maior que um símbolo (>)
para BlockQuote.
> Bloco de linha única.

Veja como a cotação do bloco abaixo é renderizada. Ambas as linhas são renderizadas na mesma linha.
> Primeira linha> Segunda linha> Terceira linha> Quarta linha

Você pode usar o retorno da linha deixando dois espaços no final de cada linha. Dessa forma, cada linha não será renderizada em uma única linha.

Deixe as linhas alternativas vazias prefixadas por maior que um símbolo. Dessa forma, você pode criar uma quebra de linha entre cada linha dentro do mesmo bloco.
> Primeira linha >> Segunda linha >> Terceira linha >> Quarta linha

Você também pode criar cotações de blocos aninhadas, adicionando dois maiores que os símbolos (>>)
.

Crie código embutido
Usar Backtick Para fazer código embutido. O exemplo abaixo demonstra como criar código embutido. Veja as Notas e Readme que foram renderizados como código embutido.
Markdown é uma das melhores ferramentas para fazer 'Notas' e criar arquivos 'Readme'.

Adicione o destaque da sintaxe do bloco de código
Adicione guias 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 backsticks para fazer o bloco ser renderizado como um bloco de código. A característica importante a ser observada aqui é o destaque da sintaxe. Normalmente, quando você coloca o código dentro do bloco, não há 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 backsticks que aplicarão o esquema de cores ao código.
"Bash Echo" Hello World ""

Amostra de código python.
"Python def fp (): print (" Hello World!!!") fp ()"

Amostra de consulta SQL.
"SQL Selecione Max (Salary_EMP) de 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 no Markdown. Para criar uma lista ordenada, adicione números seguidos por um período. A parte interessante a ser observada aqui é o número não precisa ser seqüencial. O mecanismo de marcação é inteligente o suficiente para entender que é uma lista ordenada, mesmo se fizermos o pedido não sequencial.
No exemplo abaixo, você pode ver que eu criei uma lista ordenada com pedidos não sequenciais (10, 15, 150), mas o mecanismo de marcação o renderiza em ordem adequada. Você também pode criar uma lista aninhada, como mostrado na imagem.

Para criar uma lista não ordenada, use mais sinal (+)
asteriscos (*)
ou traço (-)
seguido de um espaço e conteúdo da lista. Semelhante à lista ordenada, você também pode criar uma lista aninhada aqui.

Crie lista de tarefas
Este é um recurso especial do GFM. Você pode criar uma lista de tarefas como mostrado na imagem abaixo. Para marcar a tarefa como concluído, você deve adicionar 'x'
entre aparelho quadrado, como mostrado na imagem.

Adicione links ao texto
Para adicionar um link, siga a sintaxe abaixo.
[Tecmint] (https: // Tecmint.com "O melhor site para Linux")
Vamos quebrar a sintaxe em 3 partes.
- Texto a ser exibido - Este é o texto que será colocado dentro do aparelho quadrado ([Tecmint]).
- Link - Você colocará o link real dentro do parêntese.
- Título - Quando você passa o mouse sobre o texto, ele mostra uma dica de ferramenta para o link. O título deve ser colocado dentro das citações, como mostrado na imagem.
Da imagem abaixo, você pode ver “Tecmint”É o meu texto de exibição e quando eu clicar que ele vai me redirecionar para“Tecmint.com”.

Você também pode criar links colocando -os dentro de suportes de ângulo .

Adicione links para imagens
A sintaxe para a imagem é semelhante a adicionar links. Para adicionar uma imagem, siga a sintaxe abaixo.
![BrokenImage] (https: // www.Bing.com/th?id = amms_ff6f3f7a38b5544421b6e614be6e44912 & w = 110 & h = 110 & c = 7 & rs = 1 & qlt = 80 & pcl = f9f9f9 & cdv = 1 & dpr = 1.25 & PID = 16.1 "Logotipo de Markdown")
Vamos quebrar a sintaxe em 3 partes.
- Texto alternativo - Texto alternativo será colocado entre colchetes (![texto alternativo]). Se uma imagem estiver quebrada ou não é capaz de carregar este texto será exibida junto com um símbolo quebrado.
- Link - Dentro dos colchetes, você colocará o link real para a imagem.
- Título - Quando você passa o mouse sobre a imagem, ele mostrará o nome da imagem. O título deve ser colocado dentro das citações, como mostrado na imagem.

Você também pode criar um link com imagens. Quando um usuário clica na imagem, será redirecionado para um link externo. A sintaxe permanece a mesma com poucas modificações. Cercando a mesma sintaxe que usamos para inserir uma imagem em suportes quadrados seguidos de um link dentro dos parênteses.
[[![BrokenImage] (https: // www.Bing.com/th?id = amms_ff6f3f7a38b5544421b6e614be6e44912 & w = 110 & h = 110 & c = 7 & rs = 1 & qlt = 80 & pcl = f9f9f9 & cdv = 1 & dpr = 1.25 & PID = 16.1 "logotipo de marcação")] (https: // pt.Wikipedia.org/wiki/markdown)
Crie uma tabela
Mesas não são suportados no sabor original do Markdown. É uma das características especiais que vêm com GFM. Vamos ver como construir uma mesa de uma maneira passo a passo.
A primeira parte é criar nomes de colunas. Os nomes de colunas podem ser criados separando -os com tubos (|)
.
| Funcionário_name | Funcionário_age | Funcionário_id |
Na segunda linha, use traços (-)
em combinação com um cólon (:)
. Dashes diz ao mecanismo de marcação que isso deve ser renderizado como uma mesa e o cólon decide se nosso texto deve ser central, esquerdo ou alinhado à direita.
| Funcionário_name | Funcionário_age | Funcionário_id | |: -------------: |: -------------- | ------------: | : ---: ⇒ alinhamento central: --- ⇒ alinhamento esquerdo ---: ⇒ alinhamento direito
Na terceira linha, você pode começar a criar registros. Os registros devem ser separados por um tubo (|)
.
| Funcionário_name | Funcionário_age | Funcionário_id | |: -------------: |: -------------- | ------------: | | Ravi | 30 | 127 | | Karthick | 27 | 128 |

Da imagem acima, você pode ver que a tabela é renderizada corretamente. A coluna 1 está alinhada central, as colunas 2 e 3 são deixadas e alinhadas à direita. Se você está usando Vscode, Você pode usar a “tabela de marcha em marcha ao formato para formatar a tabela cuidadosamente.
Crie um emoji
A GFM suporta uma ampla gama de emojis. Dê uma olhada na folha de dicas emoji.

É isso para este artigo. Se você tiver algum feedback, poste -o na seção de comentários.
- « Como usar a autenticação de dois fatores com o Ubuntu
- Como instalar o cache de varnish para o Apache no CentOS/Rhel 8 »