documentation/.vuepress/theme/styles/code.css

.content {
    code {
        @apply .m-0 .text-sm .bg-grey-lighter .rounded .border;
        padding: .15rem .4rem;
    }

    pre, pre[class*="language-"] {
        @apply .leading-normal .overflow-auto .my-4 .mx-0;

        code {
            @apply .text-white .p-0 .bg-transparent .border-0;
        }

        &::-webkit-scrollbar {
            @apply .bg-transparent .h-2;
        }
        &::-webkit-scrollbar-thumb {
            @apply .bg-grey-darker .rounded;

            &:hover {
                @apply .bg-grey-dark;
            }
        }
    }
}

div[class*="language-"] {
    @apply .relative .bg-grey-darkest .rounded .border .border-black .text-sm .my-4;

    .highlight-lines {
        @apply .absolute .pin-t .pin-l .w-full .leading-normal .select-none;
        margin-top: .9rem;

        .highlighted {
            @apply .bg-grey-darker;
        }
    }

    pre, pre[class*="language-"] {
        @apply .bg-transparent .relative .m-0;
        z-index: 1;
    }

    &::before {
        @apply .absolute .text-xs .text-grey;
        top: 1em;
        right: 1em;
    }

    &:not(.line-numbers-mode) {
        .line-numbers-wrapper {
            @apply .hidden;
        }
    }
    &.line-numbers-mode {
        .highlight-lines .highlighted {
            @apply .relative;

            &:before {
                @apply .absolute .pin-l .pin-t .block .h-full .w-4;
                content: ' ';
            }
        }

        pre {
            @apply .align-middle .w-4;
        }

        .line-numbers-wrapper {
            @apply .absolute .pin-t .text-center .w-4;

            br {
                @apply .select-none;
            }

            .line-number {
                @apply .relative .select-none;
            }
        }
        &::after {
            @apply .absolute .pin-t .pin-l .h-full .w-4;
            content: '';
        }
    }
}

/* language hints */

@each $lang in js,ts,html,md,vue,css,sass,scss,less,stylus,go,java,c,sh,yaml,conf {
    div[class~="language-#{$lang}"]:before {
        @apply .mr-1;
        content: '#{$lang}';
    }
}

div[class~="language-javascript"]:before {
    @apply .mr-1;
    content: "js";
}
div[class~="language-typescript"]:before {
    @apply .mr-1;
    content: "ts";
}
div[class~="language-markup"]:before {
    @apply .mr-1;
    content: "html";
}
div[class~="language-markdown"]:before {
    @apply .mr-1;
    content: "md";
}
div[class~="language-json"]:before {
    @apply .mr-1;
    content: "json";
}
div[class~="language-ruby"]:before {
    @apply .mr-1;
    content: "rb";
}
div[class~="language-python"]:before {
    @apply .mr-1;
    content: "py";
}
div[class~="language-bash"]:before {
    @apply .mr-1;
    content: "sh";
}