From d8018f7aa18355e3a021645a619eccadf4aade7b Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Wed, 10 Aug 2022 19:37:13 +0200
Subject: [PATCH] adds prism

---
 apps/reference/docusaurus.config.js |  4 +-
 apps/reference/package-lock.json    | 19 +++++++++
 apps/reference/package.json         |  1 +
 apps/reference/src/css/custom.css   | 60 +++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/apps/reference/docusaurus.config.js b/apps/reference/docusaurus.config.js
index 856e8eea7ec..5fcca57f4a5 100644
--- a/apps/reference/docusaurus.config.js
+++ b/apps/reference/docusaurus.config.js
@@ -1,8 +1,8 @@
 // @ts-nocheck
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+const lightCodeTheme = require('@kiwicopple/prism-react-renderer/themes/vsDark')
+const darkCodeTheme = require('@kiwicopple/prism-react-renderer/themes/vsDark')
 const mainNavbar = require('./nav/_referenceNavbar')
 
 /** @type {import('@docusaurus/types').Config} */
diff --git a/apps/reference/package-lock.json b/apps/reference/package-lock.json
index 7131e75bca3..357e2332a1b 100644
--- a/apps/reference/package-lock.json
+++ b/apps/reference/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@docusaurus/core": "^2.0.1",
         "@docusaurus/preset-classic": "^2.0.1",
+        "@kiwicopple/prism-react-renderer": "github:kiwicopple/prism-react-renderer",
         "@mdx-js/react": "^1.6.22",
         "clsx": "^1.2.1",
         "docusaurus-theme-search-typesense": "^0.5.3",
@@ -2865,6 +2866,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@kiwicopple/prism-react-renderer": {
+      "version": "1.0.2",
+      "resolved": "git+ssh://git@github.com/kiwicopple/prism-react-renderer.git#4a09100a587bce2d94d7ac8ed3564a61c6e70781",
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "^1.22.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.9"
+      }
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -15012,6 +15024,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@kiwicopple/prism-react-renderer": {
+      "version": "git+ssh://git@github.com/kiwicopple/prism-react-renderer.git#4a09100a587bce2d94d7ac8ed3564a61c6e70781",
+      "from": "@kiwicopple/prism-react-renderer@https://github.com/kiwicopple/prism-react-renderer.git",
+      "requires": {
+        "prismjs": "^1.22.0"
+      }
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
diff --git a/apps/reference/package.json b/apps/reference/package.json
index 6290fff2688..ad523e4ce1f 100644
--- a/apps/reference/package.json
+++ b/apps/reference/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.0.1",
     "@docusaurus/preset-classic": "^2.0.1",
+    "@kiwicopple/prism-react-renderer": "github:kiwicopple/prism-react-renderer",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-theme-search-typesense": "^0.5.3",
diff --git a/apps/reference/src/css/custom.css b/apps/reference/src/css/custom.css
index 6f42040fc22..352fca0433e 100644
--- a/apps/reference/src/css/custom.css
+++ b/apps/reference/src/css/custom.css
@@ -416,3 +416,63 @@ html[data-theme='dark'] .navbar-item-discord:before {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+/* PRISM */
+
+.prism-code {
+  background-color: none;
+  word-break: break-word;
+  font-size: 0.8rem;
+  outline: none !important;
+}
+.prism-code div,
+.prism-code div:focus,
+.prism-code div:active {
+  outline: none !important;
+}
+.token.keyword.module,
+.token.property-access,
+.token.function {
+  font-style: normal !important;
+  color: #ccc !important;
+}
+.token.plain,
+.token.parameter,
+.token.punctuation,
+.token.operator,
+.token.console.class-name,
+.token.doc-comment.parameter,
+.token.doc-comment.optional-parameter,
+.token.doc-comment.parameter.punctuation,
+.token.doc-comment.optional-parameter.punctuation {
+  font-style: normal !important;
+  color: #ccc !important;
+}
+.token.keyword,
+.token.doc-comment.keyword {
+  font-style: normal !important;
+  color: #569cd6 !important;
+}
+.token.string {
+  font-style: normal !important;
+  color: #24b47e !important;
+}
+.token.console {
+  font-style: normal !important;
+  color: #49c1ad !important;
+}
+.token.constant {
+  font-style: normal !important;
+  color: #569cd6 !important;
+}
+.token.comment {
+  font-style: normal !important;
+  color: #666 !important;
+}
+.token.number {
+  color: #b5cea8 !important;
+}
+.token.boolean,
+.token.doc-comment.class-name {
+  @apply text-green-500;
+}