feat(syntax-highlighting): implement dynamic styles with Prism

- Disabled custom CLI styles to allow dynamic styles from Prism
- Removed custom-prism-theme and custom-cli
- Tested syntax highlighting for various supported languages
- Removed dark theme due to issues with dynamic styles
- Suggest combining default Prism styles with custom pkcli styles for optimal results

docs/tutorials/polykey-cli/managing-vaults.md

@@ -8,35 +8,35 @@ Vaults in Polykey are secure containers where you can store and manage secrets l
 
 To create a new vault, use the following command:
 
-```pkcli
+```bash
 polykey vaults create <vaultName>
 ```
 
 #### Example
 
 Create a new vault named `myvault`:
 
-```pkcli
+```yaml
 polykey vaults create myvault
 ```
 
 #### Example Output
 
-```bash
+```java
 Vault zUvPxC9aKNw94E1yR9dffzY created successfully
 ```
 
 ## Listing Vaults
 
 To see all the vaults you have, use the list command. This provides a simple way to view all vault names and their identifiers.
 
-```pkcli
+```bash
 polykey vaults list
 ```
 
 #### Example Output
 
-```bash
+```sql
 my-software-project	zD8XRJw2SoRoUW5e2mBR9tJ
 myvault            	zD3cWJLBDEMWcbwNbjuUevo
 myvault-101        	zErezdpLocYs1VRZPV3wcqS
@@ -46,15 +46,15 @@ myvault-101        	zErezdpLocYs1VRZPV3wcqS
 
 If you need to remove a vault, you can delete it using the delete command:
 
-```pkcli
+```bash
 polykey vaults delete <vaultName>
 ```
 
 #### Example
 
 Delete the vault named myvault:
 
-```pkcli
+```yaml
 polykey vaults delete myvault
 ```
 
@@ -64,21 +64,21 @@ This operation does not produce output on successful execution, indicating the v
 
 Each vault maintains a version history which tracks changes over time. Use the log command to view the history of commits to a vault.
 
-```pkcli
+```bash
 polykey vaults log <vaultName>
 ```
 
 #### Example
 
 View the log for `my-software-project`:
 
-```pkcli
+```bash
 polykey vaults log my-software-project
 ```
 
 #### Example Output
 
-```bash
+```sql
 commitId   b568873376cd74a6c58755f73d1068cbb52cbc84
 committer  vgijtpv0h8m1eajeir77g73muq88n5kj0413t6fjdqsv9kt8dq4pg
 timestamp  Tue May 14 2024 21:27:52 GMT-0600 (Mountain Daylight Time)
@@ -93,21 +93,21 @@ message    "AWS_ACCESS_KEY_ID added\n"
 
 To change the name of an existing vault, use the rename command. This allows you to update the vault's name to something more descriptive or appropriate.
 
-```pkcli
+```bash
 polykey vaults rename <oldVaultName> <newVaultName>
 ```
 
 #### Example
 
 Rename `myvault-1` to `myvault-101`:
 
-```pkcli
+```bash
 polykey vaults rename myvault-1 myvault-101
 ```
 
 Confirm the rename by running:
 
-```pkcli
+```bash
 polykey vaults list
 ```
 
@@ -117,6 +117,6 @@ Managing vaults is a foundational skill in using Polykey effectively. This secti
 
 For a full list of vault commands and options, run:
 
-```pkcli
+```bash
 polykey vaults -h
 ```

docusaurus.config.ts

@@ -213,9 +213,18 @@ const themeConfig: UserThemeConfig = {
     copyright: `Copyright © ${new Date().getFullYear()} Matrix AI`,
   },
   prism: {
-    additionalLanguages: ['shell-session', 'bash'],
-    theme: require('./src/css/custom-prism-theme.ts'),
-    darkTheme: darkCodeTheme,
+    additionalLanguages: [
+      'shell-session',
+      'bash',
+      'yaml',
+      'powershell',
+      'python',
+      'java',
+      'sql',
+      'json',
+    ],
+    theme: prismThemes.github,
+    darkTheme: prismThemes.dracula,
   },
 };
 

src/css/custom-prism-theme.ts

@@ -1,73 +1,12 @@
-import type { PrismTheme } from 'prism-react-renderer';
+// import type { PrismTheme } from 'prism-react-renderer';
 
-// To see changes in development restart docusaurus
+// // To see changes in development restart docusaurus
 
-const theme: PrismTheme = {
-  plain: {
-    color: '#F8F8F2',
-    backgroundColor: '#282A36',
-  },
-  styles: [
-    {
-      types: ['prolog', 'constant', 'builtin'],
-      style: {
-        color: 'rgb(189, 147, 249)',
-      },
-    },
-    {
-      types: ['inserted', 'function'],
-      style: {
-        color: 'rgb(80, 250, 123)',
-      },
-    },
-    {
-      types: ['deleted'],
-      style: {
-        color: 'rgb(255, 85, 85)',
-      },
-    },
-    {
-      types: ['changed'],
-      style: {
-        color: 'rgb(255, 184, 108)',
-      },
-    },
-    {
-      types: ['punctuation', 'symbol'],
-      style: {
-        color: 'rgb(248, 248, 242)',
-      },
-    },
-    {
-      types: ['string', 'char', 'tag', 'selector'],
-      style: {
-        color: 'rgb(255, 121, 198)',
-      },
-    },
-    {
-      types: ['keyword', 'variable'],
-      style: {
-        color: 'rgb(80, 250, 123)',
-      },
-    },
-    {
-      types: ['command'],
-      style: {
-        color: 'rgb(167, 199, 231)',
-      },
-    },
-    {
-      types: ['comment'],
-      style: {
-        color: 'rgb(98, 114, 164)',
-      },
-    },
-    {
-      types: ['attr-name'],
-      style: {
-        color: 'rgb(241, 250, 140)',
-      },
-    },
-  ],
-};
-export default theme;
+// const theme: PrismTheme = {
+//   plain: {
+//     color: '#F8F8F2',
+//     backgroundColor: '#282A36',
+//   },
+//   styles: [],
+// };
+// export default theme;

src/theme/prism-include-languages.js

@@ -20,7 +20,6 @@ export default function prismIncludeLanguages(prismObject) {
     // eslint-disable-next-line global-require, import/no-dynamic-require
     require(`prismjs/components/prism-${lang}`);
   });
-  require('@site/src/prism/custom-cli.js');
 
   delete globalThis.Prism;
 }