mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-17 02:56:57 +02:00
parent
e95c3a87b7
commit
c85228b830
14 changed files with 100 additions and 90 deletions
|
@ -4,8 +4,8 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-doc-markdown.md" target="_blank">Edit</a><h1>Markdown Features</h1></header><article><div><span><h2><a class="anchor" name="markdown-headers"></a>Markdown Headers <a class="hash-link" href="#markdown-headers">#</a></h2>
|
||||
<h2><a class="anchor" name="documents"></a>Documents <a class="hash-link" href="#documents">#</a></h2>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-doc-markdown.md" target="_blank">Edit</a><h1>Markdown Features</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" name="markdown-headers"></a><a href="#markdown-headers" aria-hidden="true" class="hash-link" ><svg 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>Markdown Headers</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="documents"></a><a href="#documents" aria-hidden="true" class="hash-link" ><svg 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>Documents</h3>
|
||||
<p>Documents use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p>
|
||||
<p><code>id</code>: A unique document id. If this field is not present, the document's <code>id</code> will default to it's file name (without the extension).</p>
|
||||
<p><code>title</code>: The title of your document. If this field is not present, the document's <code>title</code> will default to it's <code>id</code>.</p>
|
||||
|
@ -26,7 +26,7 @@ sidebar_label: Document
|
|||
<span class="hljs-section">original_id: doc1
|
||||
---</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" name="blog-posts"></a>Blog Posts <a class="hash-link" href="#blog-posts">#</a></h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="blog-posts"></a><a href="#blog-posts" aria-hidden="true" class="hash-link" ><svg 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><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>
|
||||
|
@ -40,21 +40,21 @@ authorURL: http://twitter.com/franchementli
|
|||
<span class="hljs-section">authorFBID: 100002976521003
|
||||
---</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" name="extra-features"></a>Extra Features <a class="hash-link" href="#extra-features">#</a></h2>
|
||||
<h2><a class="anchor" aria-hidden="true" name="extra-features"></a><a href="#extra-features" aria-hidden="true" class="hash-link" ><svg 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>
|
||||
<h2><a class="anchor" name="linking-other-documents"></a>Linking other Documents <a class="hash-link" href="#linking-other-documents">#</a></h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="linking-other-documents"></a><a href="#linking-other-documents" aria-hidden="true" class="hash-link" ><svg 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>Example:</p>
|
||||
<pre><code class="hljs css markdown">[<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>
|
||||
<h2><a class="anchor" name="linking-to-images-and-other-assets"></a>Linking to Images and Other Assets <a class="hash-link" href="#linking-to-images-and-other-assets">#</a></h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="linking-to-images-and-other-assets"></a><a href="#linking-to-images-and-other-assets" aria-hidden="true" class="hash-link" ><svg 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>Example:</p>
|
||||
<pre><code class="hljs css markdown">
|
||||
</code></pre>
|
||||
<h2><a class="anchor" name="generating-table-of-contents"></a>Generating Table of Contents <a class="hash-link" href="#generating-table-of-contents">#</a></h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="generating-table-of-contents"></a><a href="#generating-table-of-contents" aria-hidden="true" class="hash-link" ><svg 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>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>
|
||||
|
@ -72,7 +72,7 @@ Text describing my function
|
|||
<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" name="syntax-highlighting"></a>Syntax Highlighting <a class="hash-link" href="#syntax-highlighting">#</a></h2>
|
||||
<h2><a class="anchor" aria-hidden="true" name="syntax-highlighting"></a><a href="#syntax-highlighting" aria-hidden="true" class="hash-link" ><svg 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">```javascript
|
||||
ReactDOM.render(
|
||||
|
@ -93,7 +93,7 @@ ReactDOM.render(
|
|||
}
|
||||
</code></pre>
|
||||
<p>You can find the full list of supported themes in the Highlight.js <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles"><code>styles</code></a> directory.</p>
|
||||
<h3><a class="anchor" name="registering-additional-languages"></a>Registering additional languages <a class="hash-link" href="#registering-additional-languages">#</a></h3>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registering-additional-languages"></a><a href="#registering-additional-languages" aria-hidden="true" class="hash-link" ><svg 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>Registering additional languages</h3>
|
||||
<p>While Highlight.js provides support for <a href="https://highlightjs.org/static/demo/">many popular languages out of the box</a>, you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the <code>hljs</code> constant as part of the <code>highlight</code> config key. This in turn allows you to call <a href="http://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language"><code>registerLanguage</code></a>:</p>
|
||||
<pre><code class="hljs css javascript">highlight: {
|
||||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue