🔀 Merge pull request #383 from jpanther:issue-374

🐛 Fix code highlight issue

assets/css/compiled/main.css

@@ -1173,64 +1173,37 @@ body:has(#menu-controller:checked) {
 
 /* Background */
 
-.prose .chroma {
+.chroma {
-  position: static;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }
 
-.dark .prose .chroma {
+.dark .chroma {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-/* LineTableTD */
+.chroma pre {
-
-.chroma .lntd,
-.chroma .lntd pre {
   margin: 0px;
-  overflow: hidden;
-  border-style: none;
   padding: 0px;
-  vertical-align: top;
 }
 
 /* LineTable */
 
 .chroma .lntable {
+  margin: 0px;
   display: block;
   width: auto;
-  overflow-x: auto;
+  overflow: auto;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-spacing: 0;
-}
-
-/* LineTable Line */
-
-.chroma .lntable .line {
-  padding-right: 1rem;
-}
-
-/* LineHighlight */
-
-.chroma .hl {
-  display: block;
-  width: auto;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
-}
-
-.dark .chroma .hl {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }
 
 /* LineNumbersTable */
@@ -1239,11 +1212,9 @@ body:has(#menu-controller:checked) {
 
 .chroma .lnt,
 .chroma .ln {
-  margin-right: 0.4em;
+  margin-right: 0.5rem;
-  padding-left: 0.4em;
+  padding-left: 0.5rem;
-  padding-right: 0.4em;
+  padding-right: 0.5rem;
-  padding-top: 0px;
-  padding-bottom: 0px;
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
 }
@@ -1254,6 +1225,29 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }
 
+.chroma .lntd {
+  padding: 0px;
+  vertical-align: top;
+}
+
+.chroma .lntd:last-of-type {
+  width: 100%;
+}
+
+/* LineHighlight */
+
+.chroma .hl {
+  display: block;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
+}
+
+.dark .chroma .hl {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
+}
+
 /* Keyword */
 
 /* KeywordDeclaration */

assets/css/main.css

@@ -98,32 +98,31 @@ body:has(#menu-controller:checked) {
 
 /* -- Chroma Highlight -- */
 /* Background */
-.prose .chroma {
+.chroma {
-  @apply static rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
-/* LineTableTD */
+.chroma pre {
-.chroma .lntd,
+  @apply p-0 m-0;
-.chroma .lntd pre {
-  @apply p-0 m-0 overflow-hidden align-top border-none;
 }
 /* LineTable */
 .chroma .lntable {
-  @apply block w-auto py-3 overflow-x-auto text-base;
+  @apply block w-auto m-0 overflow-auto text-base;
-  border-spacing: 0;
-}
-/* LineTable Line */
-.chroma .lntable .line {
-  @apply pr-4;
-}
-/* LineHighlight */
-.chroma .hl {
-  @apply block w-auto bg-primary-100 dark:bg-primary-900;
 }
 /* LineNumbersTable */
 /* LineNumbers */
 .chroma .lnt,
 .chroma .ln {
-  @apply mr-[0.4em] px-[0.4em] py-0 text-neutral-600 dark:text-neutral-300;
+  @apply px-2 mr-2 text-neutral-600 dark:text-neutral-300;
+}
+.chroma .lntd {
+  @apply p-0 align-top;
+}
+.chroma .lntd:last-of-type {
+  @apply w-full;
+}
+/* LineHighlight */
+.chroma .hl {
+  @apply block w-full bg-primary-100 dark:bg-primary-900;
 }
 /* Keyword */
 /* KeywordDeclaration */