mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-29 08:57:03 +02:00
parent
6b2f57c29c
commit
4546c36b7d
368 changed files with 25613 additions and 1429 deletions
|
@ -12,7 +12,7 @@
|
|||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible doc separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/en/versions"><h3>1.1.5</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/en/installation" target="_self">Docs</a></li><li class=""><a href="/en/help" target="_self">Help</a></li><li class=""><a href="/en/users" target="_self">Users</a></li><li class=""><a href="/en/about-slash" target="_self">About /</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"/>English</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/es-ES/doc-markdown">Español</a></li><li><a href="/docs/ro/doc-markdown">Română</a></li><li><a href="/docs/tr/doc-markdown">Türkçe</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">Help Translate</a></li></ul></div></li><script>
|
||||
</script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible doc separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/en/versions"><h3>1.2.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/en/installation" target="_self">Docs</a></li><li class=""><a href="/en/help" target="_self">Help</a></li><li class=""><a href="/en/users" target="_self">Users</a></li><li class=""><a href="/en/about-slash" target="_self">About /</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"/>English</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/es-ES/doc-markdown">Español</a></li><li><a href="/docs/ro/doc-markdown">Română</a></li><li><a href="/docs/tr/doc-markdown">Türkçe</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">Help Translate</a></li></ul></div></li><script>
|
||||
const languagesMenuItem = document.getElementById("languages-menu");
|
||||
const languagesDropDown = document.getElementById("languages-dropdown");
|
||||
languagesMenuItem.addEventListener("click", function(){
|
||||
|
@ -68,7 +68,7 @@
|
|||
<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>: The url for editing this document. If this field is not present, the document's edit url will fallback to <code>editUrl</code> from optional fields of <code>siteConfig.js</code>. See <a href="site-config.md">siteConfig.js</a> docs for more information.</p>
|
||||
<p><code>custom_edit_url</code>: The URL for editing this document. If this field is not present, the document's edit URL will fall back to <code>editUrl</code> from optional fields of <code>siteConfig.js</code>. See <a href="site-config.md">siteConfig.js</a> docs for more information.</p>
|
||||
<p>For example:</p>
|
||||
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
|
||||
<span class="hljs-attr">id:</span> <span class="hljs-string">doc-markdown</span>
|
||||
|
@ -77,7 +77,7 @@
|
|||
<span class="hljs-meta">---</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="blog-posts"></a><a href="#blog-posts" 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>Blog Posts</h3>
|
||||
<p>Blog Posts use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p>
|
||||
<p>Blog posts use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p>
|
||||
<p><code>title</code>: The title of this blog post.</p>
|
||||
<p><code>author</code>: The author of this blog post. If this field is omitted, no author name will be shown.</p>
|
||||
<p><code>authorURL</code>: A page to link to when a site user clicks the author's name. If this field is omitted, the author's name will not link to anything.</p>
|
||||
|
@ -93,19 +93,19 @@
|
|||
<h2><a class="anchor" aria-hidden="true" id="extra-features"></a><a href="#extra-features" 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>Extra Features</h2>
|
||||
<p>Docusaurus supports some extra features when writing documentation in markdown.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="linking-other-documents"></a><a href="#linking-other-documents" 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>Linking other Documents</h3>
|
||||
<p>You can use relative urls to other documentation files which will automatically get converted to the corresponding html links when they get rendered.</p>
|
||||
<p>You can use relative URLs to other documentation files which will automatically get converted to the corresponding HTML links when they get rendered.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css languages- md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
|
||||
</code></pre>
|
||||
<p>This markdown will automatically get converted into a link to <code>/docs/other-document.html</code> (or the appropriately translated/versioned link) once it gets rendered.</p>
|
||||
<p>This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct html links when they get rendered.</p>
|
||||
<p>This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct HTML links when they get rendered.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="linking-to-images-and-other-assets"></a><a href="#linking-to-images-and-other-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>Linking to Images and Other Assets</h3>
|
||||
<p>Static assets can be linked to in the same way that documents are, using relative urls. Static assets used in documents and blogs should go into <code>docs/assets</code> and <code>website/blog/assets</code>, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.</p>
|
||||
<p>Static assets can be linked to in the same way that documents are, using relative URLs. Static assets used in documents and blogs should go into <code>docs/assets</code> and <code>website/blog/assets</code>, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css languages- md">
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="generating-table-of-contents"></a><a href="#generating-table-of-contents" 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>Generating Table of Contents</h3>
|
||||
<p>You can make an autogenerated list of links, which can be useful as a table of contents for API docs.</p>
|
||||
<p>You can make an auto-generated list of links, which can be useful as a table of contents for API docs.</p>
|
||||
<p>In your markdown file, insert a line with the text <<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>>. Write your documentation using <code>h3</code> headers for each function inside a code block. These will be found by Docusaurus and a list of links to these sections will inserted at the text <<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>>.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css languages- md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
|
||||
|
@ -117,24 +117,18 @@ Text describing my function
|
|||
Text describing my function
|
||||
</code></pre>
|
||||
<p>will lead to a table of contents of the functions:</p>
|
||||
<pre><code class="hljs css languages- 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>
|
||||
<pre><code class="hljs css languages- 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>and each function will link to their corresponding sections in the page.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="syntax-highlighting"></a><a href="#syntax-highlighting" 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>Syntax Highlighting</h2>
|
||||
<p>Syntax highlighting is enabled by default on fenced code blocks. The language should be detected automatically, but you can sometimes get better results by specifying the language. You can do so using an <a href="https://github.github.com/gfm/#example-111">info string</a>, following the three opening backticks. The following JavaScript example...</p>
|
||||
<pre><code class="hljs">```js
|
||||
ReactDOM.render(
|
||||
<h1>Hello, world!</h1>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
|
||||
```
|
||||
</code></pre>
|
||||
<p>...would be rendered with syntax highlighting like so:</p>
|
||||
<pre><code class="hljs css languages- js">ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>,
|
||||
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)
|
||||
);
|
||||
<pre><code class="hljs css languages- js">ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
|
||||
</code></pre>
|
||||
<p>Highlighting is provided by <a href="https://highlightjs.org">Highlight.js</a> using the theme specified in your <code>siteConfig.js</code> file as part of the <code>highlight</code> key:</p>
|
||||
<pre><code class="hljs css languages- js">{
|
||||
|
@ -160,7 +154,28 @@ ReactDOM.render(
|
|||
}
|
||||
}
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="commands">← CLI Commands</a><a class="docs-next button" href="api-pages">Pages and Styles →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#markdown-headers">Markdown Headers</a><ul class="toc-headings"><li><a href="#documents">Documents</a></li><li><a href="#blog-posts">Blog Posts</a></li></ul></li><li><a href="#extra-features">Extra Features</a><ul class="toc-headings"><li><a href="#linking-other-documents">Linking other Documents</a></li><li><a href="#linking-to-images-and-other-assets">Linking to Images and Other Assets</a></li><li><a href="#generating-table-of-contents">Generating Table of Contents</a></li></ul></li><li><a href="#syntax-highlighting">Syntax Highlighting</a><ul class="toc-headings"><li><a href="#registering-additional-languages">Registering additional languages</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><h5>Docs</h5><a href="
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-prism-as-additional-syntax-highlighter"></a><a href="#using-prism-as-additional-syntax-highlighter" 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>Using Prism as additional syntax highlighter</h3>
|
||||
<p>You can also opt to use Prism to syntax highlight certain languages available in the list <a href="https://github.com/PrismJS/prism/tree/master/components">here</a>. Include those languages in <code>usePrism</code> field in your <a href="/docs/en/site-config">siteConfig.js</a></p>
|
||||
<p>Example:</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>Notice that the code block below uses JSX syntax highlighting from Prism.</p>
|
||||
<pre><code class="hljs css languages- jsx"><span class="token keyword">class</span> <span class="token class-name">Example</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>View</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>Text</span><span class="token punctuation">></span></span>Docusaurus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Click me<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>View</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>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="commands">← CLI Commands</a><a class="docs-next button" href="api-pages">Pages and Styles →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#markdown-headers">Markdown Headers</a><ul class="toc-headings"><li><a href="#documents">Documents</a></li><li><a href="#blog-posts">Blog Posts</a></li></ul></li><li><a href="#extra-features">Extra Features</a><ul class="toc-headings"><li><a href="#linking-other-documents">Linking other Documents</a></li><li><a href="#linking-to-images-and-other-assets">Linking to Images and Other Assets</a></li><li><a href="#generating-table-of-contents">Generating Table of Contents</a></li></ul></li><li><a href="#syntax-highlighting">Syntax Highlighting</a><ul class="toc-headings"><li><a href="#registering-additional-languages">Registering additional languages</a></li><li><a href="#using-prism-as-additional-syntax-highlighter">Using Prism as additional syntax highlighter</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><h5>Docs</h5><a href="
|
||||
/docs/en/installation.html">Getting Started</a><a href="
|
||||
/docs/en/versioning.html">Versioning</a><a href="
|
||||
/docs/en/translation.html">Localization</a><a href="
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue