[WIP] Change syntax of the codetabs

docs/api-doc-markdown.md

@@ -140,18 +140,16 @@ Secondly, wrap each tab with `TAB_TITLE=[TAB_TITLE]` and `END_TAB` tag.
 
 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

v1/lib/core/Doc.js

@@ -19,30 +19,31 @@ 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) return null;
+  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;
       }