docs: add shell prompt to Bash examples automatically with PrismJS

Author: hassankhan

docs/gatsby-browser.js

@@ -1,5 +1,7 @@
 import { page } from 'cubedev-tracking';
 
+import 'prismjs/plugins/command-line/prism-command-line.css'
+
 export const onRouteUpdate = ({ location, prevLocation }, pluginOptions = {}) => {
   //if (process.env.NODE_ENV !== `production` || typeof snowplow !== `function`) {
   //  return null

docs/gatsby-config.js

@@ -77,6 +77,14 @@ const config = {
             options: {
               inlineCodeMarker: null,
               noInlineHighlight: true,
+              aliases: {
+                dotenv: 'bash',
+              },
+              prompt: {
+                user: "user",
+                host: "localhost",
+                global: false,
+              },
             },
           },
           {

docs/static/styles/prism.scss

@@ -152,3 +152,31 @@ pre[class*="language-"] {
   cursor: help;
 }
 
+.language-bash {
+
+  > .command-line-prompt {
+    border-right: none;
+    margin-right: 0;
+  }
+
+  > .command-line-prompt > span:before {
+    color: #999;
+    content: " ";
+    display: block;
+    padding-right: 0.8em;
+  }
+
+  /* Prompt for all users */
+  > .command-line-prompt > span[data-user]:before {
+    content: "$";
+  }
+
+  /* Prompt for root */
+  > .command-line-prompt > span[data-user="root"]:before {
+    content: "#";
+  }
+
+  > .command-line-prompt > span[data-prompt]:before {
+    content: attr(data-prompt);
+  }
+}