diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index ab6f60fc0..a85623dc7 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -13,6 +13,7 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@tabler/icons-react": "^2.17.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/line-clamp": "^0.4.4",
                 "@testing-library/jest-dom": "^5.16.5",
@@ -37,11 +38,18 @@
                 "react-markdown": "^8.0.7",
                 "react-router-dom": "^6.8.1",
                 "react-scripts": "5.0.1",
+                "react-syntax-highlighter": "^15.5.0",
                 "react-tabs": "^6.0.0",
                 "reactflow": "^11.5.5",
+                "rehype-mathjax": "^4.0.2",
+                "remark-gfm": "^3.0.1",
+                "remark-math": "^5.1.1",
                 "tailwindcss": "^3.2.6",
                 "typescript": "^4.9.5",
                 "web-vitals": "^2.1.4"
+            },
+            "devDependencies": {
+                "@tailwindcss/typography": "^0.5.9"
             }
         },
         "node_modules/@adobe/css-tools": {
@@ -3922,6 +3930,31 @@
                 "url": "https://github.com/sponsors/gregberge"
             }
         },
+        "node_modules/@tabler/icons": {
+            "version": "2.17.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.17.0.tgz",
+            "integrity": "sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            }
+        },
+        "node_modules/@tabler/icons-react": {
+            "version": "2.17.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.17.0.tgz",
+            "integrity": "sha512-kuEW+qNwRqcK5iMl7qTapzX2NiMOwPg4Az01d+IZ1DIMwaZ7iKPJaIor2ihKFLPYrT9D5BZHXB8R5mSkw0FETg==",
+            "dependencies": {
+                "@tabler/icons": "2.17.0",
+                "prop-types": "^15.7.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            },
+            "peerDependencies": {
+                "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -3941,6 +3974,34 @@
                 "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
             }
         },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.9",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+            "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+            "dev": true,
+            "dependencies": {
+                "lodash.castarray": "^4.4.0",
+                "lodash.isplainobject": "^4.0.6",
+                "lodash.merge": "^4.6.2",
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/@testing-library/dom": {
             "version": "8.20.0",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -4591,6 +4652,16 @@
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
         },
+        "node_modules/@types/katex": {
+            "version": "0.16.0",
+            "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",
+            "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="
+        },
+        "node_modules/@types/mathjax": {
+            "version": "0.0.37",
+            "resolved": "https://registry.npmjs.org/@types/mathjax/-/mathjax-0.0.37.tgz",
+            "integrity": "sha512-y0WSZBtBNQwcYipTU/BhgeFu1EZNlFvUNCmkMXV9kBQZq7/o5z82dNVyH3yy2Xv5zzeNeQoHSL4Xm06+EQiH+g=="
+        },
         "node_modules/@types/mdast": {
             "version": "3.0.11",
             "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
@@ -4749,6 +4820,11 @@
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
             "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
         },
+        "node_modules/@types/web": {
+            "version": "0.0.46",
+            "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.46.tgz",
+            "integrity": "sha512-ki0OmbjSdAEfvmy5AYWFpMkRsPW+6h4ibQ4tzk8SJsS9dkrrD3B/U1eVvdNNWxAzntjq6o2sjSia6UBCoPH+Yg=="
+        },
         "node_modules/@types/ws": {
             "version": "8.5.4",
             "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -6203,6 +6279,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/ccount": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+            "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/chalk": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -6233,6 +6318,24 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/character-entities-legacy": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+            "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-reference-invalid": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+            "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/check-types": {
             "version": "11.2.2",
             "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
@@ -8436,6 +8539,14 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/esm": {
+            "version": "3.2.25",
+            "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+            "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/espree": {
             "version": "9.4.1",
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
@@ -8685,6 +8796,18 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fault": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+            "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+            "dependencies": {
+                "format": "^0.2.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/faye-websocket": {
             "version": "0.11.4",
             "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -9059,6 +9182,14 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/format": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+            "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+            "engines": {
+                "node": ">=0.4.x"
+            }
+        },
         "node_modules/forwarded": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9451,6 +9582,59 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hast-util-from-dom": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-4.2.0.tgz",
+            "integrity": "sha512-t1RJW/OpJbCAJQeKi3Qrj1cAOLA0+av/iPFori112+0X7R3wng+jxLA+kXec8K4szqPRGI8vPxbbpEYvvpwaeQ==",
+            "dependencies": {
+                "hastscript": "^7.0.0",
+                "web-namespaces": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-is-element": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+            "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-parse-selector": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+            "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+            "dependencies": {
+                "@types/hast": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-to-text": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+            "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/unist": "^2.0.0",
+                "hast-util-is-element": "^2.0.0",
+                "unist-util-find-after": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/hast-util-whitespace": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -9460,6 +9644,22 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/hastscript": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+            "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "hast-util-parse-selector": "^3.0.0",
+                "property-information": "^6.0.0",
+                "space-separated-tokens": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9468,6 +9668,14 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/highlight.js": {
+            "version": "10.7.3",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+            "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/hoist-non-react-statics": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -9864,6 +10072,28 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/is-alphabetical": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+            "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-alphanumerical": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+            "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+            "dependencies": {
+                "is-alphabetical": "^1.0.0",
+                "is-decimal": "^1.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-arguments": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -9992,6 +10222,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-decimal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+            "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-docker": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -10041,6 +10280,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-hexadecimal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+            "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-map": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -12481,6 +12729,21 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/katex": {
+            "version": "0.16.7",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
+            "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
         "node_modules/kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -12591,6 +12854,12 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "node_modules/lodash.castarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+            "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+            "dev": true
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -12606,6 +12875,12 @@
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
             "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
         },
+        "node_modules/lodash.isplainobject": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+            "dev": true
+        },
         "node_modules/lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12626,6 +12901,15 @@
             "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
             "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
         },
+        "node_modules/longest-streak": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+            "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/loose-envify": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -12645,6 +12929,19 @@
                 "tslib": "^2.0.3"
             }
         },
