Commit ccd8a75

@@ -0,0 +1,18 @@
+#import "@preview/bullseye:0.1.0": show-target
+#import "@preview/hypraw:0.1.0": hypraw
+#import "@preview/zebraw:0.6.1": zebraw
+
+#let raw-template-html(body) = {
+  show: show-target(html: hypraw.with(dedup-styles: false, line-numbers: true, copy-button: false))
+  body
+}
+
+#let raw-template-paged(body) = {
+  show: zebraw.with(lang: false)
+  body
+}
+
+#let raw-template(body) = {
+  show: show-target(paged: raw-template-paged, html: raw-template-html)
+  body
+}

@@ -3,6 +3,7 @@
 #import mathyml: to-mathml
 #import mathyml.prelude: *
 
+#import "./templates/raw.typ": raw-template
 #import "./templates/heading.typ": heading-template
 #import "./templates/footnote.typ": footnote-template
 
@@ -11,6 +12,7 @@
 
   show: heading-template
   show: footnote-template
+  show: raw-template
 
   body
 }

@@ -15,6 +15,10 @@ article,
   @import "./paragrah.css";
 }
 article,
+.article-raw {
+  @import "./raw.css";
+}
+article,
 .article-sidenote {
   @import "./sidenote.css";
 }

@@ -0,0 +1,59 @@
+code.hypraw {
+  @apply px-[0.3em] py-0 rounded;
+  @apply bg-neutral-200 dark:bg-neutral-800; /* TODO: Replace with theme color */
+}
+
+div.hypraw {
+  @apply relative rounded text-sm lg:text-base;
+  @apply bg-neutral-200 dark:bg-neutral-800; /* TODO: Replace with theme color */
+
+  pre {
+    @apply m-0 overflow-x-auto;
+
+    & > code {
+      @apply block p-2;
+
+      &::before {
+        @apply absolute top-2 right-2 z-1;
+        @apply px-1 rounded border opacity-100 text-xs lg:text-sm;
+        @apply bg-neutral-300 dark:bg-neutral-700 border-neutral-500;
+        @apply text-neutral-600 dark:text-neutral-400;
+        content: attr(data-lang);
+        transition: opacity 0.2s;
+      }
+      &:hover::before {
+        @apply opacity-0;
+      }
+    }
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track {
+      @apply bg-inherit rounded-b;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply bg-neutral-400 dark:bg-neutral-600;
+      @apply border-4 border-transparent rounded-xl bg-clip-content;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-neutral-500;
+    }
+  }
+
+  &.has-line-numbers .ec-line {
+    @apply relative grid grid-cols-[auto_1fr];
+
+    .code {
+      @apply relative pl-2;
+    }
+  }
+
+  .gutter {
+    @apply border-r;
+    @apply select-none;
+    @apply text-neutral-600 dark:text-neutral-400; /* TODO: Replace with theme color */
+
+    .ln {
+      @apply inline-flex justify-end items-start min-w-[2em] pr-2;
+    }
+  }
+}