with syntax highlighting

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());
   });

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/[email protected]/dist/alpine.min.js" defer></script>
-  {% endif %}
+  <link href="https://unpkg.com/[email protected]/themes/prism-tomorrow.css" rel="stylesheet" />
 
 </head>

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;
   }

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",