+        "node_modules/lowlight": {
+            "version": "1.20.0",
+            "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+            "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+            "dependencies": {
+                "fault": "^1.0.0",
+                "highlight.js": "~10.7.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/lru-cache": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -12699,6 +12996,26 @@
                 "tmpl": "1.0.5"
             }
         },
+        "node_modules/markdown-table": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+            "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/mathjax-full": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz",
+            "integrity": "sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==",
+            "dependencies": {
+                "esm": "^3.2.25",
+                "mhchemparser": "^4.1.0",
+                "mj-context-menu": "^0.6.1",
+                "speech-rule-engine": "^4.0.6"
+            }
+        },
         "node_modules/mdast-util-definitions": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
@@ -12713,6 +13030,32 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-find-and-replace": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz",
+            "integrity": "sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "escape-string-regexp": "^5.0.0",
+                "unist-util-is": "^5.0.0",
+                "unist-util-visit-parents": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+            "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/mdast-util-from-markdown": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
@@ -12736,6 +13079,121 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-gfm": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-2.0.2.tgz",
+            "integrity": "sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==",
+            "dependencies": {
+                "mdast-util-from-markdown": "^1.0.0",
+                "mdast-util-gfm-autolink-literal": "^1.0.0",
+                "mdast-util-gfm-footnote": "^1.0.0",
+                "mdast-util-gfm-strikethrough": "^1.0.0",
+                "mdast-util-gfm-table": "^1.0.0",
+                "mdast-util-gfm-task-list-item": "^1.0.0",
+                "mdast-util-to-markdown": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-autolink-literal": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz",
+            "integrity": "sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "ccount": "^2.0.0",
+                "mdast-util-find-and-replace": "^2.0.0",
+                "micromark-util-character": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-footnote": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.2.tgz",
+            "integrity": "sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0",
+                "micromark-util-normalize-identifier": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-strikethrough": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.3.tgz",
+            "integrity": "sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-table": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.7.tgz",
+            "integrity": "sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "markdown-table": "^3.0.0",
+                "mdast-util-from-markdown": "^1.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-task-list-item": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.2.tgz",
+            "integrity": "sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-math": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-2.0.2.tgz",
+            "integrity": "sha512-8gmkKVp9v6+Tgjtq6SYx9kGPpTf6FVYRa53/DLh479aldR9AyP48qeVOgNZ5X7QUK7nOy4yw7vg6mbiGcs9jWQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-phrasing": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
+            "integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "unist-util-is": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-to-hast": {
             "version": "12.3.0",
             "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
@@ -12755,6 +13213,25 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-to-markdown": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
+            "integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "@types/unist": "^2.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-phrasing": "^3.0.0",
+                "mdast-util-to-string": "^3.0.0",
+                "micromark-util-decode-string": "^1.0.0",
+                "unist-util-visit": "^4.0.0",
+                "zwitch": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-to-string": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
@@ -12817,6 +13294,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mhchemparser": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/mhchemparser/-/mhchemparser-4.1.1.tgz",
+            "integrity": "sha512-R75CUN6O6e1t8bgailrF1qPq+HhVeFTM3XQ0uzI+mXTybmphy3b6h4NbLOYhemViQ3lUs+6CKRkC3Ws1TlYREA=="
+        },
         "node_modules/micromark": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.1.0.tgz",
@@ -12884,6 +13366,138 @@
                 "uvu": "^0.5.0"
             }
         },
