#2: Post edited
by
Rodolfo Manin
·
2025-08-25T15:39:00-03:00 (10 meses ago)
Formatação do texto
1. Formatação do texto
#1: Post edited
by
Rodolfo Manin
·
2025-08-25T15:35:11-03:00 (10 meses ago)
Formatting Posts
Formatação do texto
<p>Codidact uses the <a href="https://commonmark.org">CommonMark implementation</a> of Markdown for formatting posts.</p>
<h3 id="-italics-"><strong>Italics</strong></h3>
<p> You can <em>italicize</em> a word by placing a single asterisk (<code>*</code>) or single underscore (<code>_</code>) around a word. Either <code>*Codidact*</code> or <code>_Codidact_</code> will render as <em>Codidact</em>.</p>
<h3 id="-bold-"><strong>Bold</strong></h3>
<p> You can <strong>bold</strong> a word by placing a double asterisk or double underscore around that word. Either <code>**Codidact**</code> or <code>__Codidact__</code> will render as <strong>Codidact</strong>.</p>
<p> To make a word monospace, you can surround it with a single backtick (<code>`</code>). This is generally used for code formatting. (Some people use this for emphasis. Don't do that! Screen readers will read out words formatted as code character by character - use <em>italics</em> or <strong>bold</strong> for emphasis instead.)</p>
<p> To mark several lines as code, you can use a code fence. This is three backticks on a newline both on top and at the bottom of your lines of code. Don't use this for quotes - see below for guidance on quote formatting.</p>
<h3 id="-links-"><strong>Links</strong></h3>
<p> You can generate a link using one of two methods. One way is to encase your link text in square brackets (<code>[ ]</code>) and then the target URL in parentheses (<code>( )</code>). <code>[Codidact](https://codidact.org)</code> will render as <a href="https://codidact.org">Codidact</a>.</p>
<p> You can also format a link with the inline text being <code>[Codidact][1]</code>, and then at the bottom of the post include the URL with the format <code>[1]: https://codidact.org</code>. This will look something like this:</p>
<pre><code>
You can check out [<span class="hljs-string">Codidact</span>][<span class="hljs-symbol">1</span>] for an open-source, community-oriented Q&A platform!
[1]: https://codidact.org`
</code></pre><p> Which will render like this:</p>
<blockquote>
<p>You can check out [Codidact][1] for an open-source, community-oriented Q&A platform!</p>
<p> If you'd like to include rollover text for your link, you can put your text, surrounded by quote marks (<code>"</code>), into the URL of your link. For instance, <code>[Codidact](https://codidact.org "The open-source Q&A platform")</code> will create a link with <code>The open-source Q&A platform</code> as the rollover text.</p>
<p> When quoting text from somewhere else, you can use a blockquote to signify that this is not your original text, but a quote from somewhere else. Put a greater than symbol (<code>></code>), followed by a space, before a paragraph to mark that quote as a blockquote. For instance, <code>> This is a blockquote!</code> will render as a quote:</p>
<blockquote>
<p>This is a blockquote!</p>
</blockquote>
<p> If you want to include a second paragraph as part of the same quote, you have to include another <code>></code> before each line, like this:</p>
<pre><code> > This <span class="hljs-keyword">is</span> a blockquote!
>
> This <span class="hljs-keyword">is</span> part <span class="hljs-keyword">of</span> <span class="hljs-keyword">the</span> same <span class="hljs-literal">quote</span>!
</code></pre><p> This will render as a single blockquote:</p>
<blockquote>
<p>This is a blockquote!</p>
<p>This is part of the same quote!</p>
</blockquote>
<p> See also the <a href="/help/referencing">citation and referencing help</a> for guidelines on how to properly reference different quotes from various places.</p>
<h3 id="-images-"><strong>Images</strong></h3>
<p> Embedding images in a post is very similar to the formatting for links (detailed above). The format <code></code> will embed an image in your post. Please remember to <a href="/help/alt-text">write alt text for your image</a>! Codidact allows you to upload an image directly, or you can embed an external image from image hosting sites such as Imgur.</p>
<h3 id="-lists-"><strong>Lists</strong></h3>
<p> You can generate either an ordered list or a bullet list. For a bullet list, you can use either <code>*</code> or <code>-</code> to create your list.</p>
<pre><code>* List <span class="hljs-keyword">item</span> <span class="hljs-literal">one</span>
* List <span class="hljs-keyword">item</span> <span class="hljs-literal">two</span>
</code></pre><p> This will render like this:</p>
<blockquote>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</blockquote>
<p> If you want to create a numbered list, use <code>1.</code>, <code>2.</code>, etc instead of <code>*</code> or <code>-</code>. Note that the exact number you use, in most cases, is irrelevant - after the first number that you use, no matter what number you put in, Codidact will automatically number it in order. For instance, if you create a list and type <code>1. List item #1</code> for the first line, then <code>3. List item #2</code> for the second line, Codidact will automatically render the <code>3.</code> as a <code>2.</code>. If you begin your list at any other number, such as your first list item is numbered <code>5.</code>, Codidact will continue from that number onwards (with the next number automatically rendering as <code>6.</code>).</p>
<p> You can include a heading in your post. Using a single hash symbol (<code>#</code>) before a line of your post will create a large heading, while adding another will create a slightly smaller heading (up to six different heading sizes).</p>
<p> To include a footnote in your post, you can use the syntax <code>[^1]</code>. In your main text, include <code>Text[^1] and more text</code>, and at the bottom (where you want to include your footnote), place a line resembling <code>[^1]: footnote text</code>.</p>
<p>CommonMark does not support collapsible sections (sometimes called "spoiler blocks"), but you can use the HTML <code>details</code> and <code>summary</code> tags, like this:</p>
<pre><details>
<summary>Spoiler! Click here to reveal</summary>
Secret details
</details></pre>
<p>Which renders like this:</p>
<details>
<summary>Spoiler! Click here to reveal</summary>
Secret details
</details>
<p>If the details text uses any Markdown, you must add a blank line between the summary and the text:</p>
<pre><details>
<summary>Spoiler! Click here to reveal</summary>
*Secret* details
</details></pre>
<p>Renders:</p>
<details>
<summary>Spoiler! Click here to reveal</summary>
<i>Secret</i> details
</details>
<p>O Codidact usa a implementação <a href="https://commonmark.org">CommonMark</a> do Markdown para formatar as postagens.</p>
<h3 id="-italics-"><strong>Itálico</strong></h3>
<p>Você pode <em>italicizar</em> uma palavra colocando um único asterisco (<code>*</code>) ou um único sublinhado (<code>_</code>) em torno de uma palavra. Tanto <code>*Codidact*</code> quanto <code>_Codidact_</code> serão renderizados como <em>Codidact</em>.</p>
<h3 id="-bold-"><strong>Bold</strong></h3>
<p> Você pode colocar uma palavra em <strong>negrito</strong> colocando um asterisco duplo ou um sublinhado duplo ao redor dessa palavra. Tanto <code>**Codidact***</code> quanto <code>__Codidact__</code> serão renderizados como <strong>Codidact</strong>.</p>
<h3 id="-monospace-code-formatting-"><strong>Monospace / formatação de código</strong></h3>
<p> Para tornar uma palavra monoespaçada, você pode cercá-la com um único backtick (<code>`</code>). Isso geralmente é usado para formatação de código. (Algumas pessoas usam isso para dar ênfase. Não faça isso! Os leitores de tela lerão as palavras formatadas como código, caractere por caractere - em vez disso, use <em>itálico</em> ou <strong>negrito</strong> para dar ênfase.)</p>
<p>Para marcar várias linhas como código, você pode usar uma barreira de código. São três pontos traseiros em uma nova linha na parte superior e inferior de suas linhas de código. Não use isso para citações - veja abaixo as orientações sobre formatação de citações.</p>
<h3 id="-links-"><strong>Links</strong></h3>
<p> Você pode gerar um link usando um de dois métodos. Uma maneira é colocar o texto do link entre colchetes (<code>[ ]</code>) e, em seguida, o URL de destino entre parênteses (<code>( )</code>). <code>[Codidact](https://codidact.org)</code> será renderizado como <a href="https://codidact.org">Codidact</a>.</p>
<p>Você também pode formatar um link com o texto em linha sendo <code>[Codidact][1]</code> e, em seguida, na parte inferior da postagem, incluir o URL com o formato <code>[1]: https://codidact.org</code>. Isso terá a seguinte aparência:</p>
<pre><code>
Você pode conferir [<span class="hljs-string">Codidact</span>][<span class="hljs-symbol">1</span>] para obter uma plataforma de Q&A de código aberto e orientada para a comunidade!
[1]: https://codidact.org`
</code></pre><p> Que será renderizado da seguinte forma:</p>
<blockquote>
<p>Você pode dar uma olhada em [Codidact][1] para uma plataforma de Q&A orientada para a comunidade e de código aberto!</p>
<p>Se desejar incluir texto de rolagem em seu link, você pode colocar seu texto, entre aspas (<code>"</code>), no URL do seu link. Por exemplo, <code>[Codidact](https://codidact.org "A plataforma de código aberto Q&A")</code> criará um link com <code>A plataforma de código aberto Q&A</code> como texto de rolagem.</p>
<p> Ao citar um texto de outro lugar, você pode usar um blockquote para indicar que esse não é o seu texto original, mas uma citação de outro lugar. Coloque um símbolo de maior que (<code>></code>), seguido de um espaço, antes de um parágrafo para marcar essa citação como uma citação em bloco. Por exemplo, <code>> This is a blockquote!</code> será renderizado como uma citação:</p>
<blockquote>
<p>Isso é um blockquote!</p>
</blockquote>
<p>Se você quiser incluir um segundo parágrafo como parte da mesma citação, deverá incluir outro <code>></code> antes de cada linha, assim:</p>
<pre><code> > This <span class="hljs-keyword">is</span> a blockquote!
>
> Esta <span class="hljs-keyword">é</span> parte <span class="hljs-keyword">de</span> <span class="hljs-keyword">a</span> mesma <span class="hljs-literal">citação</span>!
</code></pre><p> Isso será renderizado como um único blockquote:</p>
<blockquote>
<p>Isso é um blockquote!</p>
<p>Isso é parte da mesma citação!</p>
</blockquote>
<p> Consulte também a <a href="/help/referencing">ajuda para citação e referência</a> para obter diretrizes sobre como referenciar corretamente diferentes citações de vários lugares.</p>
<h3 id="-images-"><strong>Imagens</strong></h3>
<p> A incorporação de imagens em uma postagem é muito semelhante à formatação de links (detalhada acima). O formato <code></code> incorporará uma imagem em sua publicação. Lembre-se de <a href="/help/alt-text">escrever o texto alternativo para sua imagem</a>! O Codidact permite que você carregue uma imagem diretamente ou pode incorporar uma imagem externa de sites de hospedagem de imagens, como o Imgur.</p>
<h3 id="-lists-"><strong>Listas</strong></h3>
<p> Você pode gerar uma lista ordenada ou uma lista de marcadores. Para uma lista de marcadores, você pode usar <code>*</code> ou <code>-</code> para criar sua lista.</p>
* List <span class="hljs-keyword">item</span> <span class="hljs-literal">two</span>
</code></pre><p> Isso será renderizado da seguinte forma:</p>
<blockquote>
<ul>
<li>Lista de itens um</li>
<li>Lista o item dois</li>
</ul>
</blockquote>
<p>Se você quiser criar uma lista numerada, use <code>1.</code>, <code>2.</code> etc. em vez de <code>*</code> ou <code>-</code>. Observe que o número exato que você usa, na maioria dos casos, é irrelevante - após o primeiro número que você usar, não importa o número que você colocar, o Codidact o numerará automaticamente em ordem. Por exemplo, se você criar uma lista e digitar <code>1. List item #1</code> na primeira linha e <code>3. List item #2</code> na segunda linha, o Codidact renderizará automaticamente o <code>3.</code> como <code>2.</code>. Se você começar sua lista com qualquer outro número, como, por exemplo, se o primeiro item da lista for numerado como <code>5.</code>, o Codidact continuará a partir desse número (com o próximo número sendo renderizado automaticamente como <code>6.</code>).</p>
<p>Você pode usar uma linha horizontal para separar seções da sua postagem. Use <code>---</code> em sua própria linha para gerar uma linha horizontal.</p>
<p>Você pode incluir um título em sua postagem. O uso de um único símbolo de hash (<code>#</code>) antes de uma linha de sua postagem criará um título grande, enquanto a adição de outro criará um título um pouco menor (até seis tamanhos diferentes de título).</p>
<pre><code># Título <span class="hljs-number">1</span>
<p>Para incluir uma nota de rodapé em sua postagem, você pode usar a sintaxe <code>[^1]</code>. Em seu texto principal, inclua <code>Texto[^1] e mais texto</code> e, na parte inferior (onde deseja incluir a nota de rodapé), coloque uma linha semelhante a <code>[^1]: texto da nota de rodapé</code>.</p>
<p>O CommonMark não oferece suporte a seções recolhíveis (às vezes chamadas de "blocos de spoiler"), mas você pode usar as tags HTML <code>details</code> e <code>summary</code>, assim:</p>
<pre><detalhes>
<resumo>Spoiler! Clique aqui para revelar</summary>
Detalhes secretos
</details></pre>
<p>O que é renderizado da seguinte forma:</p>
<details>
<summary>Spoiler! Clique aqui para revelar</summary>
Detalhes secretos
</details>
<p>Se o texto dos detalhes usar qualquer Markdown, você deverá adicionar uma linha em branco entre o resumo e o texto:</p>
<pre><detalhes>
<resumo>Spoiler! Clique aqui para revelar</summary>
*Detalhes *Secretos
</details></pre>
<p>Renderizações:</p>
<details>
<summary>Spoiler! Clique aqui para revelar</summary>
Rodolfo Manin
·
2025-08-25T15:39:00-03:00 (10 meses ago)