Nesta sessão iremos aprender como escrever documentações utilizando as marcações necessários para formatar nossos textos e artigos.

Formatando Títulos

Os cabeçalhos de nível 1 a nível 6 são construídos com um # para cada nível.

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Isso resultará na seguinte configuração:

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

---

Separando sessões na página

Para poder criar uma "quebra de sessão" entre elementos de nível de parágrafo. Em markdown, você pode criar um traço vertical com qualquer uma das marcações:

• ___: três consecutivos underlines
• ---: três consecutivos traços
• ***: três consecutivos asteriscos

---

Parágrafos

Para escrever parágrafos basta escrever o texto e após o ponto. Uma quebra de linha de linha pode ser feito com 2 espaços após o ponto final seguido de 1 Enter.

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Destacar Termos

Negrito

Para colocar algum termo em evidência no texto basta inserir dois arteriscos antes e depois do termo:

**Ficará em negrito**

Itálico

Para colocar o texto com aparência de itálico basta inserir um underline antes e depois do termo:

__Ficará em Itálico__

Caso queira deixar o termo em negrio e itálico, basta colocar *** ou ___ antes e depois do termo:

***Ficará em negrito e itálico***

Taxado

Se deseja deixar algum termo taxado para mostrar que aquele termo foi cortado e será substuido posteriormente, basta colocar ~~ antes e depois do termo:

~~Ficará Taxado~~

Marcações HTML

As marcações são variações de estilos pré-definidas que são renderezidas através de tags html.

I18N <abbr>I18N</abbr>

Citation <cite>Citation</cite>

Ctrl + S <kbd>Ctrl + S</kbd>

Text^{Superscripted} <sup>Superscripted</sup>

Text_Subscripted <sub>Subscripted</sub>

Underlined <u>Underlined</u>

Highlighted <mark>Highlighted</mark>

20:14 <time>20:14</time>

x = y + 2 <var>x = y + 2</var>

Citações

Caso queira destacar algum trecho de texto como citação, basta colocar > na frente do texto citado:

> Esse trecho de texto é uma citação
> 
> <cite>- Eagle Tecnologia</cite>

Ficará da seguinte forma a citação:

Esse trecho de texto é uma citação

- Eagle Tecnologia

Caso queira colocar uma citação dentro de outra também é possivel fazendo da seguinte forma:

> Esse trecho de texto é uma citação
> 
> <cite>- Eagle Tecnologia</cite>
>> Essa é a segunda Citação
>> 
>> <cite>- Eagle Tecnologia 2</cite>

Ficará assim:

Esse trecho de texto é uma citação

- Eagle Tecnologia

Essa é a segunda Citação

- Eagle Tecnologia 2

---

Inserindo Notificações

As vezes é necessário inserir alguns avisos ou lembretes no artigo para alertar o leitor de algo na documentação. A plataforma oferece 4 tipos de avisos são eles: Informação, Aviso, Erro e Sucesso.

Para mostrar um Aviso coloque ! na frente do texto:

Para mostrar um Erro coloque !! na frente do texto:

Para mostrar uma Informação coloque !!! na frente do texto:

Para mostrar um Sucesso coloque !!!! na frente do texto:

---

Inserindo Listas

Lista não ordenada

Uma lista de itens em que a ordem dos itens não importa explicitamente. Você pode usar qualquer um dos seguintes símbolos para denotar marcadores para cada item de lista:

* símbolo é válido
- símbolo é válido
+ símbolo é válido

Exemplo:

+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem

Isso será mostrado da seguinte forma:

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Lista ordenada

Basta colocar a numeração seguida do ponto na frente do texto:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Isso será mostrado da seguinte forma:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Se você usar somente 1. na frente de cada termo, a plataforma irá numerar automaticamente:

1. Termo 1
1. Termo 2
1. Termo 3

1. Termo 1
2. Termo 2
3. Termo 3

---

Formatando trechos de Código

Caso queira destacar algum trecho de código ou tag para exemplificar algo, você pode usar a crase para fazer o destaque da tag ou código.

Para destacar o trecho em uma linha use o trecho entre os acentos:

Isso é uma frase que tem o seguinte trecho de código: `<span><span>`

O trecho ficará da seguinte forma:

Isso é uma frase que tem o seguinte trecho de código: <span><span>

