Conversão de Markdown para HTML

Habilidade especializada para converter documentos Markdown em HTML usando a biblioteca marked.js, ou para escrever scripts de conversão de dados; neste caso, scripts semelhantes ao repositório markedJS/marked. Para scripts personalizados, o conhecimento não se limita a marked.js, mas os métodos de conversão de dados são utilizados de ferramentas como pandoc e gomarkdown/markdown para conversão de dados; jekyll/jekyll e gohugoio/hugo para sistemas de template.

O script ou ferramenta de conversão deve lidar com arquivos únicos, conversões em lote e configurações avançadas.

Quando Usar Esta Habilidade

• O usuário pede para "converter markdown para html" ou "transformar arquivos md"
• O usuário quer "renderizar markdown" como saída HTML
• O usuário precisa gerar documentação HTML a partir de arquivos .md
• O usuário está construindo sites estáticos a partir de conteúdo Markdown
• O usuário está construindo um sistema de template que converte markdown para html
• O usuário está trabalhando em uma ferramenta, widget ou template personalizado para um sistema de template existente
• O usuário quer pré-visualizar Markdown como HTML renderizado

Convertendo Markdown para HTML

Conversões Básicas Essenciais

Para mais, veja basic-markdown-to-html.md

    ```markdown
    # Nível 1
    ## Nível 2

    Uma frase com um [link](https://example.com), e um trecho de HTML como `<p>paragraph tag</p>`.

    - `ul` item de lista 1
    - `ul` item de lista 2

    1. `ol` item de lista 1
    2. `ol` item de lista 1

    | Item da Tabela | Descrição |
    | Um | Um é a grafia do número `1`. |
    | Dois | Dois é a grafia do número `2`. |

    ```js
    var one = 1;
    var two = 2;

    function simpleMath(x, y) {
     return x + y;
    }
    console.log(simpleMath(one, two));
    ```
    ```

    ```html
    <h1>Nível 1</h1>
    <h2>Nível 2</h2>

    <p>Uma frase com um <a href="https://example.com">link</a>, e um trecho de HTML como <code>&lt;p&gt;tag de parágrafo&lt;/p&gt;</code>.</p>

    <ul>
     <li>`ul` item de lista 1</li>
     <li>`ul` item de lista 2</li>
    </ul>

    <ol>
     <li>`ol` item de lista 1</li>
     <li>`ol` item de lista 2</li>
    </ol>

    <table>
     <thead>
      <tr>
       <th>Item da Tabela</th>
       <th>Descrição</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>Um</td>
       <td>Um é a grafia do número `1`.</td>
      </tr>
      <tr>
       <td>Dois</td>
       <td>Dois é a grafia do número `2`.</td>
      </tr>
     </tbody>
    </table>

    <pre>
     <code>var um = 1;
     var dois = 2;

     function somaSimples(x, y) {
      return x + y;
     }
     console.log(somaSimples(um, dois));</code>
    </pre>
    ```

Conversões de Blocos de Código

Para mais, veja code-blocks-to-html.md

    ```markdown
    seu código aqui
    ```

    ```html
    <pre><code class="language-md">
    seu código aqui
    </code></pre>
    ```

    ```js
    console.log("Olá mundo");
    ```

    ```html
    <pre><code class="language-js">
    console.log("Olá mundo");
    </code></pre>
    ```

    ```markdown
      ```

      ```
      crases visíveis
      ```

      ```
    ```

    ```html
      <pre><code>
      ```

      visible backticks

      ```
      </code></pre>
    ```

Conversões de Seções Colapsáveis

Para mais, veja collapsed-sections-to-html.md

    ```markdown
    <details>
    <summary>Mais informações</summary>

    ### Cabeçalho interno

    - Listas
    - **Formatação**
    - Blocos de código

        ```js
        console.log("Hello");
        ```

    </details>
    ```

    ```html
    <details>
    <summary>Mais informações</summary>

    <h3>Cabeçalho interno</h3>

    <ul>
     <li>Listas</li>
     <li><strong>Formatação</strong></li>
     <li>Blocos de código</li>
    </ul>

    <pre>
     <code class="language-js">console.log("Olá");</code>
    </pre>

    </details>
    ```

Conversões de Expressões Matemáticas

Para mais, veja writing-mathematical-expressions-to-html.md

    ```markdown
    Esta frase usa delimitadores `$` para mostrar matemática inline: $\sqrt{3x-1}+(1+x)^2$
    ```

    ```html
    <p>Esta frase usa delimitadores <code>$</code> para mostrar matemática inline:
     <math-renderer><math xmlns="http://www.w3.org/1998/Math/MathML">

…