Merge pull request #18545 from dvdksn/code-blocks-lineno

style: numbered lines for code blocks

assets/css/code.css

@@ -1,30 +1,28 @@
-.prose {
-  pre {
-    @apply rounded-sm border border-gray-light-200 p-3 dark:border-gray-dark-400;
-  }
-  :not(pre) > code {
-    display: inline-block;
-    margin: 0 !important;
-    white-space: nowrap;
-    font-weight: 400;
-    padding: 0 4px;
-    border: 1px solid;
-    border-radius: theme("spacing.1");
-    background: theme("colors.gray.light.200");
-    border-color: theme("colors.gray.light.300");
-    .dark & {
-      background: theme("colors.gray.dark.200");
-      border-color: theme("colors.gray.dark.300");
-    }
-  }
-  code::before {
-    content: "";
-  }
-  code::after {
-    content: "";
+.highlight, :not(pre) > code {
+  font-size: .875em;
+  border: 1px solid;
+  border-radius: theme("spacing.1");
+  border-color: theme("colors.gray.light.300");
+  .dark & {
+    background: theme("colors.gray.dark.200");
+    border-color: theme("colors.gray.dark.300");
   }
 }
 
+.highlight {
+  @apply p-3 my-4 overflow-x-auto;
+  background: theme("colors.white");
+}
+
+:not(pre) > code {
+  background: theme("colors.gray.light.200");
+  display: inline-block;
+  margin: 0;
+  white-space: nowrap;
+  font-weight: 400;
+  padding: 0 4px;
+}
+
 .chroma {
   /* LineTableTD */
   .lntd {
@@ -380,6 +378,7 @@
     }
     /* GenericPrompt */
     .gp {
+      user-select: none;
       color: #8f5902;
     }
     /* GenericStrong */

assets/css/tables.css

@@ -1,5 +1,5 @@
 .prose table {
-  @apply block overflow-x-auto;
+  @apply block overflow-x-auto text-base;
   thead tr {
     @apply bg-gray-light-300 dark:bg-gray-dark-300
   }
@@ -7,6 +7,6 @@
     @apply bg-gray-light-200 dark:bg-gray-dark-200
   }
   th, td {
-    @apply p-2 !important;
+    @apply p-2;
   }
 }

assets/css/typography.css

@@ -1,6 +1,9 @@
 .prose {
   li {
     @apply mt-1 mb-1;
+    & > :first-child, & > :last-child {
+      @apply m-0;
+    }
   }
   a {
     font-weight: 400;

assets/js/src/vars.js

@@ -0,0 +1,10 @@
+const codeblocks = document.querySelectorAll(".highlight")
+
+for (const codeblock of codeblocks) {
+  codeblock.innerHTML = codeblock.innerHTML
+    .replaceAll(
+      /<([A-Z_]+)>/g,
+      `<var class="text-violet-light dark:text-violet-dark"
+        >$1</var>`
+    )
+}

layouts/_default/_markup/render-codeblock.html

@@ -1,22 +1,13 @@
-{{ $innerHTML := highlight .Inner .Type
-| replaceRE
-  `<([A-Z_]+)?>`
-  `<var
-    class="text-violet-light dark:text-violet-dark font-bold"
-    >$1</var>`
-}}
-
-<div x-data class="group relative">
+<div class="group relative">
   <button
+    x-data="{ code: '{{encoding.Base64Encode .Inner}}' }"
     class="material-symbols-rounded hidden group-hover:block absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
     title="Copy"
-    @click="window.navigator.clipboard.writeText($refs.code.textContent.replaceAll(/^\$\s*/gm, ''));
+    @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^\$\s*/gm, ''));
     $el.textContent='check_circle';
     setTimeout(() => $el.textContent='content_copy', 2000);"
   >
     content_copy
   </button>
-  <div x-ref="code">
-  {{- safeHTML $innerHTML  -}}
-  </div>
+  {{- highlight .Inner .Type .Options -}}
 </div>

tailwind.config.js

@@ -7,6 +7,12 @@ module.exports = {
       typography: (theme) => ({
         DEFAULT: {
           css: {
+            pre: false,
+            code: false,
+            'pre code': false,
+            'code::before': false,
+            'code::after': false,
+            table: false,
             // light colors for prose
             "--tw-prose-body": theme("colors.black"),
             "--tw-prose-headings": theme("colors.black"),
@@ -19,9 +25,6 @@ module.exports = {
             "--tw-prose-quotes": theme("colors.black"),
             "--tw-prose-quote-borders": theme("colors.blue.light.500"),
             "--tw-prose-captions": theme("colors.gray.light.600"),
-            "--tw-prose-code": theme("colors.black"),
-            "--tw-prose-pre-code": theme("colors.gray.light.800"),
-            "--tw-prose-pre-bg": theme("colors.white"),
             "--tw-prose-th-borders": theme("colors.gray.light.200"),
             "--tw-prose-td-borders": theme("colors.gray.light.200"),
 
@@ -37,9 +40,6 @@ module.exports = {
             "--tw-prose-invert-quotes": theme("colors.white"),
             "--tw-prose-invert-quote-borders": theme("colors.blue.dark.500"),
             "--tw-prose-invert-captions": theme("colors.gray.dark.600"),
-            "--tw-prose-invert-code": theme("colors.white"),
-            "--tw-prose-invert-pre-code": theme("colors.background.light"),
-            "--tw-prose-invert-pre-bg": theme("colors.gray.dark.200"),
             "--tw-prose-invert-th-borders": theme("colors.gray.dark.200"),
             "--tw-prose-invert-td-borders": theme("colors.gray.dark.200"),
           },