The latest articles on DEV Community by Eduardo Oliveira (@nugguet). https://dev.to/nugguet https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1822744%2F80b4f9e5-f138-4ea8-9bda-16401117cfd0.png https://dev.to/nugguet en Eduardo Oliveira Mon, 29 Jul 2024 17:42:58 +0000 https://dev.to/nugguet/o-que-e-markdown-e-como-usa-lo-4a0h https://dev.to/nugguet/o-que-e-markdown-e-como-usa-lo-4a0h <p>Markdown é uma linguagem de marcação criada em 2004, seu principal objetivo é facilitar a escrita e a leitura de documentos de texto puro, permitindo que sejam convertidos para HTML e outros formatos.</p> <p>Ele utiliza uma sintaxe intuitiva e fácil de aprender, o que a torna acessível para qualquer um, assim aumentando a produtividade que quem o usa.</p> <p>Markdown é utilizado em diversas plataformas, como GitHub, blogs, e sistemas de documentação. A seguir, apresento alguns elementos básicos da sintaxe que aprendi durante minha pesquisa:</p> <h2> Títulos </h2> <p>Para criar títulos, utilize o símbolo # seguido de um espaço. O número de # determina o nível do título.</p> <h1> Título 1 </h1> <p><code># Título 1</code></p> <h2> Título 2 </h2> <p><code>## Título 2</code></p> <h3> Título 3 </h3> <p><code>### Título 3</code></p> <h2> Itálico e Negrito </h2> <p>Para negrito e itálico, utilize asteriscos ou underscores.</p> <p><em>itálico</em> ou <em>itálico</em><br> <strong>negrito</strong> ou <strong>negrito</strong></p> <p><em>itálico</em> ou <em>itálico</em><br> <strong>negrito</strong> ou <strong>negrito</strong></p> <h2> Listas </h2> <p>Markdown permite criar listas ordenadas e não ordenadas de forma simples.</p> <p>Listas não ordenadas:</p> <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Subitem 2.1</li> </ul> </li> </ul> <p><code>- Item 1</code><br> <code>- Item 2</code><br> <code>- Subitem 2.1</code></p> <p>Listas ordenadas:</p> <ol> <li>Item 1</li> <li>Item 2 <ol> <li>Subitem 2.1</li> </ol> </li> </ol> <p><code>1. Item 1</code><br> <code>2. Item 2</code><br> <code>1. Subitem 2.1</code></p> <h2> Links </h2> <p>Para criar links, utilize colchetes para o texto do link e parênteses para a URL.</p> <p><a href="https://google.com" rel="noopener noreferrer">Texto do Link</a></p> <p><code>[Texto do Link](https://google.com)</code></p> <h2> Imagens </h2> <p>A sintaxe para inserir imagens é similar à de links, mas com um ponto de exclamação no início.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wIceUxRH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wIceUxRH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" alt="Texto Alternativo" width="208" height="128"></a></p> <p><code></code></p> <h2> Blocos de Código </h2> <p>Para destacar código, utilize crases simples ou triplas `` ou em bloco use code dentro de &lt;&gt;.</p> <p>Código em linha:<br> <code>código</code></p> <p>Bloco de código:<br> <code>código</code></p> <h2> Citações </h2> <p>Para criar citações, utilize o símbolo &gt;.</p> <blockquote> <p>Esta é uma citação.</p> </blockquote> <p><code>&gt; Esta é uma citação.</code></p> <h2> Tabelas </h2> <p>Markdown também permite criar tabelas com uma sintaxe simples.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Cabeçalho 1</th> <th>Cabeçalho 2</th> </tr> </thead> <tbody> <tr> <td>Celula 1</td> <td>Celula 2</td> </tr> <tr> <td>Celula 3</td> <td>Celula 4</td> </tr> </tbody> </table></div> <p><code>| Cabeçalho 1 | Cabeçalho 2 | |-------------|-------------| | Celula 1 | Celula 2 | | Celula 3 | Celula 4 |</code></p> <h2> Lista de Tarefas </h2> <ul> <li>[x] Tarefa 1</li> <li>[x] Tarefa 2</li> <li>[ ] Tarefa 3</li> </ul> <p><code>- [x] Tarefa 1 - [x] Tarefa 2 - [ ] Tarefa 3</code></p>