mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 07:37:19 +02:00
268 lines
No EOL
38 KiB
HTML
268 lines
No EOL
38 KiB
HTML
<!DOCTYPE html><html lang="pt-BR"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Markdown Features · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Docusaurus uses [GitHub Flavored Markdown (GFM)](https://guides.github.com/features/mastering-markdown/). Descubra aqui mais sobre os campos específicos do Docusaurus ao escrever em Markdown."/><meta name="docsearch:version" content="1.14.0"/><meta name="docsearch:language" content="pt-BR"/><meta property="og:title" content="Markdown Features · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="Docusaurus uses [GitHub Flavored Markdown (GFM)](https://guides.github.com/features/mastering-markdown/). Descubra aqui mais sobre os campos específicos do Docusaurus ao escrever em Markdown."/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-44373548-31', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/pt-BR"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/pt-BR/versions"><h3>1.14.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/pt-BR/installation" target="_self">Documentação</a></li><li class=""><a href="/docs/pt-BR/tutorial-setup" target="_self">Tutorial</a></li><li class=""><a href="/pt-BR/users" target="_self">Usuários</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_self">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>Português (Brasil)</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/doc-markdown">English</a></li><li><a href="/docs/fr/doc-markdown">Français</a></li><li><a href="/docs/ko/doc-markdown">한국어</a></li><li><a href="/docs/ro/doc-markdown">Română</a></li><li><a href="/docs/ru/doc-markdown">Русский</a></li><li><a href="/docs/zh-CN/doc-markdown">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">Ajude-nos a traduzir</a></li></ul></div></li><script>
|
||
const languagesMenuItem = document.getElementById("languages-menu");
|
||
const languagesDropDown = document.getElementById("languages-dropdown");
|
||
languagesMenuItem.addEventListener("click", function(event) {
|
||
event.preventDefault();
|
||
|
||
if (languagesDropDown.className == "hide") {
|
||
languagesDropDown.className = "visible";
|
||
} else {
|
||
languagesDropDown.className = "hide";
|
||
}
|
||
});
|
||
</script></span><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>API</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Primeiros passos<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/pt-BR/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/site-preparation">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/site-creation">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/publishing">Publishing your site</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/docker">Docker</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guias<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/pt-BR/adding-blog">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/custom-pages">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/search">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/navigation">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/translation">Translations & Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/versioning">Versioning</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">API<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/pt-BR/commands">CLI Commands</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/pt-BR/doc-markdown">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/api-pages">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/pt-BR/site-config">siteConfig.js</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://crowdin.com/project/docusaurus/pt-BR" target="_blank" rel="noreferrer noopener">Translate</a><h1 class="postHeaderTitle">Markdown Features</h1></header><article><div><span><p>Docusaurus uses <a href="https://guides.github.com/features/mastering-markdown/">GitHub Flavored Markdown (GFM)</a>. Descubra aqui mais sobre os campos específicos do Docusaurus ao escrever em Markdown.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="cabecalhos-markdown"></a><a href="#cabecalhos-markdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Cabeçalhos Markdown</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="documentos"></a><a href="#documentos" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Documentos</h3>
|
||
<p>Os documentos usam os seguintes campos no cabeçalho Markdown, que precisa estar dentro de duas linhas <code>---</code>, uma a cada lado:</p>
|
||
<ul>
|
||
<li><code>id</code>: Uma id única do documento. Se esse campo não estiver presente, o <code>id</code> do documento será então o nome de seu arquivo (sem a extensão).</li>
|
||
<li><code>title</code>: O título do seu documento. Se esse campo não estiver presente, o <code>id</code> do documento será então usado como <code>title</code>.</li>
|
||
<li><code>hide_title</code>: Controla se o título no começo do documento será ocultado ou não.</li>
|
||
<li><code>description</code>: A descrição do seu documento que se tornará o <code><meta name="description" content="..."/></code> e <code><meta property="og:description" content="..."/></code> em <code><head></code>, usado por motores de busca. Se este campo não estiver presente, ele será padrão para a primeira linha do conteúdo.</li>
|
||
<li><code>sidebar_label</code>: The text shown in the document sidebar and in the next/previous button for this document. Se esse campo não estiver presente, o <code>title</code> do documento será então usado como <code>sidebar_label</code>.</li>
|
||
</ul>
|
||
<p>Por exemplo:</p>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-meta">---</span>
|
||
<span class="hljs-attr">id:</span> <span class="hljs-string">doc1</span>
|
||
<span class="hljs-attr">title:</span> <span class="hljs-string">Meu</span> <span class="hljs-string">documento</span>
|
||
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Documento</span>
|
||
<span class="hljs-meta">---</span>
|
||
</code></pre>
|
||
<p>Documentos versionados, quando são copiados, têm seus IDs alterados para incluírem o número da versão. O novo <code>id</code> se torna <code>version-${versão}-${id}</code>, onde <code>${versão}</code> é o número de versão daquele documento e <code>${id}</code> é o <code>id</code> original dele. Além disso, os documentos versionados recebem um campo <code>original_id</code> com o ID original do documento.</p>
|
||
<p>Por exemplo:</p>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-meta">---</span>
|
||
<span class="hljs-attr">id:</span> <span class="hljs-string">version-1.0.0-doc1</span>
|
||
<span class="hljs-attr">title:</span> <span class="hljs-string">Meu</span> <span class="hljs-string">documento</span>
|
||
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Documento</span>
|
||
<span class="hljs-attr">original_id:</span> <span class="hljs-string">doc1</span>
|
||
<span class="hljs-meta">---</span>
|
||
</code></pre>
|
||
<p><code>custom_edit_url</code>: O link para editar este documento. Se este campo não estiver presente, então o link para editar o documento será o do campo opcional <code>editUrl</code> do arquivo <code>siteConfig.js</code>. See <a href="/docs/pt-BR/site-config">siteConfig.js</a> docs for more information.</p>
|
||
<p>Por exemplo:</p>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-meta">---</span>
|
||
<span class="hljs-attr">id:</span> <span class="hljs-string">doc-markdown</span>
|
||
<span class="hljs-attr">title:</span> <span class="hljs-string">Markdown</span> <span class="hljs-string">Features</span>
|
||
<span class="hljs-attr">custom_edit_url:</span> <span class="hljs-attr">https://github.com/facebook/docusaurus/edit/master/docs/api-doc-markdown.md</span>
|
||
<span class="hljs-meta">---</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="posts-do-blog"></a><a href="#posts-do-blog" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Posts do blog</h3>
|
||
<p>Os posts de blog usam os seguintes campos no cabeçalho Markdown, que precisa estar dentro de duas linhas <code>---</code>, uma a cada lado:</p>
|
||
<p><code>title</code>: O título do post.</p>
|
||
<p><code>author</code>: O autor do post. Se este campo for omitido, nenhum nome de autor será mostrado.</p>
|
||
<p><code>authorURL</code>: O link para o qual o usuário será levado quando ele clicar no nome do autor. Se este campo for omitido, o nome do autor não será um link, e sim apenas texto.</p>
|
||
<p><code>authorFBID</code>: O ID do Facebook do autor, usado apenas para obter a foto de perfil que será mostrada ao lado do nome dele no post. Se este campo for omitido, nenhuma foto de perfil será mostrada no post.</p>
|
||
<p>Por exemplo:</p>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-meta">---</span>
|
||
<span class="hljs-attr">title:</span> <span class="hljs-string">Meu</span> <span class="hljs-string">primeiro</span> <span class="hljs-string">post</span> <span class="hljs-string">de</span> <span class="hljs-string">blog</span>
|
||
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
|
||
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">http://twitter.com/franchementli</span>
|
||
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">100002976521003</span>
|
||
<span class="hljs-meta">---</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="recursos-adicionais"></a><a href="#recursos-adicionais" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Recursos adicionais</h2>
|
||
<p>O Docusaurus oferece suporte a alguns recursos adicionais ao escrever sua documentação em Markdown.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="adicionando-links-para-outros-documentos"></a><a href="#adicionando-links-para-outros-documentos" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adicionando links para outros documentos</h3>
|
||
<p>Você pode usar URLs relativos para outros arquivos da documentação, os quais serão automaticamente convertidos para os links dos arquivos HTML correspondentes assim que forem renderizados.</p>
|
||
<p>Exemplo:</p>
|
||
<pre><code class="hljs css language-md">[<span class="hljs-string">Isto é um link para outro documento</span>](<span class="hljs-link">outro-documento.md</span>)
|
||
</code></pre>
|
||
<p>Esse código Markdown será automaticamente convertido para um link que aponta para <code>/docs/outro-documento.html</code> (ou para a versão traduzida/versionada correspondente a ele) assim que ele for renderizado.</p>
|
||
<p>Isso pode ser útil para quando você quiser navegar pela documentação no GitHub, já que lá esses links funcionam já de cara (dentro do GitHub). No entanto, os documentos conterão os links HTML corretos quando forem renderizados para o site.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="adicionando-links-para-imagens-ou-outros-assets"></a><a href="#adicionando-links-para-imagens-ou-outros-assets" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adicionando links para imagens ou outros assets</h3>
|
||
<p>Links para assets estáticos podem ser criados da mesma maneira que links para outros documentos: usando URLs relativos. Os assets estáticos usados em documentos e posts de blog precisam estar dentro dos diretórios <code>docs/assets</code> e <code>website/blog/assets</code>, respectivamente. Os links em Markdown serão convertidos de forma a apontar para os caminhos de arquivo corretos, para que esses caminhos funcionem para documentações em todos os idiomas e versões.</p>
|
||
<p>Exemplo:</p>
|
||
<pre><code class="hljs css language-md">![<span class="hljs-string">texto-alternativo</span>](<span class="hljs-link">assets/imagem-doc.png</span>)
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="gerando-um-indice"></a><a href="#gerando-um-indice" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Gerando um índice</h3>
|
||
<p>Você pode criar uma lista de links gerada automaticamente, que pode ser útil como um índice para a documentação de uma API.</p>
|
||
<p>In your markdown file, insert a line with the text <code><AUTOGENERATED_TABLE_OF_CONTENTS></code>. Escreva sua documentação usando títulos <code>h3</code> para cada função dentro de um bloco de código. These will be found by Docusaurus and a list of links to these sections will be inserted at the text ``.</p>
|
||
<p>Exemplo:</p>
|
||
<pre><code class="hljs css language-md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
|
||
|
||
Texto descrevendo a função
|
||
|
||
<span class="hljs-section">### `docdoc(file)`</span>
|
||
|
||
Texto descrevendo a função
|
||
</code></pre>
|
||
<p>Isso criará um índice das funções:</p>
|
||
<pre><code class="hljs css language-md"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span>
|
||
<span class="hljs-bullet">- </span><span class="hljs-code">`docdoc(file)`</span>
|
||
</code></pre>
|
||
<p>E cada função na lista será um link para sua seção correspondente na página.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="language-specific-code-tabs"></a><a href="#language-specific-code-tabs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Language-specific Code Tabs</h3>
|
||
<p>Display code in multiple programming languages using code tabs. First, mark the start and end of a code tabs group, by using <code><!-- DOCUSAURUS_CODE_TABS --></code> and <code><!-- END_DOCUSAURUS_CODE_TABS --></code> respectively in your markdown. Then start each tab with <code><!--[TAB_TITLE]--></code>.</p>
|
||
<p>Adding the following code to your Markdown file:</p>
|
||
<script src="https://gist.github.com/yangshun/d36d04f383c40beb3f31dd2a16666f6c.js"></script>
|
||
<p>produces this:</p>
|
||
<!--DOCUSAURUS_CODE_TABS-->
|
||
<pre><code class="hljs css language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Hello, world!'</span>);
|
||
</code></pre>
|
||
<pre><code class="hljs css language-py">print(<span class="hljs-string">'Hello, world!'</span>)
|
||
</code></pre>
|
||
<pre><code class="hljs css language-C"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><stdio.h></span></span>
|
||
|
||
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span> </span>{
|
||
<span class="hljs-built_in">printf</span>(<span class="hljs-string">"Hello World!"</span>);
|
||
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
|
||
}
|
||
</code></pre>
|
||
<pre><code class="hljs css language-Pascal">program HelloWorld;
|
||
begin
|
||
WriteLn('Hello, world!');
|
||
end.
|
||
```<!--END_DOCUSAURUS_CODE_TABS-->## Realce de sintaxe
|
||
|
||
O realce de sintaxe é ativado por padrão em blocos de código cercados. A linguagem já deve ser detectada automaticamente, porém às vezes você pode obter melhores resultados ao se especificar ela. Você pode fazer isso usando uma [string informativa](https://github.github.com/gfm/#example-111), logo após os três acentos graves (também conhecidos como *backticks*) de abertura. O seguinte exemplo em JavaScript...
|
||
|
||
```js
|
||
ReactDOM.render(<h1>Olá, mundo!</h1>, document.getElementById('root'));
|
||
```
|
||
|
||
...seria renderizado com realce de sintaxe assim:
|
||
|
||
```js
|
||
ReactDOM.render(<h1>Olá, mundo!</h1>, document.getElementById('root'));
|
||
</code></pre>
|
||
<p>O realce de sintaxe é realizado pelo <a href="https://highlightjs.org">Highlight.js</a> usando o tema especificado no seu arquivo <code>siteConfig.js</code>, lá na chave <code>highlight</code>:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
...
|
||
highlight: {
|
||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>
|
||
}
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>Você pode conferir a lista completa de temas compatíveis no diretório <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles"><code>styles</code></a> do Highlight.js.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="registrando-linguagens-adicionais"></a><a href="#registrando-linguagens-adicionais" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Registrando linguagens adicionais</h3>
|
||
<p>Por mais que o Highlight.js já venha compatível com <a href="https://highlightjs.org/static/demo/">várias linguagens populares</a>, você pode encontrar a necessidade de registrar suporte adicional para uma linguagem que não esteja entre elas. Pensando nisso, nós liberamos uma válvula de escape ao expor a constante <code>hljs</code> como parte da chave de configuração <code>highlight</code>. Isso, por sua vez, permite que você chame <a href="http://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language"><code>registerLanguage</code></a>:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
...
|
||
highlight: {
|
||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>,
|
||
<span class="hljs-attr">hljs</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{
|
||
hljs.registerLanguage(<span class="hljs-string">'galacticbasic'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{
|
||
<span class="hljs-comment">// ...</span>
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="usando-o-prism-como-realcador-de-sintaxe-adicional"></a><a href="#usando-o-prism-como-realcador-de-sintaxe-adicional" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usando o Prism como realçador de sintaxe adicional</h3>
|
||
<p>Você também pode optar por usar o Prism para realçar a sintaxe de certas linguagens disponíveis <a href="https://github.com/PrismJS/prism/tree/master/components">nesta lista</a>. Inclua-as no campo <code>usePrism</code> do seu <a href="/docs/pt-BR/site-config">siteConfig.js</a></p>
|
||
<p>Exemplo:</p>
|
||
<pre><code class="hljs"><span class="hljs-comment">// siteConfig.js</span>
|
||
<span class="hljs-string">usePrism:</span> [<span class="hljs-string">'jsx'</span>]
|
||
</code></pre>
|
||
<p>Observe que o bloco de código abaixo usa o realce de sintaxe do Prism para a linguagem JSX.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">Exemplo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>Docusaurus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Clique aqui<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigation<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'Docusaurus'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-copy-code-buttons"></a><a href="#adding-copy-code-buttons" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Copy Code Buttons</h3>
|
||
<p>Docusaurus allows for adding buttons to copy the code within fenced code blocks. Please follow the instructions <a href="https://gist.github.com/yangshun/55db997ed0f8f4e6527571fc3bee4675">here</a> to add "Copy" buttons to your code blocks.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pt-BR/commands"><span class="arrow-prev">← </span><span>Comandos da CLI</span></a><a class="docs-next button" href="/docs/pt-BR/api-pages"><span>Páginas e estilos</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#cabecalhos-markdown">Cabeçalhos Markdown</a><ul class="toc-headings"><li><a href="#documentos">Documentos</a></li><li><a href="#posts-do-blog">Posts do blog</a></li></ul></li><li><a href="#recursos-adicionais">Recursos adicionais</a><ul class="toc-headings"><li><a href="#adicionando-links-para-outros-documentos">Adicionando links para outros documentos</a></li><li><a href="#adicionando-links-para-imagens-ou-outros-assets">Adicionando links para imagens ou outros assets</a></li><li><a href="#gerando-um-indice">Gerando um índice</a></li><li><a href="#language-specific-code-tabs">Language-specific Code Tabs</a></li><li><a href="#registrando-linguagens-adicionais">Registrando linguagens adicionais</a></li><li><a href="#usando-o-prism-como-realcador-de-sintaxe-adicional">Usando o Prism como realçador de sintaxe adicional</a></li><li><a href="#adding-copy-code-buttons">Adding Copy Code Buttons</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div class="footerSection"><h5>Docs</h5><a href="
|
||
/docs/pt-BR/installation">Getting Started</a><a href="
|
||
/docs/pt-BR/versioning">Versioning</a><a href="
|
||
/docs/pt-BR/translation">Localization</a><a href="
|
||
/docs/pt-BR/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/pt-BR/help">Help</a><a href="/pt-BR/users">User Showcase</a><a href="/pt-BR/about-slash">About</a></div><div class="footerSection"><h5>Social</h5><div class="social"><a class="github-button" href="https://github.com/facebook/docusaurus" data-count-href="https://github.com/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">docusaurus</a></div><div class="social"><a href="https://twitter.com/docusaurus" class="twitter-follow-button">Follow @docusaurus</a></div><div class="social"><div class="fb-like" data-href="https://docusaurus.io" data-colorscheme="dark" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></section><a href="https://opensource.facebook.com/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright"><span>Copyright © 2019 Facebook Inc.</span> Landing images by <a href="https://undraw.co/">unDraw</a>.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'199138890728411',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
|
||
indexName: 'docusaurus',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["language:pt-BR","version:1.14.0"]}
|
||
});
|
||
</script></body></html> |