Change syntax of the codetabs

facebook · Dec 1, 2018 · 9cb10e2 · 9cb10e2
1 parent 8458a9f
commit 9cb10e2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 24 deletions.
diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
@@ -135,23 +135,21 @@ and each function will link to their corresponding sections in the page.
 
 ### 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, wrap each tab with `TAB_TITLE=[TAB_TITLE]` and `END_TAB` tag.
+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]-->`.
 
 Example:
 
-DOCUSAURUS_CODE_TABS
-TAB_TITLE=Javascript
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Javascript-->
 ```js
 console.log("Hello, world!");
 ```
-END_TAB
-TAB_TITLE=Python
+<!--Python-->
 ```py
 print("Hello, world!")
 ```
-END_TAB
-TAB_TITLE=C
+<!--C-->
 ```C
 #include
 
@@ -160,16 +158,14 @@ int main(void)
     puts("Hello, world!");
 }
 ```
-END_TAB
-TAB_TITLE=Pascal
+<!--Pascal-->
 ```Pascal
 program HelloWorld;
 begin
   WriteLn('Hello, world!');
 end.
 ```
-END_TAB
-END_DOCUSAURUS_CODE_TABS
+<!--END_DOCUSAURUS_CODE_TABS-->
 
 
 ## Syntax Highlighting

diff --git a/v1/lib/core/Doc.js b/v1/lib/core/Doc.js
@@ -19,30 +19,32 @@ const translateThisDoc = translate(
 );
 
 const splitTabsToTitleAndContent = content => {
-  const tabs = content.match(/TAB_TITLE(.*?)END_TAB/gms);
-  const titleAndContentRegex = /^TAB_TITLE=([^\n]+)(.*?)END_TAB$/s;
-  if (tabs && tabs.length) {
-    return tabs.map(tab => {
-      const temp = tab.match(titleAndContentRegex);
-      return {title: temp[1], content: temp[2]};
-    });
-  }
-  return null;
+  const titles = content.match(/<!--(.*?)-->/gms);
+  const tabs = content.split(/<!--.*?-->/gms);
+  if (!titles || !tabs || !titles.length || !tabs.length) return [];
+  tabs.shift();
+  const result = titles.map((title, idx) => ({
+    title: title.substring(4, title.length - 3),
+    content: tabs[idx],
+  }));
+  return result;
 };
+
 // inner doc component for article itself
 class Doc extends React.Component {
   renderContent() {
     const {content} = this.props;
     let inCodeTabs = false;
     const contents = content.split(
-      /(DOCUSAURUS_CODE_TABS\n)(.*?)(\nEND_DOCUSAURUS_CODE_TABS)/gms,
+      /(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
     );
+
     const renderResult = contents.map(c => {
-      if (c === 'DOCUSAURUS_CODE_TABS\n') {
+      if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') {
         inCodeTabs = true;
         return null;
       }
-      if (c === '\nEND_DOCUSAURUS_CODE_TABS') {
+      if (c === '\n<!--END_DOCUSAURUS_CODE_TABS-->') {
         inCodeTabs = false;
         return null;
       }