+        "node_modules/micromark-extension-gfm": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz",
+            "integrity": "sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==",
+            "dependencies": {
+                "micromark-extension-gfm-autolink-literal": "^1.0.0",
+                "micromark-extension-gfm-footnote": "^1.0.0",
+                "micromark-extension-gfm-strikethrough": "^1.0.0",
+                "micromark-extension-gfm-table": "^1.0.0",
+                "micromark-extension-gfm-tagfilter": "^1.0.0",
+                "micromark-extension-gfm-task-list-item": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-autolink-literal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.4.tgz",
+            "integrity": "sha512-WCssN+M9rUyfHN5zPBn3/f0mIA7tqArHL/EKbv3CZK+LT2rG77FEikIQEqBkv46fOqXQK4NEW/Pc7Z27gshpeg==",
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-footnote": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.0.tgz",
+            "integrity": "sha512-RWYce7j8+c0n7Djzv5NzGEGitNNYO3uj+h/XYMdS/JinH1Go+/Qkomg/rfxExFzYTiydaV6GLeffGO5qcJbMPA==",
+            "dependencies": {
+                "micromark-core-commonmark": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-strikethrough": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.5.tgz",
+            "integrity": "sha512-X0oI5eYYQVARhiNfbETy7BfLSmSilzN1eOuoRnrf9oUNsPRrWOAe9UqSizgw1vNxQBfOwL+n2610S3bYjVNi7w==",
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-table": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz",
+            "integrity": "sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-tagfilter": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz",
+            "integrity": "sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==",
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-task-list-item": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.4.tgz",
+            "integrity": "sha512-9XlIUUVnYXHsFF2HZ9jby4h3npfX10S1coXTnV035QGPgrtNYQq3J6IfIvcCIUAJrrqBVi5BqA/LmaOMJqPwMQ==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-math": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-2.1.0.tgz",
+            "integrity": "sha512-WH+fJkveMvM3ZN+deb/jT3UW623x8xO9ycfJNDC+UQXX+V72RO6hT9KqxA7c8XFwozAFJ7tufOeG+x/CVSXHUw==",
+            "dependencies": {
+                "@types/katex": "^0.16.0",
+                "katex": "^0.16.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/micromark-factory-destination": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz",
@@ -13396,6 +14010,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/mj-context-menu": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
+            "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
+        },
         "node_modules/mkdirp": {
             "version": "0.5.6",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -13831,6 +14450,32 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-entities": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+            "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+            "dependencies": {
+                "character-entities": "^1.0.0",
+                "character-entities-legacy": "^1.0.0",
+                "character-reference-invalid": "^1.0.0",
+                "is-alphanumerical": "^1.0.0",
+                "is-decimal": "^1.0.0",
+                "is-hexadecimal": "^1.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/parse-entities/node_modules/character-entities": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+            "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/parse-json": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -15294,6 +15939,14 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -15867,6 +16520,21 @@
                 }
             }
         },
+        "node_modules/react-syntax-highlighter": {
+            "version": "15.5.0",
+            "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+            "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+            "dependencies": {
+                "@babel/runtime": "^7.3.1",
+                "highlight.js": "^10.4.1",
+                "lowlight": "^1.17.0",
+                "prismjs": "^1.27.0",
+                "refractor": "^3.6.0"
+            },
+            "peerDependencies": {
+                "react": ">= 0.14.0"
+            }
+        },
         "node_modules/react-tabs": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
@@ -15965,6 +16633,83 @@
                 "node": ">=8"
             }
         },
