blog-fuwari/src/styles/markdown.css

.btn-regular-dark {
    @apply bg-gray-800 text-white;
}

.btn-regular-bg {
    @apply bg-gray-100 dark:bg-gray-800;
}

.btn-plain-bg-hover {
    @apply bg-gray-50 dark:bg-gray-700;
}

.btn-plain-bg-active {
    @apply bg-gray-200 dark:bg-gray-600;
}

.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 !important;

            .anchor-icon {
                @apply mx-[0.45ch] !important;
            }
        }

        &:hover {
            .anchor {
                @apply opacity-100 !important;
            }
        }
    }

    a:not(.no-styling) {
        @apply relative bg-none transition rounded-md p-1 -m-1 font-medium text-[var(--primary)] before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0 before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10 underline decoration-[var(--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-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;

        font-family: 'Cascadia Mono', 'JetBrainsMono-VF', SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

        &:before {
            content: none;
        }

        &:after {
            content: none;
        }

        counter-reset: line;

        span.line {
            &:before {
                @apply 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;
            }
        }
    }

    .copy-btn {
        all: initial;
        @apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
    }

    .frame: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-4 h-4 fill-white pointer-events-none;
    }

    .copy-btn .copy-icon {
        @apply opacity-100 fill-white dark:fill-white/75;
    }

    .copy-btn.success .copy-icon {
        @apply opacity-0 fill-[var(--deep-text)]
    }

    .copy-btn .success-icon {
        @apply opacity-0 fill-white;
    }

    .copy-btn.success .success-icon {
        @apply opacity-100
    }

    .expressive-code {
        @apply my-4;

        ::selection {
            @apply bg-[var(--codeblock-selection)];
        }
    }

    ul,
    ol {
        li::marker {
            @apply text-[var(--primary)];
        }
    }

    blockquote {
        @apply not-italic border-transparent relative;
        font-weight: inherit;

        &:before {
            @apply content-[''] absolute -left-1 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full;
        }

        /* Remove the double quotes from default styles */
        p:before,
        p:after {
            @apply content-none;
        }

    }
}