misc: update docs for new features

docs/api-doc-markdown.md

@@ -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:
 
@@ -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.
 
 
-### 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.
-Secondly, start each tab with `<!--[TAB_TITLE]-->`.
+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]-->`.
 
-Example:
+Adding the following code to your Markdown file:
+
+<script src="https://gist.github.com/yangshun/d36d04f383c40beb3f31dd2a16666f6c.js"></script>
+
+produces this:
 
 <!--DOCUSAURUS_CODE_TABS-->
-<!--Javascript-->
+<!--JavaScript-->
 ```js
-console.log("Hello, world!");
+console.log('Hello, world!');
 ```
 <!--Python-->
 ```py
-print("Hello, world!")
+print('Hello, world!')
 ```
+
 <!--C-->
 ```C
-#include
+#include <stdio.h>
 
-int main(void)
-{
-    puts("Hello, world!");
+int main() {
+   printf("Hello World!");
+   return 0;
 }
 ```
+
 <!--Pascal-->
 ```Pascal
 program HelloWorld;
@@ -165,8 +170,8 @@ begin
   WriteLn('Hello, world!');
 end.
 ```
-<!--END_DOCUSAURUS_CODE_TABS-->
 
+<!--END_DOCUSAURUS_CODE_TABS-->
 
 ## Syntax Highlighting
 

v1/lib/core/Doc.js

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

v1/lib/static/css/main.css

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