+        "node_modules/refractor": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+            "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+            "dependencies": {
+                "hastscript": "^6.0.0",
+                "parse-entities": "^2.0.0",
+                "prismjs": "~1.27.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/comma-separated-tokens": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+            "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/hast-util-parse-selector": {
+            "version": "2.2.5",
+            "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+            "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/refractor/node_modules/hastscript": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+            "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "comma-separated-tokens": "^1.0.0",
+                "hast-util-parse-selector": "^2.0.0",
+                "property-information": "^5.0.0",
+                "space-separated-tokens": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/refractor/node_modules/prismjs": {
+            "version": "1.27.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+            "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/refractor/node_modules/property-information": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+            "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+            "dependencies": {
+                "xtend": "^4.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/space-separated-tokens": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+            "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/regenerate": {
             "version": "1.4.2",
             "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16061,6 +16806,246 @@
                 "jsesc": "bin/jsesc"
             }
         },
+        "node_modules/rehype-mathjax": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/rehype-mathjax/-/rehype-mathjax-4.0.2.tgz",
+            "integrity": "sha512-9q4Q4icTIbM5RtvQ4XquvEApGV2oDMaSVa5G3DwXomWU4fAPWYcOOt+iQRNaIH3RBMbFF239QbE5K7hm7rxMPQ==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/mathjax": "^0.0.37",
+                "@types/web": "^0.0.46",
+                "hast-util-from-dom": "^4.0.0",
+                "hast-util-to-text": "^3.1.0",
+                "jsdom": "^18.0.0",
+                "mathjax-full": "^3.0.0",
+                "unified": "^10.0.0",
+                "unist-util-visit": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/@tootallnate/once": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+            "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/cssom": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+            "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+        },
+        "node_modules/rehype-mathjax/node_modules/data-urls": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+            "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+            "dependencies": {
+                "abab": "^2.0.6",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^11.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/data-urls/node_modules/whatwg-url": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+            "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+            "dependencies": {
+                "tr46": "^3.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/domexception": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+            "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+            "dependencies": {
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dependencies": {
+                "whatwg-encoding": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/http-proxy-agent": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+            "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+            "dependencies": {
+                "@tootallnate/once": "2",
+                "agent-base": "6",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/jsdom": {
+            "version": "18.1.1",
+            "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-18.1.1.tgz",
+            "integrity": "sha512-NmJQbjQ/gpS/1at/ce3nCx89HbXL/f5OcenBe8wU1Eik0ROhyUc3LtmG3567dEHAGXkN8rmILW/qtCOPxPHQJw==",
+            "dependencies": {
+                "abab": "^2.0.5",
+                "acorn": "^8.5.0",
+                "acorn-globals": "^6.0.0",
+                "cssom": "^0.5.0",
+                "cssstyle": "^2.3.0",
+                "data-urls": "^3.0.1",
+                "decimal.js": "^10.3.1",
+                "domexception": "^4.0.0",
+                "escodegen": "^2.0.0",
+                "form-data": "^4.0.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy-agent": "^5.0.0",
+                "https-proxy-agent": "^5.0.0",
+                "is-potential-custom-element-name": "^1.0.1",
+                "nwsapi": "^2.2.0",
+                "parse5": "6.0.1",
+                "saxes": "^5.0.1",
+                "symbol-tree": "^3.2.4",
+                "tough-cookie": "^4.0.0",
+                "w3c-hr-time": "^1.0.2",
+                "w3c-xmlserializer": "^3.0.0",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^2.0.0",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^10.0.0",
+                "ws": "^8.2.3",
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "canvas": "^2.5.0"
+            },
+            "peerDependenciesMeta": {
+                "canvas": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/tr46": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+            "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+            "dependencies": {
+                "punycode": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/w3c-xmlserializer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
+            "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
+            "dependencies": {
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/webidl-conversions": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+            "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-mimetype": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+            "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-url": {
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz",
+            "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
+            "dependencies": {
+                "tr46": "^3.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/ws": {
+            "version": "8.13.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+            "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/xml-name-validator": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+            "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/relateurl": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -16069,6 +17054,36 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/remark-gfm": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
+            "integrity": "sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-gfm": "^2.0.0",
+                "micromark-extension-gfm": "^2.0.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-math": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-5.1.1.tgz",
+            "integrity": "sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-math": "^2.0.0",
+                "micromark-extension-math": "^2.0.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/remark-parse": {
             "version": "10.0.1",
             "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -16836,6 +17851,27 @@
                 "wbuf": "^1.7.3"
             }
         },
+        "node_modules/speech-rule-engine": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz",
+            "integrity": "sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==",
+            "dependencies": {
+                "commander": "9.2.0",
+                "wicked-good-xpath": "1.3.0",
+                "xmldom-sre": "0.1.31"
+            },
+            "bin": {
+                "sre": "bin/sre"
+            }
+        },
+        "node_modules/speech-rule-engine/node_modules/commander": {
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
+            "integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
+            "engines": {
+                "node": "^12.20.0 || >=14"
+            }
+        },
         "node_modules/sprintf-js": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -17732,6 +18768,19 @@
                 "node": ">=8"
             }
         },
+        "node_modules/unist-util-find-after": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+            "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "unist-util-is": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/unist-util-generated": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz",
@@ -18063,6 +19112,15 @@
                 "minimalistic-assert": "^1.0.0"
             }
         },
+        "node_modules/web-namespaces": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+            "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/web-vitals": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
@@ -18509,6 +19567,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/wicked-good-xpath": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
+            "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
+        },
         "node_modules/word-wrap": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -18903,6 +19966,14 @@
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
             "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
         },
