Add simplified tabs (MetaMask#101)

keiko-pixel · Apr 6, 2023 · 9583f00 · 9583f00
1 parent 53d52ce
commit 9583f00
Show file tree

Hide file tree

Showing 14 changed files with 231 additions and 294 deletions.
diff --git a/README.md b/README.md
@@ -117,36 +117,34 @@ MetaMask documentation.
 
 The following sections describe features that aren't documented in the Docusaurus documentation.
 
-### Code inside tabs
+### Simplified tabs
 
-The simplest way to add code or Markdown inside [tabs](https://docusaurus.io/docs/markdown-features/tabs)
-is to un-indent the content and tags, and add blank lines around the content.
+The [`remark-docusaurus-tabs`](https://github.com/mccleanp/remark-docusaurus-tabs) plugin allows you
+to add content in [tabs](https://docusaurus.io/docs/markdown-features/tabs) using simplified syntax.
 
-For example:
+For example, add code blocks to tabs as follows:
 
 ````jsx
-<Tabs>
-<TabItem value="html" label="HTML">
+<!--tabs-->
+
+# HTML
 
 ```html
 <!-- HTML code block -->
 ```
 
-</TabItem>
-<TabItem value="javascript" label="JavaScript">
+# JavaScript
 
 ```javascript
 // JavaScript code block
 ```
 
-</TabItem>
-<TabItem value="markdown" label="Markdown">
+# Markdown
 
 - This is an example Markdown list.
 - This is **bold** and *italicized* text.
 
-</TabItem>
-</Tabs>
+<!--/tabs-->
 ````
 
 ### Live code blocks

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -42,6 +42,7 @@ const config = {
           sidebarPath: require.resolve("./wallet-sidebar.js"),
           breadcrumbs: false,
           remarkPlugins: [
+            require("remark-docusaurus-tabs"),
             [remarkCodesandbox, {
               mode: "iframe",
               autoDeploy: process.env.NODE_ENV === "production",
@@ -64,6 +65,9 @@ const config = {
         routeBasePath: "snaps",
         sidebarPath: require.resolve("./snaps-sidebar.js"),
         breadcrumbs: false,
+        remarkPlugins: [
+          require("remark-docusaurus-tabs"),
+        ],
       }),
     ],
     [

diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "remark-codesandbox": "^0.10.1"
+    "remark-codesandbox": "^0.10.1",
+    "remark-docusaurus-tabs": "^0.2.0"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^2.2.0",