LINGUAGEM DE MARCAÇÃO DE TEXTO MARKDOWN ➚

INDEX

  1. O que é linguagem de marcação de texto markdown

  2. Linguagem Markdown x linguagem HTML no documento ".md"

  3. Tag \ Simula comportamento do texto entre aspas "tag html" da linguagem html em documento markdown

  4. Tag # (cancela) Títulos - Simula comportamento das tags html <h1> a <h6>

  5. Estilo das letras

    1. Tag ** (dois asterisco) Texto em negrito - Simula comportamento da tag html <b><\b>

    2. Tag _ (underline) ou * Texto em itálico - Simula comportamento da tag html <i><\i>

    3. É possível combinar o _itálico com o **negrito**

    4. Tag ~~ Texto tachado - Simula comportamento da tag html <s><\s>

    5. Tag ` (crase) texto enfatizando - Simula comportamento da tah html <em><\em>

  6. Listas em markdown

    1. Tag - (traço) Lista não numeradas - Simula comportamento da tag html <ul>

    2. Tag . (ponto) Lista numeradas - Simula comportamento da tag html <ol>

    3. Tag [ ] Listas de tarefas - Simula o comportamento da tag <input type="checkbox">

  7. Tag ___Simula comportamento da tag html <hr> (Desenha linha horizontal)

  8. Tag >Citações - Simula comportamento da tag html <blockquote>

  9. Tag [](\ "") Âncora para links - Simula a tag html <a></a>

  10. Tag ![](\ "") Âncora para imagem - Simula a tag html <img>

  11. Escrita de equações matemáticas

  12. Tabelas

    1. Tabela simples

    2. Tabelas de links, onde os links ficam fora da tabela

  13. Como configurar e usar emoji em textos markdown no vscode

  14. Mermaid Fluxogramas e diagramas

    1. Dica de como instalar suporte a fluxograma em documentos markdown

    2. Diagramas de relacionamento de entidades

      1. classDiagram
      2. erDiagram

    3. Gráfico de pizza

  15. Tag html <details>

  16. Tag ``` As 3 crases - Simula a tag html <code>

  17. Notas de rodapé em documentos markdown

  18. Editores markdown para linux

    1. Visual Studio Code

      1. Extensões vscode:
        1. Indispensável essa extensão: Markdown Highlight.js
        2. Markdown Checkboxes

    2. Editor ReText vem na distribuição ubuntu

    3. Editor ghostwriter vem na distribuição ubuntu

    4. Google docs com a extensão GD2md-html

    5. Editor web dillinger

    6. Editor web stackedit

    7. Editor natable

  19. Gerador de site baseado em arquivo markdown

  21. Referências

