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