+        "node_modules/xmldom-sre": {
+            "version": "0.1.31",
+            "resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz",
+            "integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==",
+            "engines": {
+                "node": ">=0.1"
+            }
+        },
         "node_modules/xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -18990,6 +20061,15 @@
                     "optional": true
                 }
             }
+        },
+        "node_modules/zwitch": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+            "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
         }
     }
 }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index ca41faff3..316eb97a1 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -8,6 +8,7 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@tabler/icons-react": "^2.17.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@testing-library/jest-dom": "^5.16.5",
@@ -32,8 +33,12 @@
         "react-markdown": "^8.0.7",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
+        "react-syntax-highlighter": "^15.5.0",
         "react-tabs": "^6.0.0",
         "reactflow": "^11.5.5",
+        "rehype-mathjax": "^4.0.2",
+        "remark-gfm": "^3.0.1",
+        "remark-math": "^5.1.1",
         "tailwindcss": "^3.2.6",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -62,5 +67,8 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://127.0.0.1:7860"
+    "proxy": "http://127.0.0.1:7860",
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9"
+    }
 }
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 95681f059..67c0d3279 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -12,4 +12,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
new file mode 100644
index 000000000..0c2c1ea73
--- /dev/null
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -0,0 +1,84 @@
+import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
+import { FC, memo, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { programmingLanguages } from '../../../../utils';
+
+interface Props {
+  language: string;
+  value: string;
+}
+
+export const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || '.file';
+    const suggestedFileName = `${"generated-code"}${fileExtension}`;
+    const fileName = window.prompt(
+      "enter file name",
+      suggestedFileName,
+    );
+
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
+
+    const blob = new Blob([value], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = fileName;
+    link.href = url;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <div className="codeblock relative font-sans text-[16px]">
+      <div className="flex items-center justify-between py-1.5 px-4">
+        <span className="text-xs lowercase text-white">{language}</span>
+
+        <div className="flex items-center">
+          <button
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            onClick={copyToClipboard}
+          >
+            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
+            {isCopied ? 'Copied!' : 'Copy code'}
+          </button>
+          <button
+            className="flex items-center rounded bg-none p-1 text-xs text-white"
+            onClick={downloadAsFile}
+          >
+            <IconDownload size={18} />
+          </button>
+        </div>
+      </div>
+
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{ margin: 0 }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = 'CodeBlock';
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 06b702571..41a9d2fc9 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,83 +1,133 @@
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { CodeBlock } from "./codeBlock";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
-  const [hidden, setHidden] = useState(true);
-  return (
-    <div
-      className={classNames(
-        "w-full py-2 pl-2 flex",
-        chat.isSend ? "bg-white dark:bg-gray-800 " : "bg-gray-200  dark:bg-gray-700"
-      )}
-    >
-      <div
-        className={classNames(
-          "rounded-full w-8 h-8 flex items-center my-3 justify-center",
-          chat.isSend ? "bg-gray-900" : "bg-gray-200"
-        )}
-      >
-        {!chat.isSend && <img className="scale-150" src={AiIcon} />}
-        {chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
-      </div>
-      {!chat.isSend ? (
-        <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
-            {hidden && chat.thought && chat.thought !== "" && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
-                className="absolute -top-1 -left-2 cursor-pointer"
-              >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
-              </div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md  h-full border border-gray-300
+	const [message, setMessage] = useState("");
+	useEffect(() => {
+		setMessage(chat.message);
+	}, [chat.message]);
+	const [hidden, setHidden] = useState(true);
+	return (
+		<div
+			className={classNames(
+				"w-full py-2 pl-2 flex",
+				chat.isSend
+					? "bg-white dark:bg-gray-800 "
+					: "bg-gray-200  dark:bg-gray-700"
+			)}
+		>
+			<div
+				className={classNames(
+					"rounded-full w-8 h-8 flex items-center my-3 justify-center",
+					chat.isSend ? "bg-gray-900" : "bg-gray-200"
+				)}
+			>
+				{!chat.isSend && <img className="scale-150" src={AiIcon} />}
+				{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
+			</div>
+			{!chat.isSend ? (
+				<div className="w-full text-start flex items-center">
+					<div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
+						{hidden && chat.thought && chat.thought !== "" && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className="absolute -top-1 -left-2 cursor-pointer"
+							>
+								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+							</div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className=" text-start inline-block rounded-md  h-full border border-gray-300
 								bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
-                dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
-                }}
-              ></div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full px-4 pb-3 pt-3 pr-8">
-              <span className="dark:text-white">
-              <ReactMarkdown>{chat.message}</ReactMarkdown>
-                {chat.files && (
-                  <div className="my-2 w-full">
-                    {chat.files.map((file, index) => {
-                      return (
-                        <div key={index} className="my-2 w-full">
-                          <FileCard
-                            fileName={"Generated File"}
-                            fileType={file.data_type}
-                            content={file.data}
-                          />
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </span>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-            <ReactMarkdown>{chat.message}</ReactMarkdown>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+								dangerouslySetInnerHTML={{
+									__html: convert.toHtml(chat.thought),
+								}}
+							></div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
+						<div className="w-full px-4 pb-3 pt-3 pr-8">
+							<div className="dark:text-white">
+								<div>
+									<ReactMarkdown
+										remarkPlugins={[remarkGfm, remarkMath]}
+										rehypePlugins={[rehypeMathjax]}
+										className="markdown prose"
+										components={{
+											code({ node, inline, className, children, ...props }) {
+												if (children.length) {
+												  if (children[0] == '▍') {
+													return <span className="animate-pulse cursor-default mt-1">▍</span>
+												  }
+							
+												  children[0] = (children[0] as string).replace("`▍`", "▍")
+												}
+							
+												const match = /language-(\w+)/.exec(className || '');
+							
+												return !inline ? (
+												  <CodeBlock
+													key={Math.random()}
+													language={(match && match[1]) || ''}
+													value={String(children).replace(/\n$/, '')}
+													{...props}
+												  />
+												) : (
+												  <code className={className} {...props}>
+													{children}
+												  </code>
+												);
+											  }
+										}}
+									>
+										{message}
+									</ReactMarkdown>
+								</div>
+								{chat.files && (
+									<div className="my-2 w-full">
+										{chat.files.map((file, index) => {
+											return (
+												<div key={index} className="my-2 w-full">
+													<FileCard
+														fileName={"Generated File"}
+														fileType={file.data_type}
+														content={file.data}
+													/>
+												</div>
+											);
+										})}
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+			) : (
+				<div className="w-full flex items-center">
+					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+						<ReactMarkdown
+							remarkPlugins={[remarkGfm, remarkMath]}
+							rehypePlugins={[rehypeMathjax]}
+							className="markdown prose"
+						>
+							{message}
+						</ReactMarkdown>
+					</div>
+				</div>
+			)}
+		</div>
+	);
 }
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index a7b492c95..05a7859eb 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -1,19 +1,20 @@
-import {  CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
-import * as base64js from 'base64-js';
+import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
+import * as base64js from "base64-js";
+import Tooltip from "../../../components/TooltipComponent";
 
 export default function FileCard({ fileName, content, fileType }) {
-    const handleDownload = () => {
-        const byteArray = new Uint8Array(base64js.toByteArray(content));
-        const blob = new Blob([byteArray], { type: 'application/octet-stream' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = fileName+".png";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      };
+	const handleDownload = () => {
+		const byteArray = new Uint8Array(base64js.toByteArray(content));
+		const blob = new Blob([byteArray], { type: "application/octet-stream" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = fileName + ".png";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
 
 	return (
 		<button
@@ -22,12 +23,19 @@ export default function FileCard({ fileName, content, fileType }) {
 		>
 			<div className="flex gap-2 text-current items-center w-full mr-2">
 				{" "}
-				<DocumentIcon className="w-8 h-8" />
+				{fileType === "image" ? (
+					<img
+						src={`data:image/png;base64,${content}`}
+						alt=""
+						className="w-8 h-8"
+					/>
+				) : (
+					<DocumentIcon className="w-8 h-8" />
+				)}
 				<div className="flex flex-col items-start">
 					{" "}
 					<div className="truncate text-sm text-current">{fileName}</div>
-                    <div className="truncate text-xs  text-gray-500">{fileType}</div>
-
+					<div className="truncate text-xs  text-gray-500">{fileType}</div>
 				</div>
 				<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
 			</div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 9ea3f0fb2..a2ae56548 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -60,18 +60,20 @@ export default function ChatModal({
     str,
     thought,
     end = false,
+    files,
   }: {
     str?: string;
     thought?: string;
     // end param default is false
     end?: boolean;
+    files?: Array<any>;
   }) {
     setChatHistory((old) => {
       let newChat = [...old];
       if (str) {
-        if (end && !newChat[newChat.length - 1].message) {
+        if (end) {
           newChat[newChat.length - 1].message = str;
-        } else if (!end) {
+        } else {
           newChat[newChat.length - 1].message =
             newChat[newChat.length - 1].message + str;
         }
@@ -79,12 +81,16 @@ export default function ChatModal({
       if (thought) {
         newChat[newChat.length - 1].thought = thought;
       }
+      if (files) {
+        newChat[newChat.length - 1].files = files;
+      }
       return newChat;
     });
   }
 
   function handleOnClose(event: CloseEvent) {
     if (isOpen.current) {
+      console.log(event);
       setLockChat(false);
       setTimeout(() => {
         connectWS();
@@ -139,12 +145,16 @@ export default function ChatModal({
           end: true,
         });
       }
+      if (data.files) {
+        updateLastMessage({
+          end: true,
+          files: data.files,
+        });
+      }
+
       setLockChat(false);
       isStream = false;
     }
-    if (data.type === "file") {
-      console.log(data);
-    }
     if (data.type === "stream" && isStream) {
       updateLastMessage({ str: data.message });
     }
@@ -346,7 +356,7 @@ export default function ChatModal({
                 <div className="relative w-full">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-2 hover:text-red-500"
+                    className="absolute top-2 right-2 hover:text-red-500 z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 4ac16ce07..c1d5b69a0 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -454,3 +454,35 @@ export function updateTemplate(
 	}
 	return clonedObject;
 }
+
+interface languageMap {
+	[key: string]: string | undefined;
+  }
+  
+  export const programmingLanguages: languageMap = {
+	javascript: '.js',
+	python: '.py',
+	java: '.java',
+	c: '.c',
+	cpp: '.cpp',
+	'c++': '.cpp',
+	'c#': '.cs',
+	ruby: '.rb',
+	php: '.php',
+	swift: '.swift',
+	'objective-c': '.m',
+	kotlin: '.kt',
+	typescript: '.ts',
+	go: '.go',
+	perl: '.pl',
+	rust: '.rs',
+	scala: '.scala',
+	haskell: '.hs',
+	lua: '.lua',
+	shell: '.sh',
+	sql: '.sql',
+	html: '.html',
+	css: '.css',
+	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+  };
+  
\ No newline at end of file
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index c679a87bc..84571cb5f 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -73,6 +73,6 @@ module.exports = {
         }
       }
     })
-    }),require('@tailwindcss/line-clamp')
+    }),require('@tailwindcss/line-clamp'),require('@tailwindcss/typography'),
   ],
 };