CONTEÚDO

  1. O que é linguagem de marcação de texto markdown.

    1. Desenvolvido em 2004 por John Gruber e Aaron Swartz para simplificar a estruturação de um texto, o Markdown é um sistema de formatação aberto que torna a escrita e a leitura mais simples. Com uma codificação mínima, além de fácil, ele é visualmente mais "limpo" e pode ser convertido facilmente para HTML.

    2. Notas:

      1. Ferramentas usadas para produzir este documento.

      2. basic-syntax

    3. [🔙]

  2. Linguagem Markdown x linguagem HTML no documento .md.

    1. As tags html podem ser incluídas em um documento markdown.

    2. Tags da linguagem Markdown não serão reconhecida dentro de tags html ex: (<table> , <div>, <pre>).

    3. O código .CSS pode ser incluído na primeira linha do documento Markdown.

    4. Para que um códigos html ou javascript seja visualizado deve-se usar 3 crases (```) + nome da linguagem.

      1. Exemplos:

    5. [🔙]

  3. Para exibir um caractere literal que de outra forma seria usado para formatar texto em um documento Markdown, adicione uma barra invertida ( \ ) na frente do caractere.

    1. Exemplo:

      1. O asterisco ( * ) é um tag markdown e para que ele seja visualizado em um texto o mesmo deve ser precedido do caractere ( \ ).
        1. Exemplo:
          1. \*
      2. O <div> estaria invisível se não fosse o caractere \ antes de < e antes >.

    2. [🔙]

  4. Como criar a tag html <hx> onde x varia de 1 a 6 em um documento Markdown?

    1. Usar o caractere # em frente do texto da seguinte forma:

      1. # h1
      2. ## h2
      3. ### h3
      4. #### h4
      5. ##### h5
      6. ###### h6
      7. Exemplo do resultado

    2. [🔙]

  5. Estilo das letras

    1. Dois asterisco (**) no começo e dois asteriscos (**) no fim da frase muda a fonte da frase para negrito.

      1. Exemplo:

        1. (**)Esta frase está em negrito (**)
        2. Esta frase está em negrito.

      2. [🔙]

    2. As fontes itálica pode ser obtida inserindo underline ( _ ) no início e no fim da frase.

      1. Exemplo:

        1. _Exemplo de itálico_
        2. Exemplo de itálico

      2. [🔙]

    3. É possível combinar o _itálico com o **negrito**_

      1. É possível combinar o _itálico com o **negrito**_

      2. É possível combinar o itálico com o negrito

      3. [🔙]

    4. A tag ( ~~ ) no inicio e no fim da texto, muda o estilo da fonte para que desenhe uma linha horizontal no centro do texto.

      1. Exemplo:

        1. ~~Este frase sairá como uma linha horizonta no centro dela.~~
        2. Este frase sairá como uma linha horizontal no centro dela.

      2. [🔙]

    5. Para dar ênfase ao texto usar o caractere crase (`) no inicio e no final do texto.

      1. Exemplo:

        1. `Esta frase está com estilo ênfase`.
        2. Esta frase está com estilo ênfase.

      2. [🔙]

    6. [🔙🔙]

  6. Listas em markdown

    1. Listas não ordenadas

      1. Um asterisco ( * ) cria uma lista não ordenada e tabula com a tecla tab.

        1. Exemplo:
          1. - Grupo
            1. - Linha 01.
            2. - Linha 02.
            3. - Linha 03.
            4. Resultado do exemplo

      2. [🔙]

    2. Listas ordenadas ou numerada

      1. Um ponto parágrafo ( . ) após o número, cria uma lista ordenada com valor inicial igual ao número digitado e tabula com a tecla tab.

      2. Atenção: No vscode quando alteramos um número da sequência a lista dos número seguintes são alterados porém não altera o espaçamento dos números seguintes. Para que agente não perca o andamento do projeto é bom instalar a extensão markdownlint.

      3. É possível criar listas não ordenadas dentro de listas ordenadas.

        1. Exemplo:
          1. titulo 01
            1. item 01
            2. item 02
              • item 01
              • item 02
            3. item 03
          2. título 02
          3. título 03

      4. [🔙]

    3. Listas de tarefas - Simula o comportamento da tag <input type="checkbox">

      1. item 01 [x]
      2. item 02 [ ]
      3. item 03 [ ]

      • item 01 [x]

      • item 02 [x]

      • item 02 [x]

      • [🔙]

  7. Como criar a tag html <hr> em documentos markdown?

    1. Três underline (___) juntos desenha uma linha horizontal.

      1. Exemplo:
        1. ___
        2. Veja o resultado do exemplo

    2. [🔙]

  8. _Usar o sinal (>) no início da frase para indicar citação. Citações podem ser aninhadas concatenando o sinal (>). Ex: >>> _

    1. Veja o exemplo de citação em anexo...

    2. [🔙]

  9. As tags [texto](#url "hint")

    1. Simula a tag html <a href="#url" title="hint">texto</a> (âncora)

      1. [texto] Local onde o texto visível do link é inserido.
      2. (#url "hint") Simula o atributo href="#url" e title="hint" da tag html <a>.
      3. Exemplo:
        1. [texto visível do link](#url "Esse texto é visualizado quando o mouse é posicionado em cima do link")
          1. texto visível do link
        2. [A tag markdown não aceita Javascript]("javascript:alert('Hello World!');")
        3. Caso queira executar javascript é preciso usar o próprio html.
        4. Exemplo:
          1. Execute JavaScript
        5. Como enviar e-mail usando tags markdown:
          1. Usar o link [Enviar e-mail](mailto:example@gitlab.com "Enviará um e-mail para: mailto:example@gitlab.co ")
          2. Exemplo:
            1. Enviar e-mail
        6. Link para um id dentro do documento: [Ir para o topo deste documento](#id_topo)
        7. Ex: Ir para o todo deste documento

    2. [🔙]

  10. As tags ![Texto Alternativo](#url-img "hint")

    1. Simula a tag html <img src="#url" alt="Texto Alternativo" title="hint"> (âncora da imagem)

      1. _ ! _ O sinal de exclamação indica que a sequência seguinte trata-se de uma imagem.
      2. _[Texto Alternativo] _ Se por alguma motivo a imagem não poder ser visualizada o texto alternativo é visualizado.
      3. _(#url-img "hint") _ Simula o atributo src="#url-img" e title="hint" da tag html <img>.
      4. Exemplo:
        1. ![texto alternativo](#url-img "Esse texto é visualizado quando o mouse é posicionado em cima da imagem")
          1. Logomarca linux
          2. Nota: A imagem será visualizada na posição em que é referênciada pelo documento.
            1. ===============>Logomarca linux

    2. [🔙]

  11. Escrita de equações matemáticas:

    1. A fórmula deve estar entre ($$).

      1. Exemplos: Letras = $$letra$$
        1. Letra (mu):$$\mu$$

          1. μ\mu

        2. Letra sigma: $$sigma$$

          1. σ\sigma

        3. O acento circunflexo desenha em sobrescrito: $$ 2^{sobrescrito}$$

          1. 2sobrescrito2^{sobrescrito}

        4. Letra sigma ao quadrado: $$\sigma^{2}$$

          1. σ2\sigma^{2}

        5. O ( _ ) underline desenha em subscrito: $$3_{subscrito}$$

          1. 3subscrito3_{subscrito}

        6. Letra alfa:$$\alpha$$

          1. α\alpha

        7. Letra beta: $$\beta$$

          1. β\beta

        8. Letra epsilon: $$\epsilon$$

          1. ϵ\epsilon

      2. Exemplo: Fórmulas= $$Expressão matemática$$
        1. $$f(x*{i}) = \alpha*{i} + \beta*{i} x*{i} + \epsilon_{i}$$

          1. f(xi)=αi+βixi+ϵif(x_{i}) = \alpha_{i} + \beta_{i} x_{i} + \epsilon_{i}

        2. $$f(x) = ax^2 + bx + c $$

          1. f(x)=ax2+bx+cf(x) = ax^2 + bx + c

        3. e=mc2e = mc^2

    2. O site math.justforfun tem um serviço que retorna uma imagem de uma expressão matemática.

      1. Exemplo:
        1. Retorna a expressão matemática passada no parâmetro:
          1. https://math.justforfun.click/$/
          2. { (2x², + , 17y⁴, =, 23,,(1)), ( x , - , y , =, 5,,(2)) }
        2. obs:A tag markdown não executa esta api.
          1. Usar o código html para que funcione.
            1. Retorna a expressão matemática passada no parâmetro
        3. Símbolos matemáticos usado na API

    3. [🔙]

  12. Tabelas ( <table> </table> <tr></tr> <td></\td> )

    1. Tabela simples

      1. Para dizer para o sistema que se trata de uma tabela os seguintes caracteres são usado:

        1. A barra vertical (|) Representa a tag < td > < /td >.
        2. Dois pontos (:) informa ao sistema se a coluna está alinhada a esquerda, centro ou direita.
        3. O sinal de menos (-) usado junto com o dois pontos : para informa o tipo de alinhamento onde:
          1. a esquerda usar a combinação (:---);
          2. a direita usar combinação ---:;
          3. ao centro usar combinação :---:).
          4. Obs: O local onde o alinhamento deve ser informado é na linha abaixo do nome das colunas.
            1. EXEMPLO:
              1. |col 01|col 02|col 03
                |:-----|:----:|-----:
                |a11 | a12 | a13
                |a21 | a22 | a23
                |a31 | a32 | a33
                Veja em anexo o resultado...

      2. [🔙]

    2. Tabelas de links, onde os links ficam fora da tabela.

      1. Exemplo de tabela usando links nas células sendo que os links ficam fora da tabela

        1. =================================================

        2. |First Header | Second Header | Third Header

        3. |:-------------|:---------------------|:-----------

        4. |[onze][11] | [12] | [13]

        5. |[21] | [vinde e dois][22] | [23]

        6. |[31] | [32] | [three trees][33]

        7. Matriz de links:

          1. [11]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=11
          2. [12]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=12
          3. [13]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=13
          4. [21]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=21
          5. [22]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=22
          6. [23]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=23
          7. [31]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=31
          8. [32]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=32
          9. [33]:http://www.a-big-long-big-big-long-hyperlink/more-long-stuff?id=33

        8. Link abaixo mostra o resultado do exemplo:

          1. Resultado do exemplo abaixo

        9. [🔙]

    3. [🔙🔙]

  13. Como configurar e usar emoji em textos markdown no vscode:

    1. Emoje na web:

      1. 🎸 emoji-on-vscode
      2. 🥕 https://emojipedia.org/people/
      3. 😀 https://marketplace.visualstudio.com/items?itemName=devzstudio.emoji-snippets
      4. :brazil: O emoji pode ser escrito com dois pontos no começo e dois pontos no final.
      5. :smile: :+1:
      6. Referência ao código do emoji da linguagem html
        1. Exemplo:
          1. ⌚
          2. ⌛
      7. Depois de ler mais sobre o assunto do emoji cheguei a conclusão de que o código html é o mais indicado porque vai funcionar em qualquer lugar do mundo.

    2. Extensão Markdown Emoji

      1. Lista de emoji markdown
        1. :persevere:
        2. :cry:

    3. [🔙]

  14. Mermaid Live Editor

    1. O Mermaid permite criar diagramas usando texto e código. Isso simplifica a manutenção de diagramas complexos. É uma ferramenta de diagramação e gráficos baseada em Javascript que renderiza definições de texto inspiradas no Markdown para criar e modificar diagramas dinamicamente.

      1. Links para a documentação oficial.

        1. mermaid-js
        2. Extensão markdown-mermaid
        3. Exemplo de link em gráfico com mermaid
        4. Mermaid Markdown Syntax Highlightin
        5. Entity Relationship Diagrams

      2. Dica de como instalar suporte a fluxograma em documentos markdown:

        1. Exemplos:

          1. Mermaid flowchart

            1. Graph TD - vertical

              
graph TD
   %% Este é um comentário sobre: Start[(Início)] --> a[Elemento a]
   Start[(Início)] --> a[Elemento a]
   a --> b[Link...]
   b --> c[Elemento c]
   b --> d[Elemento d]
   d --> e((Elemento e))
   d --> f[(Elemento f)]
   f --> g>Elemento g]
   g --> h[/Elemento h/]
   h --> i[\Emento i\]
   f --> j[/Elemento j\]
   f --> k[\Elemento k/]
   f --> se{Elemento se}
   se --> true([Elemento true])
   se --> false([Elemento false])
   true --> continua{{Elemento continua}}
   continua --> a
   false --> pare{{Elemento pare}}
   click b href "https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction" "Titulo do link" _blank


              
graph TD
   %% Este é um comentário sobre: Start[(Início)] --> a[Elemento a]
   Start[(Início)] --> a[Elemento a]
   a --> b[Link...]
   b --> c[Elemento c]
   b --> d[Elemento d]
   d --> e((Elemento e))
   d --> f[(Elemento f)]
   f --> g>Elemento g]
   g --> h[/Elemento h/]
   h --> i[\Emento i\]
   f --> j[/Elemento j\]
   f --> k[\Elemento k/]
   f --> se{Elemento se}
   se --> true([Elemento true])
   se --> false([Elemento false])
   true --> continua{{Elemento continua}}
   continua --> a
   false --> pare{{Elemento pare}}
   click b href "https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction" "Titulo do link" _blank

            2. graph LR horizontal

              graph LR
A[Natal] -->|Ganhe dinheiro| B(Vai fazer compras)
B --> C{Deixe-me pensar}
C -->|Um| D[Laptop]
C -->|Dois| E[Celular]
C -->|Três| F[fa:fa-car Carro]


              graph LR
A[Natal] -->|Ganhe dinheiro| B(Vai fazer compras)
B --> C{Deixe-me pensar}
C -->|Um| D[Laptop]
C -->|Dois| E[Celular]
C -->|Três| F[fa:fa-car Carro]

          2. [🔙]

      3. Diagramas de relacionamento de entidades

        1. Class diagramas.

          1. Na engenharia de software, um diagrama de classes na Unified Modeling Language (UML) é um tipo de diagrama de estrutura estática que descreve a estrutura de um sistema, mostrando as classes do sistema, seus atributos, operações (ou métodos) e os relacionamentos entre os objetos. Veja mais...

            1. Código mermaid
               Animal <|-- Duck
   Animal <|-- Fish
   Animal <|-- Zebra
   Animal : +int age
   Animal : +String gender
   Animal : +isMammal()
   Animal : +mate()
   class Duck{+String beakColor
               +swim()
               +quack()
            }
   class Fish{-int sizeInFeet
            -canEat()
            }
   class Zebra{+bool is_wild
               +run()
            }

               classDiagram

      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
         +String beakColor
         +swim()
         +quack()
      }
      class Fish{
         -int sizeInFeet
         -canEat()
      }
      class Zebra{
         +bool is_wild
         +run()
      }

               classDiagram

      Class01 <|-- AveryLongClass : Cool
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class08 <--> C2: Cool label


               classDiagram

      Class01 <|-- AveryLongClass : Cool
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class08 <--> C2: Cool label

          2. [🔙]

        2. erDiagramas

          1. Um modelo de entidade-relacionamento (ou modelo ER) descreve coisas inter-relacionadas de interesse em um domínio específico de conhecimento. Um modelo ER básico é composto de tipos de entidade (que classificam as coisas de interesse) e especifica relacionamentos que podem existir entre entidades (instâncias desses tipos de entidade). Veja mais...

            1. Sintaxe:

              1. A sintaxe do projeto mermaid para diagramas ER é compatível com PlantUML, com uma extensão para rotular o relacionamento. Cada declaração consiste nas seguintes partes:

                1. <first-entity>[<relationship> <second-entity> : <relationship-label>]

                  1. Onde:

                    1. first-entity é o nome de uma entidade. Os nomes devem começar com um caractere alfabético e também podem conter dígitos, hifens e sublinhados.

                    2. relationship descreve a maneira como ambas as entidades se relacionam.

                    3. second-entity é o nome da outra entidade.

                    4. relationship-label descreve o relacionamento da perspectiva da primeira entidade.

                    5. Nota: Apenas a first-entity parte de uma declaração é obrigatória. Isso torna possível mostrar uma entidade sem relacionamentos, o que pode ser útil durante a construção iterativa de diagramas. Se qualquer outra parte de uma instrução for especificada, todas as partes são obrigatórias.

                    6. Exemplo:

                      1. PROPERTY ||--|{ ROOM : contains

            2. Sintaxe de relacionamento.

              1. A relationship parte de cada declaração pode ser dividida em três subcomponentes:
                1. a cardinalidade da primeira entidade em relação à segunda,
                2. se o relacionamento confere identidade a uma entidade 'filha'
                3. a cardinalidade da segunda entidade em relação à primeira
              2. Cardinalidade é uma propriedade que descreve quantos elementos de outra entidade podem estar relacionados à entidade em questão. No exemplo acima, a PROPERTY pode ter uma ou mais ROOM instâncias associadas a ele, enquanto a ROOM só pode ser associado a uma PROPERTY. Em cada marcador de cardinalidade existem dois caracteres. O caractere externo representa um valor máximo e o caractere interno representa um valor mínimo. A tabela abaixo resume as possíveis cardinalidades:
                1. Valor (esquerda) Valor (direita) Significado
                  |o o| Zero ou um
                  || || Exatamente um
                  }o o{ Zero ou mais (sem limite superior)
                  }| |{ Um ou mais (sem limite superior)

            3. Identificação.

              1. Os relacionamentos podem ser classificados como identificadores ou não identificadores e são processados ​​com linhas sólidas ou tracejadas, respectivamente. Isso é relevante quando uma das entidades em questão não pode ter existência independente sem a outra. Por exemplo, uma empresa que faz seguro para pessoas que dirigem carros pode precisar armazenar dados em NAMED-DRIVERs.

                1. Na modelagem disso, podemos começar observando que um CAR pode ser conduzido por muitas PERSON instâncias e uma PERSON pode conduzir muitos CARs - ambas as entidades podem existir sem a outra, portanto, esta é uma relação não identificadora que podemos especificar em Mermaid como: PERSON }|..|{ CAR : "driver". Observe os dois pontos no meio do relacionamento que resultarão em uma linha tracejada sendo desenhada entre as duas entidades. Mas quando esse relacionamento muitos-para-muitos é resolvido em dois relacionamentos um-para-muitos, observamos que a NAMED-DRIVER não pode existir sem a PERSON e a CAR- os relacionamentos se tornam identificadores e seriam especificados usando hifens, que se traduzem em uma linha sólida:

                  1. Exemplo:

                    
   erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is


                    
   erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is

            4. Atributos

              1. Os atributos podem ser definidos para entidades especificando o nome da entidade seguido por um bloco contendo vários type name pares, onde um bloco é delimitado por uma abertura { (abre chave) e um fechamento } (fecha chave).

                1. Exemplo:

                  
  erDiagram
      CAR ||--o{ NAMED-DRIVER : allows
      CAR {
         string registrationNumber
         string make
         string model
      }
      PERSON ||--o{ NAMED-DRIVER : is
      PERSON {
         string firstName
         string lastName
         int age
      }

                  
   erDiagram
       CAR ||..o{ NAMED-DRIVER : allows
       CAR {
          string registrationNumber
          string make
          string model
       }
       PERSON ||--o{ NAMED-DRIVER : is
       PERSON {
          string firstName
          string lastName
          int age
       }
       NAMED-DRIVER {
          int id
          string name
          string date
       }

          2. [🔙]

        3. Gráfico de pizza

          1. Exemplo de uso do gráfico de pizza.

            
   pie title Animais de estimação adotados por voluntários
        "Cachorros" : 386
        "Gatos    " : 85
        "Ratos    " : 15


            
   pie title Animais de estimação adotados por voluntários
        "Cachorros" : 386
        "Gatos    " : 85
        "Ratos    " : 15

          2. [🔙]

  15. O elemento semântico html <details> funciona em markdown se o mesmo estiver isolado do código markdown, já que html não conhece markdown.

    1. Veja o exemplo nos anexo

    2. [🔙]

  16. Tag ``` As 3 crases é usada para informar que o texto seguinte é um código javascript ou html.

    1. Veja o exemplo anexo...

    2. [🔙]

  17. Notas de rodapé em documentos markdown.

    1. A extensão markdown-footnotes permite implementar notas de rodapé em documentos markdown.

      1. Exemplo de como usar nota de rodapé.

    2. [🔙]

  18. Editores markdown para linux.

    1. Visual Studio Code com as extensões abaixo atendeu 100% de minhas necessidades:

      1. Markdown All in One

        1. Ao inserir uma elemento na lista enumerada o número seguintes é calculado.
        2. Atalhos do teclado da extensão markdown-all-in-one:
          1. Ctrl/Cmd + B - Alternar negrito
          2. Ctrl/Cmd + I - Alternar itálico
          3. Ctrl / Cmd + Shift + ] - Alternar título (Insere cancela (#))
          4. Ctrl/Cmd + Shift + [ - Alternar título (Excluir cancela (#))
          5. Ctrl/Cmd + M - Alternar ambiente matemático
          6. Alt+C - Marcar / Desmarcar item da lista de tarefas
          7. Ctrl/Cmd + Shift + V - Alternar visualização

      2. A extensão Markdown Shortcuts facilita muito edição de tags markdown.

      3. markdownlint

      4. Mermaid Markdown Syntax Highlighting

      5. Markdown Footnotes

      6. Bookmarks

      7. Code Spell Checker

      8. Brazilian Portuguese - Code Spell Checker

      9. html-to-javascript-string

      10. vscode pdf.

      11. markdown-preview-enhanced

      12. markdown-pdf

      13. Instant Markdown

      14. A extensão Todo Tree para criar lista com todos os cometários do código que contenha as palavras: TODO: ou FIXME:

      15. Markdown Preview Mermaid Support

      16. A extensão markdown-footnotes é usada para criar notas de rodapé em documentos markdown.

      17. Todos os erros que viola as regras markdown

      18. markdown-extended

      19. Extensão Markdown Emoji

        1. :persevere:

      20. [🔙]

    2. Editor ReText vem na distribuição ubuntu.

      1. Instalei porém o mesmo não reconheceu o documento o_que_e_markdown.md que criei com vscode.

      2. O que eu percebi de positivo caso o documento não use sintaxe estendida é a exportação para pdf, html e open office.

      3. [🔙]

    3. Editor ghostwriter vem na distribuição ubuntu.

      1. obs: Ele só exporta para html e não reconhece comentários em html embutido.

      2. [🔙]

    4. Google docs com a extensão GD2md-html.

      1. O google docs usa a extensão GD2md-html

      2. [🔙]

    5. Editor web dillinger:

      1. O dillinger é um editor de código markdown que funciona no browser.

      2. obs: Não reconhece a tag <big></big>.

      3. [🔙]

    6. Editor web stackedit.

      1. O stackedit perde a formação do texto markdown quando o mesmo é editado em outro editor.

      2. [🔙]

    7. O Editor notable para desktop linux.

      1. O Editor notable é muito bom reconheceu quase tudo que escrevi no vscode só tive dois problema:

        1. A sintaxe da fórmula matemática o símbolo $$ deve está unido na fórmula e não pode ter espaço em braco entre o símbolo e o inicio da fórmula.
        2. Exemplo:
          1. $$ f(x) = ax^2 + bx + c $$ --errado
          2. $$f(x) = ax^2 + bx + c$$ --certo
        3. O gráfico e fluxogramas não funcionaram.

      2. [🔙]

  19. MkDocs é um Gerador de site estático baseado em arquivo markdown.

    1. MkDocs é um gerador de site estático rápido, simples e absolutamente lindo que é voltado para a documentação do projeto de construção.
      Os arquivos de origem da documentação são gravados em Markdown e configurados com um único arquivo de configuração YAML. Comece lendo a introdução abaixo e, em seguida, verifique o Guia do Usuário para obter mais informações.

      1. Escrevendo seus documentos markdown para mkdocs.

      2. [🔙]

A N E X O S

Exemplo da reapresentação das tags <hx> onde x varia de 1 a 6_**

h1

h2

h3

h4

h5
h6

[🔙]

Exemplo de como visualizar código no documento

```javascript

  <script>
       function fancyAlert(arg) {
           if(arg) {
           $.facebox({div:'#foo'})
           }
       }
  </script>

```

```html


  <html lang="pt-BR">
     <head>
     </head>
     <bodY>
         <p>Alo Mundo.</p>
         <script>
            document.print("Alo Mundo");
            <img src="https://math.justforfun.click/$/
                     {
                     (2x², + , 17y⁴, =, 23,,(1)),
                     ( x , - , y   , =,  5,,(2))
                    :}"
                     alt="API WEB https://math.justforfun.click/$/ "
                     title="Retorna a expressão matemática passada no parâmetro">
         </script>
      </body>
  </html>

```

```json

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

```

[🔙]

Este é uma citação

  • O sinal usado abre e fecha este código no HTML.
  • O bloco pode ser aninhado se o sinal \>> for colocar no início da linha.
  • Para adicionar mais uma linha à citação, basta teclar <enter> que o vscode posiciona na próxima linha da citação com a tag >.
  • Isso gerará um novo parágrafo dentro do blockquote.
  • As tags markdown negrito, itálico, enfatizado, lista numeras e lista não numeradas funcionam dentro de uma citação.
  1. Título
    1. item 01
    2. item 02

[🔙]

Exemplo de tabela

col 01 col 02 col 03
a11 a12 a13
a21 a22 a23
a31 a32 a33

[🔙]

===========================================

First Header Second Header Third Header
onze 12 13
21 vinde e dois 23
31 32 three trees

[🔙]

Lista não ordenada

  • Titulo da lista
    • item 01
    • item 02
    • item 03

[🔙]

Lista ordenada

  1. Título
    1. item 01
    2. item 03

[🔙]

A tag (___) simula comportamento da tag html <hr>

[🔙]

Diagramas de relacionamento de entidades

Elemento semântico html <details>

O elemento semântico html <details> funciona em markdown se o mesmo estiver isolado do código markdown, já que html não conhece markdown.

Exemplo da tag html details

Tudo que tiver dentro da tag html <details> e </details> só aparecerá se o mouse for clicado no botão

* Este documento não será interpretado como documento markdown porque está dentro de um código html.

  1. item 01
  2. item 0> 
<details>
  <summary>Exemplo da tag html details</summary>
  <p>
    Tudo que tiver dentro da tag html &lt;details&gt; e &lt;/details&gt; só
    aparecerá se o mouse for clicado no botão
  </p>
  <p>
    * Está linha não será interpretado como documento markdown porque está
    dentro de um código html..
  </p>
  <ol>
    <li>item 01</li>
    <li>item 02</li>
  </ol>
</details>

[🔙]

Demostração da extensão markdown-footnotes

1.  Aqui está uma nota de rodapé simples, [^1]
2.  e aqui está outra mais longa.[^2]

    1. NOTAS DE RODAPÉS QUE SERÁ INCLUÍDO NO FINAL DO HTML.
       1. [^1]: Esta é a primeira nota de rodapé.
       2. [^2]:
              Aqui está um com vários parágrafos e código.
              Avance parágrafos para incluí-los na nota de rodapé.
              Adicione quantos parágrafos desejar.

3.  Esse texto espero não entrar na nota de rodapé número.

O Código markdown com notas de rodapé descrito acima

  1. Aqui está uma nota de rodapé simples, [^1].

  2. e aqui está outra mais longa.[^2]

    1. NOTAS DE RODAPÉS QUE SERÁ INCLUÍDO NO FINAL DO HTML.
      1. [^1]: Esta é a primeira nota de rodapé.
      2. [^2]: Aqui está um com vários parágrafos e código. Avance parágrafos para incluí-los na nota de rodapé. Adicione quantos parágrafos desejar.

  3. Esse texto espero não entrar na nota de rodapé número.

[🔙]

Vai para o incio


   Se esse texto aparecer preto é porque o meu tema foi aceito.

REFERÊNCIAS

  1. Mensagens de erro sintático do código markdown
  2. Markdown: Sintaxe
  3. O que é Markdown?
  4. Sintaxe básica
  5. Aplicativos e componentes que suportam Markdown.
  6. Guia básico de Markdown
  7. https://about.gitlab.com/handbook/markdown-guide/
  8. Especificação CommonMark Spec
  9. Markdown: Syntax
  10. Guia básico de Markdown
  11. Aprenda Markdown
  12. Sintaxe Estendida
  13. Editor Markdown free na WEB
  14. Editor de texto markdown na web
  15. ./markdown readme.md
  16. Todos os erros da extensão Markdownlint
  17. Guia-basico-de-markdown#open
  18. https://markdown-guide.readthedocs.io/en/latest/basics.html
  19. code-spell-checker
  20. code-spell-checker-portuguese-brazilian
  21. Extensão para criar notas de rodapé
  22. **Markdown Shortcuts**
  23. docs/RULES.md
  24. Markdown e código do Visual Studio
  25. pandoc - extension-citations
  26. Pandoc - Manual do Usuário
  27. mermaid-markdown-syntax-highlighting
  28. Gerador de sites mkdocs.org
  29. Mermaid Live Editor

🔝🔝