Initial commit

src/styles/markdown.css

@@ -0,0 +1,168 @@
+@reference "tailwindcss";
+
+.custom-md {
+    h1 {
+        @apply text-3xl;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        .anchor {
+            @apply transition! -m-0.5! ml-[0.2ch]! p-0.5! select-none! opacity-0! no-underline!;
+
+            .anchor-icon {
+                @apply mx-[0.45ch]!;
+            }
+        }
+
+        &:hover {
+            .anchor {
+                @apply opacity-100!;
+            }
+        }
+    }
+
+    a:not(.no-styling) {
+        @apply relative bg-none font-medium text-(--primary)
+        underline decoration-(--link-underline) decoration-1 decoration-dashed underline-offset-4;
+        box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
+        &:hover, &:active {
+            @apply decoration-transparent;
+            background: var(--btn-plain-bg-hover);
+            border-bottom: 1px dashed var(--link-hover);
+            text-decoration: none;
+        }
+    }
+
+    code {
+        @apply bg-(--inline-code-bg) text-(--inline-code-color) px-1 py-0.5 rounded-md overflow-hidden;
+
+        font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+        &:before {
+            content:none;
+        }
+        &:after {
+            content:none;
+        }
+
+        counter-reset: line;
+        span.line {
+            &:before {
+                @apply text-black/25 dark:text-white/25 mr-4 w-4 inline-block;
+                content: counter(line);
+                counter-increment: line;
+                direction: rtl;
+            }
+            &:last-child:empty, &:last-child:has(> span:empty:only-child) {
+                display: none;
+            }
+        }
+    }
+
+
+    .collapse-btn {
+        all: initial;
+        @apply opacity-0 absolute active:scale-90 h-6 w-6 top-2 right-10 text-xs rounded transition-all ease-in-out z-20 cursor-pointer bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) text-(--btn-content);
+    }
+    .expressive-code:hover .collapse-btn {
+        opacity: 1;
+    }
+    .collapse-btn-icon {
+        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-3 h-3 fill-current pointer-events-none;
+    }
+    .expressive-code.collapsed .collapse-icon {
+        @apply -rotate-90;
+    }
+    .expressive-code.collapsed pre {
+        @apply max-h-[5.5rem] overflow-hidden;
+    }
+    .expressive-code.collapsed .frame {
+        @apply relative;
+    }
+    .expressive-code.collapsed .frame::before {
+        content: "";
+        @apply absolute bottom-0 left-0 right-0 h-12 bg-linear-to-t from-(--codeblock-bg) to-transparent pointer-events-none z-10;
+    }
+
+    .copy-btn {
+        all: initial;
+        @apply opacity-0 absolute active:scale-90 h-6 w-6 top-2 right-2 text-xs rounded transition-all ease-in-out z-20 cursor-pointer bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) text-(--btn-content);
+    }
+    .expressive-code:hover .copy-btn {
+        opacity: 1;
+    }
+    .copy-btn-icon {
+        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-3 h-3 fill-current pointer-events-none;
+    }
+    .copy-btn .copy-icon {
+        @apply opacity-100;
+    }
+    .copy-btn.success .copy-icon {
+        @apply opacity-0;
+    }
+    .copy-btn .success-icon {
+        @apply opacity-0;
+    }
+    .copy-btn.success .success-icon {
+        @apply opacity-100;
+    }
+
+    .expressive-code {
+        @apply my-4;
+        ::selection {
+            @apply bg-(--codeblock-selection);
+        }
+    }
+
+
+    ul, ol {
+        li::marker {
+            @apply text-(--primary);
+        }
+    }
+
+    blockquote {
+        @apply not-italic border-transparent relative;
+        font-weight: inherit;
+
+        &:before {
+            @apply content-[''] absolute -left-1 block transition bg-(--btn-regular-bg) h-full w-1 rounded-full;
+        }
+
+        /* Remove the double quotes from default styles */
+        p:before, p:after {
+            @apply content-none;
+        }
+
+    }
+
+    .katex-display {
+        @apply my-4;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0,0,0,0.3) transparent;
+
+        &::-webkit-scrollbar {
+            height: 6px;
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+            border-radius: 3px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+    }
+
+}
+
+/* 修复代码块内列表项标记颜色问题 */
+.custom-md .expressive-code ul li::marker,
+.custom-md .expressive-code ol li::marker {
+    @apply text-inherit;
+}