diff --git a/documentation/.eleventy.js b/documentation/.eleventy.js
index 381626e..fb91207 100644
--- a/documentation/.eleventy.js
+++ b/documentation/.eleventy.js
@@ -9,12 +9,15 @@ const pluginTOC = require('eleventy-plugin-nesting-toc');
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const Image = require("@11ty/eleventy-img");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+
 
 module.exports = function(eleventyConfig) {
   // eleventyConfig.addPlugin(pluginTOC);
   eleventyConfig.addPlugin(svgContents); 
   eleventyConfig.addPlugin(embedEverything);
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+  eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addShortcode("version", function () {
     return String(Date.now());
   });
diff --git a/documentation/_includes/components/head.njk b/documentation/_includes/components/head.njk
index 5246f33..a1e8463 100644
--- a/documentation/_includes/components/head.njk
+++ b/documentation/_includes/components/head.njk
@@ -21,8 +21,6 @@
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js" defer></script>
   {% endif %}
 
-  {% if site.navigationStyle == 'horizontal' %}
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
-  {% endif %}
+  <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-tomorrow.css" rel="stylesheet" />
 
 </head>
diff --git a/documentation/_tmp/style.css b/documentation/_tmp/style.css
index 69b98cb..3c7b3ba 100644
--- a/documentation/_tmp/style.css
+++ b/documentation/_tmp/style.css
@@ -1366,15 +1366,9 @@ select {
 .h-16 {
   height: 4rem !important;
 }
-.h-6 {
-  height: 1.5rem !important;
-}
 .h-screen {
   height: 100vh !important;
 }
-.w-6 {
-  width: 1.5rem !important;
-}
 .w-60 {
   width: 15rem !important;
 }
@@ -1387,6 +1381,10 @@ select {
 .w-full {
   width: 100% !important;
 }
+.w-max {
+  width: -moz-max-content !important;
+  width: max-content !important;
+}
 .max-w-5xl {
   max-width: 64rem !important;
 }
@@ -1451,6 +1449,9 @@ select {
 .rounded {
   border-radius: 0.25rem !important;
 }
+.rounded-lg {
+  border-radius: 0.5rem !important;
+}
 .border {
   border-width: 1px !important;
 }
@@ -1486,6 +1487,9 @@ select {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .bg-white {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
@@ -1510,6 +1514,10 @@ select {
   padding-left: 0.5rem !important;
   padding-right: 0.5rem !important;
 }
+.px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
 .px-6 {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
@@ -1518,6 +1526,10 @@ select {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
+.py-3 {
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
 .pb-1 {
   padding-bottom: 0.25rem !important;
 }
@@ -1527,9 +1539,6 @@ select {
 .pr-0 {
   padding-right: 0px !important;
 }
-.pr-4 {
-  padding-right: 1rem !important;
-}
 .pt-0 {
   padding-top: 0px !important;
 }
@@ -2335,10 +2344,6 @@ select {
     margin-bottom: 0;
   }
 }
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
-}
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1 !important;
   color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
@@ -2347,10 +2352,27 @@ select {
   --tw-text-opacity: 1 !important;
   color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
 }
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1 !important;
+  color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+}
 .hover\:text-yellow-400:hover {
   --tw-text-opacity: 1 !important;
   color: rgb(250 204 21 / var(--tw-text-opacity)) !important;
 }
+.focus\:text-gray-900:focus {
+  --tw-text-opacity: 1 !important;
+  color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+}
+.focus\:outline-none:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+}
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
 .focus\:ring-4:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
@@ -2384,6 +2406,9 @@ select {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important;
 }
+.dark\:bg-transparent:is(.dark *) {
+  background-color: transparent !important;
+}
 .dark\:text-gray-400:is(.dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(156 163 175 / var(--tw-text-opacity)) !important;
@@ -2400,6 +2425,18 @@ select {
   --tw-text-opacity: 1 !important;
   color: rgb(250 204 21 / var(--tw-text-opacity)) !important;
 }
+.dark\:hover\:text-gray-500:hover:is(.dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+.dark\:focus\:bg-gray-600:focus:is(.dark *) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
+}
+.dark\:focus\:text-white:focus:is(.dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
 .dark\:focus\:ring-gray-700:focus:is(.dark *) {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity)) !important;
@@ -2417,6 +2454,10 @@ select {
     right: 0px !important;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px !important;
+  }
+
   .md\:block {
     display: block !important;
   }
diff --git a/documentation/package-lock.json b/documentation/package-lock.json
index 98a1885..462a7b9 100644
--- a/documentation/package-lock.json
+++ b/documentation/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@11ty/eleventy-img": "^4.0.2",
         "@11ty/eleventy-navigation": "^0.1.6",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.12",
         "autoprefixer": "^10.4.19",
@@ -205,6 +206,18 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dependencies": {
+        "prismjs": "^1.29.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
@@ -5504,6 +5517,14 @@
         "node": ">= 0.8"
       }
     },
+    "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/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
diff --git a/documentation/package.json b/documentation/package.json
index d4111ff..ea22ec6 100644
--- a/documentation/package.json
+++ b/documentation/package.json
@@ -40,6 +40,7 @@
   "dependencies": {
     "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-navigation": "^0.1.6",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",
     "autoprefixer": "^10.4.19",