Add code editor, prismjs + types, prism xonokai theme manually

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "18.14.0",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "^10.4.13",
@@ -20,9 +21,11 @@
     "life360-node-api": "^0.0.10",
     "next": "13.1.6",
     "postcss": "^8.4.21",
+    "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.2",
+    "react-simple-code-editor": "^0.13.1",
     "sass": "^1.58.3",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",

src/styles/globals.scss

@@ -1,3 +1,5 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import "prism-xonokai.css";

src/styles/prism-xonokai.css

@@ -0,0 +1,162 @@
+/**
+* xonokai theme for JavaScript, CSS and HTML
+* based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
+* license: MIT; http://moox.mit-license.org/
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: normal;
+    font-family: Menlo, Monaco, "Courier New", monospace;
+    font-size: 14px;
+    color: #76d9e6;
+    text-shadow: none;
+}
+
+pre > code[class*="language-"] {
+    font-size: 1em;
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+    background: #2a2a2a;
+}
+
+pre[class*="language-"] {
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #e1e1e8;
+    overflow: auto;
+    position: relative;
+}
+
+pre[class*="language-"] code {
+    white-space: pre;
+    display: block;
+}
+
+:not(pre) > code[class*="language-"] {
+    padding: 0.15em 0.2em 0.05em;
+    border-radius: .3em;
+    border: 0.13em solid #7a6652;
+    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #6f705e;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+    color: #a77afe;
+}
+
+.token.attr-name,
+.token.string {
+    color: #e6d06c;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #e6d06c;
+}
+
+.token.selector,
+.token.inserted {
+    color: #a6e22d;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.important,
+.token.deleted {
+    color: #ef3b7d;
+}
+
+.token.regex,
+.token.statement {
+    color: #76d9e6;
+}
+
+.token.placeholder,
+.token.variable {
+    color: #fff;
+}
+
+.token.important,
+.token.statement,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.punctuation {
+    color: #bebec5;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+code.language-markup {
+    color: #f9f9f9;
+}
+
+code.language-markup .token.tag {
+    color: #ef3b7d;
+}
+
+code.language-markup .token.attr-name {
+    color: #a6e22d;
+}
+
+code.language-markup .token.attr-value {
+    color: #e6d06c;
+}
+
+code.language-markup .token.style,
+code.language-markup .token.script {
+    color: #76d9e6;
+}
+
+code.language-markup .token.script .token.keyword {
+    color: #76d9e6;
+}
+
+/* Line highlight plugin */
+.line-highlight.line-highlight {
+    padding: 0;
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+    padding: 0.2em 0.5em;
+    background-color: rgba(255, 255, 255, 0.4);
+    color: black;
+    height: 1em;
+    line-height: 1em;
+    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
+}