Refacrtor

Author: big-and-red

Diff for: package-lock.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
+    "@types/prismjs": "^1.26.5",
     "framer-motion": "^10.16.4",
     "lucide-react": "^0.292.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

Diff for: package.json

@@ -40,3 +40,65 @@
 .read-the-docs {
   color: #888;
 }
+
+// Добавьте эти стили в ваш CSS файл или в компонент через styled-components
+const styles = `
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    background: #2d2d2d;
+    color: #ccc;
+    border-radius: 0.5rem;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #999;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: #dd4a68;
+  }
+
+  .token.keyword {
+    color: #66d9ef;
+  }
+
+  .token.string {
+    color: #7ec699;
+  }
+
+  .token.number {
+    color: #f08d49;
+  }
+
+  .token.operator {
+    color: #66d9ef;
+  }
+
+  .token.boolean {
+    color: #ae81ff;
+  }
+
+  .token.constant {
+    color: #ae81ff;
+  }
+`;