feat: code block tab

v1/lib/core/CodeTabsMarkdownBlock.js

@@ -0,0 +1,50 @@
+import _ from 'lodash';
+
+const React = require('react');
+const Remarkable = require('./Remarkable');
+
+/**
+ * The MarkdownBlock component is used to parse markdown and render to HTML.
+ */
+class MarkdownBlock extends React.Component {
+  render() {
+    const groupId = _.uniqueId();
+
+    const tabs = this.props.children.map(({title, content}) => ({
+      id: _.uniqueId(),
+      groupId: groupId,
+      label: title,
+      lang: title,
+      panelContent: <Remarkable source={content} />,
+    }));
+
+    return (
+      <div className="tabs">
+        <div className="nav-tabs">
+          {tabs.map((t, i) => (
+            <div
+              className={`nav-link${i === 0 ? ' active' : ''}`}
+              id={`${t.id}-tab`}
+              data-group={`group_${t.groupId}`}
+              data-tab={`tabpanel_${t.id}`}>
+              {t.label}
+            </div>
+          ))}
+        </div>
+        <div className="tab-content">
+          {tabs.map((t, i) => (
+            <div
+              className={`tab-pane${i === 0 ? ' active' : ''}`}
+              data-group={`group_${t.groupId}`}
+              tabIndex="-1"
+              id={`tabpanel_${t.id}`}>
+              {t.panelContent}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = MarkdownBlock;

v1/lib/core/Doc.js

@@ -7,6 +7,7 @@
 
 const React = require('react');
 const MarkdownBlock = require('./MarkdownBlock.js');
+const CodeTabsMarkdownBlock = require('./CodeTabsMarkdownBlock.js');
 
 const translate = require('../server/translate.js').translate;
 
@@ -17,8 +18,46 @@ const translateThisDoc = translate(
   'Translate this Doc|recruitment message asking to translate the docs',
 );
 
+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;
+};
 // 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,
+    );
+    const renderResult = contents.map(c => {
+      if (c === 'DOCUSAURUS_CODE_TABS\n') {
+        inCodeTabs = true;
+        return null;
+      }
+      if (c === '\nEND_DOCUSAURUS_CODE_TABS') {
+        inCodeTabs = false;
+        return null;
+      }
+      if (inCodeTabs) {
+        return (
+          <CodeTabsMarkdownBlock>
+            {splitTabsToTitleAndContent(c)}
+          </CodeTabsMarkdownBlock>
+        );
+      }
+      return <MarkdownBlock>{c}</MarkdownBlock>;
+    });
+    return renderResult;
+  }
+
   render() {
     let docSource = this.props.source;
 
@@ -59,6 +98,8 @@ class Doc extends React.Component {
       );
     }
 
+    // const a = this.props.content.split(/(DOCUSAURUS_CODE_TABS)(.*?)(END_DOCUSAURUS_CODE_TABS)/gms)
+    // console.log(a.length, a);
     return (
       <div className="post">
         <header className="postHeader">
@@ -67,9 +108,7 @@ class Doc extends React.Component {
             <h1 className="postHeaderTitle">{this.props.title}</h1>
           )}
         </header>
-        <article>
-          <MarkdownBlock>{this.props.content}</MarkdownBlock>
-        </article>
+        <article>{this.renderContent()}</article>
       </div>
     );
   }

v1/lib/static/css/main.css

@@ -2354,3 +2354,57 @@ input::placeholder {
   padding: 5px 0;
 }
 /* End of Footer */
+
+
+.tabs {
+  border-top: 1px solid #cfcfcf;
+}
+
+.nav-tabs {
+  display: flex;
+  border-bottom: 4px solid #e0e0e0;
+  width: 100%;
+  padding: 0;
+  overflow-x: auto;
+  white-space: nowrap;
+  max-height: 100%;
+}
+
+.nav-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs .tab-pane:focus {
+  outline: none;
+}
+
+.tabs .nav-tabs > div {
+  font-size: 14px;
+  line-height: 1.14286;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
+
+.tabs .nav-tabs > div.active {
+  border-bottom: 4px solid $primaryColor;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.tab-pane > pre {
+  white-space: pre-wrap;
+}
+
+.tab-pane > pre > code {
+  margin-top: 0;
+  border-radius: 0;
+  box-shadow: none;
+}

v1/website/static/js/code-blocks-buttons.js

@@ -44,4 +44,25 @@ window.addEventListener('load', function() {
       textEl.textContent = 'Copy';
     }, 2000);
   });
+
+  // add event listener for all tab
+  document.querySelectorAll('.nav-link').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      const groupId = e.target.getAttribute('data-group');
+      document
+        .querySelectorAll(`.nav-link[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      document
+        .querySelectorAll(`.tab-pane[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      e.target.classList.add('active');
+      document
+        .querySelector(`#${e.target.getAttribute('data-tab')}`)
+        .classList.add('active');
+    });
+  });
 });

v1/website/versioned_docs/version-1.0.15/guides-custom-pages.md

@@ -34,12 +34,108 @@ root-of-repo
 │   └── static
 ```
 
+
+## Codeblocks in multiple languages
+
+DOCUSAURUS_CODE_TABS
+TAB_TITLE=Javascript
+```js
+const a = 33 + 4;
+console.log(a);
+```
+END_TAB
+TAB_TITLE=Python
+```py
+a = 33 + 4
+print(a)
+```
+END_TAB
+END_DOCUSAURUS_CODE_TABS
+
 Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found [here](api-pages.md). Information on how to link to your different pages in the header navigation bar can be found [here](guides-navigation.md).
 
 > If you want your page to show up in your navigation header, you will need to update `siteConfig.js` to add to the `headerLinks` element. e.g., `{ page: 'about-slash', label: 'About/' }`,
 
 ## Adding Static Pages
 
+DOCUSAURUS_CODE_TABS
+TAB_TITLE=Javascript
+```js
+const a = 33 + 4;
+```
+END_TAB
+TAB_TITLE=Python
+```py
+a = 33 + 4;
+```
+END_TAB
+TAB_TITLE=React
+```jsx
+const React = require('react');
+
+class HelloWorld extends React.Component {
+  render() {
+    return <p>Hello, World!</p>;
+  }
+}
+```
+END_TAB
+TAB_TITLE=Java
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+TAB_TITLE=C++
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+TAB_TITLE=C
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+TAB_TITLE=C#
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+TAB_TITLE=LongName
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+TAB_TITLE=Long name
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+END_TAB
+END_DOCUSAURUS_CODE_TABS
+
 Static `.html` files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the `static` folder in the same way as other [static assets](api-pages.md#using-static-assets). Alternatively, they can be placed in the `pages` folder and would be served as-is instead of being rendered from React.
 
 If you wish to use Docusaurus' stylesheet, you can access it at `${baseUrl}css/main.css`. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the `siteConfig.separateCss` field in `siteConfig.js`.