Fixes code syntax highlighting in docs. Closes #4883

docs/docusaurus.config.js

@@ -1,9 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/nightOwlLight');
-const darkCodeTheme = require('prism-react-renderer/themes/oceanicNext');
-
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'CLI for Microsoft 365',
@@ -43,7 +40,7 @@ const config = {
       ({
         docs: {
           routeBasePath: '/',
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: require.resolve('./src/config/sidebars.js'),
           editUrl: 'https://github.com/pnp/cli-microsoft365/blob/main/docs',
           showLastUpdateTime: true
         },
@@ -114,8 +111,9 @@ const config = {
         ]
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: require('./src/config/lightCodeTheme.js'),
+        darkTheme: require('./src/config/darkCodeTheme.js'),
+        additionalLanguages: ['powershell', 'csv'],
       }
     })
 };

docs/src/config/darkCodeTheme.js

@@ -0,0 +1,124 @@
+/** @type {import('prism-react-renderer').PrismTheme} */
+const darkCodeTheme = {
+  plain: {
+    color: '#E3E3E3',
+    backgroundColor: '#323234',
+  },
+  styles: [
+    {
+      types: ['prolog'],
+      style: {
+        color: '#000080'
+      }
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: '#6A9955'
+      }
+    },
+    {
+      types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'],
+      style: {
+        color: '#569CD6'
+      }
+    },
+    {
+      types: ['number', 'inserted'],
+      style: {
+        color: '#B5CEA8'
+      }
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: '#646695'
+      }
+    },
+    {
+      types: ['attr-name', 'variable'],
+      style: {
+        color: '#9CDCFE'
+      }
+    },
+    {
+      types: ['deleted', 'string', 'attr-value', 'template-punctuation'],
+      style: {
+        color: '#CE9178'
+      }
+    },
+    {
+      types: ['selector'],
+      style: {
+        color: '#D7BA7D'
+      }
+    },
+    {
+      types: ['tag'],
+      style: {
+        color: '#4EC9B0'
+      }
+    },
+    {
+      types: ['tag'],
+      languages: ['markup'],
+      style: {
+        color: '#569CD6'
+      }
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#D4D4D4'
+      }
+    },
+    {
+      types: ['punctuation'],
+      languages: ['markup'],
+      style: {
+        color: '#808080'
+      }
+    },
+    {
+      types: ['function'],
+      style: {
+        color: '#DCDCAA'
+      }
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#4EC9B0'
+      }
+    },
+    {
+      types: ['char'],
+      style: {
+        color: '#D16969'
+      }
+    },
+    {
+      types: ['title', 'punctuation', 'table-header', 'table-row'],
+      languages: ['md', 'markdown', 'csv'],
+      style: {
+        color: '#84BDDA'
+      }
+    },
+    {
+      types: ['function'],
+      languages: ['powershell'],
+      style: {
+        color: '#E3E3E3'
+      }
+    },
+    {
+      types: ['class-name'],
+      languages: ['bash'],
+      style: {
+        color: '#E3E3E3'
+      }
+    }
+  ]
+};
+
+module.exports = darkCodeTheme;

docs/src/config/lightCodeTheme.js

@@ -0,0 +1,119 @@
+/** @type {import('prism-react-renderer').PrismTheme} */
+const lightCodeTheme = {
+  plain: {
+    color: '#1c1e21',
+    backgroundColor: '#F6F7F8',
+  },
+  styles: [
+    {
+      types: ['comment'],
+      style: {
+        color: '#008000',
+      },
+    },
+    {
+      types: ['builtin'],
+      style: {
+        color: '#0070C1',
+      },
+    },
+    {
+      types: ['number', 'variable', 'inserted'],
+      style: {
+        color: '#098658',
+      },
+    },
+    {
+      types: ['operator'],
+      style: {
+        color: '#000000',
+      },
+    },
+    {
+      types: ['constant', 'char'],
+      style: {
+        color: '#811F3F',
+      },
+    },
+    {
+      types: ['tag'],
+      style: {
+        color: '#800000',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#FF0000',
+      },
+    },
+    {
+      types: ['deleted', 'string'],
+      style: {
+        color: '#A31515',
+      },
+    },
+    {
+      types: ['changed', 'punctuation'],
+      style: {
+        color: '#0451A5',
+      },
+    },
+    {
+      types: ['function', 'keyword'],
+      style: {
+        color: '#0000FF',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#267F99',
+      },
+    },
+    {
+      types: ['title', 'table-header', 'table-row'],
+      languages: ['md', 'markdown'],
+      style: {
+        color: '#0451A5'
+      }
+    },
+    {
+      types: ['property'],
+      languages: ['json'],
+      style: {
+        color: '#124994'
+      }
+    },
+    {
+      types: ['punctuation'],
+      languages: ['json'],
+      style: {
+        color: '#000000'
+      }
+    },
+    {
+      types: ['function'],
+      languages: ['powershell'],
+      style: {
+        color: '#000000'
+      }
+    },
+    {
+      types: ['class-name'],
+      languages: ['bash'],
+      style: {
+        color: '#000000'
+      }
+    },
+    {
+      types: ['shebang'],
+      languages: ['bash'],
+      style: {
+        color: '#A0A0A0'
+      }
+    }
+  ],
+};
+
+module.exports = lightCodeTheme;