3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-25 15:07:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

misc: update docs for new features

Browse source
This commit is contained in:
Yangshun Tay 2019-01-23 23:20:11 -08:00
parent 5ce85e5b5e
commit dcd3361413
3 changed files with 30 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

31
docs/api-doc-markdown.md
View file

@ -42,7 +42,7 @@ original_id: doc1
--- ---
``` ```
`custom_edit_url`: The URL for editing this document. If this field is not present, the document's edit URL will fall back to `editUrl` from optional fields of `siteConfig.js`. See [siteConfig.js](site-config.md) docs for more information. `custom_edit_url`: The URL for editing this document. If this field is not present, the document's edit URL will fall back to `editUrl` from optional fields of `siteConfig.js`. See [siteConfig.js](api-site-config.md) docs for more information.
For example: For example:
@ -133,31 +133,36 @@ will lead to a table of contents of the functions:
and each function will link to their corresponding sections in the page. and each function will link to their corresponding sections in the page.
### Code tabs ### Language-specific Code Tabs
Docusaurus provides code tabs by default. To use code tabs, first, mark the start and end of a code tabs group, by using `<!--DOCUSAURUS_CODE_TABS-->` and `<!--END_DOCUSAURUS_CODE_TABS-->` respectively. Display code in multiple programming languages using code tabs. First, mark the start and end of a code tabs group, by using `<!-- DOCUSAURUS_CODE_TABS -->` and `<!-- END_DOCUSAURUS_CODE_TABS -->` respectively in your markdown. Then start each tab with `<!--[TAB_TITLE]-->`.
Secondly, start each tab with `<!--[TAB_TITLE]-->`.
Example: Adding the following code to your Markdown file:
<script src="https://gist.github.com/yangshun/d36d04f383c40beb3f31dd2a16666f6c.js"></script>
produces this:
<!--DOCUSAURUS_CODE_TABS--> <!--DOCUSAURUS_CODE_TABS-->
<!--Javascript--> <!--JavaScript-->
```js ```js
console.log("Hello, world!"); console.log('Hello, world!');
``` ```
<!--Python--> <!--Python-->
```py ```py
print("Hello, world!") print('Hello, world!')
``` ```
<!--C--> <!--C-->
```C ```C
#include #include <stdio.h>
int main(void) int main() {
{ printf("Hello World!");
puts("Hello, world!"); return 0;
} }
``` ```
<!--Pascal--> <!--Pascal-->
```Pascal ```Pascal
program HelloWorld; program HelloWorld;
@ -165,8 +170,8 @@ begin
WriteLn('Hello, world!'); WriteLn('Hello, world!');
end. end.
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
<!--END_DOCUSAURUS_CODE_TABS-->
## Syntax Highlighting ## Syntax Highlighting

14
v1/lib/core/Doc.js
View file

@ -21,13 +21,14 @@ const translateThisDoc = translate(
const splitTabsToTitleAndContent = content => { const splitTabsToTitleAndContent = content => {
const titles = content.match(/<!--(.*?)-->/gms); const titles = content.match(/<!--(.*?)-->/gms);
const tabs = content.split(/<!--.*?-->/gms); const tabs = content.split(/<!--.*?-->/gms);
if (!titles || !tabs || !titles.length || !tabs.length) return []; if (!titles || !tabs || !titles.length || !tabs.length) {
return [];
}
tabs.shift(); tabs.shift();
const result = titles.map((title, idx) => ({ return titles.map((title, idx) => ({
title: title.substring(4, title.length - 3), title: title.substring(4, title.length - 3).trim(),
content: tabs[idx], content: tabs[idx],
})); }));
return result;
}; };
// inner doc component for article itself // inner doc component for article itself
@ -39,7 +40,7 @@ class Doc extends React.Component {
/(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms, /(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
); );
const renderResult = contents.map(c => { const renderResult = contents.map((c, index) => {
if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') { if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') {
inCodeTabs = true; inCodeTabs = true;
return null; return null;
@ -55,8 +56,9 @@ class Doc extends React.Component {
</CodeTabsMarkdownBlock> </CodeTabsMarkdownBlock>
); );
} }
return <MarkdownBlock>{c}</MarkdownBlock>; return <MarkdownBlock key={index}>{c}</MarkdownBlock>;
}); });
return renderResult; return renderResult;
} }

5
v1/lib/static/css/main.css
View file

@ -1604,8 +1604,11 @@ input::placeholder {
display: none; display: none;
} }
.collapsible .arrow { .collapsible {
cursor: pointer; cursor: pointer;
}
.collapsible .arrow {
float: right; float: right;
margin-right: 5px; margin-right: 5px;
transform: rotate(90deg); transform: rotate(90deg);