Agora se quiser destacar um trecho com quebra de linha, basta usar três crases ``` antes e depois do trecho e especificar na frente das três crases a linguagem que deseja ser renderizado. Confira nesse link as linguagens suportadas.

O trecho ficará da seguinte forma:

{% do assets.addJs('theme://js/jquery.sticky.js') %}
{% do assets.addInlineJs('
    $(document).ready(function(){
       $("#sticker").sticky({topSpacing:0});
    });
')%}

---

Inserindo Tabelas

As tabelas são criadas adicionando pipes como divisórias entre cada célula e adicionando uma linha de traços (também separados por barras) abaixo do cabeçalho. Observe que os pipes não precisam ser alinhados verticalmente.

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Renderizará da seguinte forma:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Alinhar o texto da Tabela

Por padrão, o texto da tabela é alinhado à esquerda utilizando a estrutura padrão. Porém, é possível alinhar o texto conforme a necessidade. Para isso, basta adicionar o símbolo de dois-pontos no lado direito dos traços abaixo de qualquer título irá alinhar o texto à direita para a coluna.

| Option | Description |
| ------: | -----------: |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

O alinhamento será apresentado da seguinte forma:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Para alinhar ao centro, basta inserir o símbolo de dois pontos antes e depois dos traços.

| Option | Description |
| :------: | :-----------: |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

O alinhamento será apresentado da seguinte forma:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Como visto pode ser um pouco doloroso criar tabelas usando Markdown, caso você deseje agilizar esse trabalho, existem ferramentas que fazem isso para você. Escolha qual melhor você se adequa:

• Table Generator
• CSV to Markdown
• Table Editor

  ---

Adicionando Links

Link Externo

Em algum momento na escrita da documentação você irá precisar inserir algum link externo para referenciar alguma informação extra, para isso basta fazer o seguinte:

[Eagle Tecnologia](https://eagletecnologia.com)

O que estiver dentro do colchete será o nome do link e no parêntese o link propriamente dito. Ficará da seguinte forma:

Eagle Tecnologia

Se quiser também pode adicionar um título ao link, basta colocar um espaço depois do link e escrever o título entre aspas:

[Eagle Tecnologia](https://eagletecnologia.com "Soluções Inteligentes para sua Empresa")

O título irá aparecer ao passar o mouse por cima do link:

Eagle Tecnologia

[Eagle Tecnologia](https://eagletecnologia.com "Soluções Inteligentes para sua Empresa"){.exclude}

Eagle Tecnologia

Link Interno

O link interno serve para acessar páginas da Base de Conhecimento. Isso é útil caso queira referenciar uma página para complementar um assunto do artigo que o usuário esteja lendo no momento.

O link interno é semelhante ao externo, porém em vez de colocar uma url você irá colocar o caminho da pasta onde está a página.

[Veja a Introdução](../introducao)

Os ../ significa que está voltando um nível na pasta onde está localizada a página. O nome é sempre o que é mostrado na url da página que pode também ser chamado de slug.

Exemplo:

Veja a Introdução

---

Adicionando Imagens

As imagens têm uma sintaxe similar aos links, mas incluem um ponto de exclamação no início.

! [Logo da Eagle Tecnologia](logo_principal.png)

Exemplo:

Caso queira colocar uma legenda na imagem, basta colocar um espaço depois do link da imagem e colocar a legenda entre aspas.

! [Logo da Eagle Tecnologia](logo_principal.png "Logo Principal da Eagle Tecnologia")

Exemplo:

! [Logo da Eagle Tecnologia](logo_principal.png){.text-left}

Exemplo:

Destacar texto com Cor

Para que você consiga destacar uma palavra, frase ou trecho de texto é necessário marcar a parte que deseja colorir da seguinte forma:

Este é um {c:red}texto vermelho.{/c}

Resultado

Este é um texto vermelho.

A cor deve ser escrita em inglês. Segue a tabela dos marcadores desponíveis.

Cor	Marcador
Amarelo	yellow
Azul	blue
Cinza	gray
Laranja	orange
Magenta	magenta
Marrom	brown
Ouro / Dourado	gold
Prata	silver
Rosa	pink
Roxo	purple
Verde	green
Vermelho	red
Violeta	violet

Caso precisar utilizar uma cor que não esteja listado na tabela, poderá utilizar o código hexadecimal de cores que represente a cor desejada. Segue exemplo utilizando código hexadecimal:

Este é um {c:#B81365}texto colorido com hexadecimal{/c} 

Resultado

Este é um texto colorido com hexadecimal

<kbd>{c:yellow}Essa é uma frase com fundo escuro e texto amarelo{/c}</kbd>

Exemplo:

Essa é uma frase com fundo escuro e texto amarelo

Inserção de ícones

Para inserir ícones diretamente na página basta usar a tag [fa=<icon_alias> /]. Os ícones utilizam a bilbioteca do Fontawesome, use essa página como referência para escolher o ícone a utilizar.

[fa=check-circle /] Meu Ícone

Exemplo:

Meu Ícone

{c:green}[fa=check-circle /]{/c} Meu Ícone Verde
{c:red}[fa=times-circle /]{/c} Meu Ícone Vermelho

Exemplo:

Meu Ícone Verde

Meu Ícone Vermelho

[size=10][fa=check-circle /] Tamanho 10[/size]
[size=20][fa=check-circle /] Tamanho 20[/size]
[size=30][fa=check-circle /] Tamanho 30[/size]
[size=40][fa=check-circle /] Tamanho 40[/size]
[size=50][fa=check-circle /] Tamanho 50[/size]
...

Exemplo

Tamanho 10

Tamanho 20

Tamanho 30

Tamanho 40

Tamanho 50

Inserir Nota de Rodapé e Abreviações

Nota de Rodapé

Para inserir uma nota de rodapé é necessário colocar a sinxate [^<numero da nota>] no decorrer do texto e ao final de todo o conteúdo incluir as notas colocando a mesma sintaxe com sua numeração e depois insira : e escreva a informação da nota. Para exemplificar veja o trecho a seguir:

Sintaxe

Esse é um trecho de texto onde tem uma nota de rodapé aqui [^1] e outra aqui [^2]

Resultado

Esse é um trecho de texto onde tem uma nota de rodapé aqui ¹ e outra aqui ²

Notas sintaxe

[^1]: Essa é a nota de Rodapé 1
[^2]: Essa é a nota de Rodapé 2

Abreviações

As abreviações servem para destacar iniciais do nome completo de um termo. Um explemplo seria em vez de escrever Hyper Text Markup Language você colocaria somente HTML. Neste caso o termo HTML seria destacado e ao passar o mouse em cima do termo apareceria o nome completo. Ex:

Sintaxe

A W3C é uma instituição que convenciona a web.

<!-- no final do documento coloque a sintaxe para o termo que terá a abreviação -->
*[W3C]: World Wide Web Consortium

Resultado

A W3C é uma instituição que convenciona a web.

sintaxe markdown