Style code blocks

app/assets/index.css

@@ -54,3 +54,29 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     height: 14px;
 }
 
+.prose pre code::before {
+    padding-left: unset
+}
+
+.prose pre code:after {
+    padding-right: unset
+}
+
+.prose code {
+    font-weight: 400;
+    border-radius: 0.25rem;
+}
+
+.prose code:before {
+    content: "";
+    padding: 0 0 0 0.25rem;
+}
+
+.prose pre {
+    padding: 0;
+}
+
+.prose code:after {
+    content: "";
+    padding: 0 0.25rem 0 0;
+}

app/templates/layouts/app.html.slim

@@ -31,6 +31,9 @@ html
     script src="https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"
     script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer="true"
 
+    link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/github-dark.min.css"
+    script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js" defer="true"
+
     - if Hanami.app.settings.micropub_pub_key
       link rel="pgpkey" href="/key"
   body class="bg-white dark:bg-black selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-blue-600 dark:selection:text-blue-100" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"

app/templates/pages/show.html.slim

@@ -1,4 +1,5 @@
 - context.content_for(:title, "")
+- context.content_for(:highlight_code, false)
 
 article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-em:font-bold prose-em:not-italic prose-em:bg-blue-600 prose-em:px-1 prose-a:text-blue-600 prose-a:p-0.5 prose-a:rounded-sm prose-a:no-underline hover:prose-a:underline prose-em:text-blue-100"
   == page_content

config/app.rb

@@ -10,9 +10,11 @@ module Adamantium
     config.actions.content_security_policy[:media_src] += " https://dnitza.com"
     config.actions.content_security_policy[:script_src] += " https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js "
     config.actions.content_security_policy[:script_src] += " https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js"
+    config.actions.content_security_policy[:script_src] += " https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js"
     config.actions.content_security_policy[:connect_src] += " https://stats.dnitza.com/api/event https://*.mapbox.com"
     config.actions.content_security_policy[:frame_src] += " https://embed.music.apple.com https://www.youtube.com https://player.vimeo.com"
     config.actions.content_security_policy[:style_src] += " https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
+    config.actions.content_security_policy[:style_src] += " https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/github-dark.min.css"
     config.actions.content_security_policy[:child_src] = " blob:"
 
     config.logger.level = :debug

public/assets/index.js

@@ -5,6 +5,10 @@
         })
     })
     document.addEventListener("DOMContentLoaded", function () {
+        if (window.hljs !== undefined) {
+            window.hljs.highlightAll();
+        }
+
         const times = document.querySelectorAll('time');
         times.forEach((time) => {
             const oldDtime = Date.parse(time.dateTime);

tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
       boxShadow: {
         'solid': `10px 10px 1px 2px`
       },
-      typograpgy: {
+      typography: {
         emphasis: {
           css: {
             em: {