Improve code block & max-widht for documentation

public/build/manifest.json

@@ -16,17 +16,17 @@
     "src": "public/img/ui/blockquote/warning.svg"
   },
   "resources/css/app.scss": {
-    "file": "assets/app-DKgGcTI_.css",
+    "file": "assets/app-Dq9x9Vhz.css",
     "src": "resources/css/app.scss",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-Cw1dfBf1.js",
+    "file": "assets/app-DIW8daw-.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app-Ccfm11b9.css"
+      "assets/app-mELSyIb6.css"
     ]
   }
 }

resources/css/docs.scss

@@ -396,7 +396,7 @@ main,
 }
 
 .container-docs {
-    max-width: 1680px;
+    max-width: 1720px;
     margin: 0 auto;
 }
 

resources/css/highlight.scss

@@ -21,46 +21,67 @@ pre {
         -webkit-overflow-scrolling: touch;
         max-width: 100%;
 
-        .hl-attribute,
+        .hl-attribute {
+            color: #FFCB6B;
+        }
+
         .hl-template,
         .hl-value {
             color: #4bef96;
         }
 
-        .hl-constant,
-        .hl-property,
         .hl-number {
-            color: #b288ff;
+            color: #F78C6C;
         }
 
+        .hl-constant,
+        .hl-property,
         .hl-function {
-            color: #f98f8c;
+            color: #82AAFF;
         }
 
-        .hl-slug,
-        .hl-operator,
-        .hl-tag2,
         .hl-keyword,
-        .hl-property2,
+        .hl-operator,
         .hl-variable,
-        .hl-value2 {
-            color: #82d4f7;
+        .hl-property2 {
+            color: #C792EA;
         }
 
         .hl-tag,
         .hl-type,
         .hl-literal {
-            color: #ffd06b;
+            color: #FFCB8B;
+        }
+
+        .hl-comment {
+            color: #6c757d;
+            font-style: italic;
+        }
+
+        .hl-delimeter {
+            color: #d2cdea;
         }
 
-        .hl-delimeter,
         .hl-deletion {
             color: #d2cdea;
+            min-width: 100%;
+            background-color: #ff000033;
         }
 
-        .hl-generic,
-        .hl-comment {
-            color: #8781a2;
+        .hl-addition {
+            min-width: 100%;
+            background-color: #2a4b3c;
+            color: #4bef96;
+        }
+
+        .hl-comment span {
+            opacity: 0.7;
+        }
+
+        .hl-tag2,
+        .hl-value2,
+        .hl-slug {
+            color: #f98f8c;
         }
 
         .hl-blur {
@@ -75,17 +96,6 @@ pre {
             font-style: italic;
         }
 
-        .hl-deletion {
-            min-width: 100%;
-            background-color: #ff000033;
-        }
-
-        .hl-addition {
-            min-width: 100%;
-            background-color: #2a4b3c;
-            color: #4bef96;
-        }
-
         .hl-gutter {
             display: inline-block;
             font-size: 0.9em;