@import url("https://fonts.googleapis.com/css?family=Noto+Sans+HK:400,500|Noto+Sans+JP:400,500|Noto+Sans+KR:400,500|Noto+Sans+SC:400,500|Noto+Sans+TC:400,500&display=swap&subset=chinese-hongkong,chinese-simplified,chinese-traditional,cyrillic,japanese,korean,vietnamese");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,bold");

.hljs {
    background: none;
    color: var(--ts-gray-800);
    font-size: 0.95rem;
    white-space: break-spaces;
    overflow-x: scroll;
    font-family:
        "Ubuntu Mono", "Noto Sans TC", "Noto Sans CJK TC", "SF Pro TC", "SF Pro Text", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI,
        "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback",
        "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif;
    word-spacing: 2px;
    letter-spacing: 0em;

    --hljs-link-color: #503efc;
    --hljs-mark-background-color: #096dd9;
    --hljs-semantic-color: #503efc;
    --hljs-secondary-mark-color: #4a4a4a;
    --hljs-secondary-mark-background-color: #e9e9e9;
}

.hljs a {
    padding: 0 0.1rem;
    border-bottom: 1px dashed var(--hljs-link-color);
    color: var(--hljs-link-color);
    text-decoration: none;
}

.hljs a:hover {
    border-bottom-style: solid;
}

.hljs mark a {
    color: #fff;
    border-bottom-color: #fff;
}

.hljs mark {
    padding: 0 0.4rem;
    display: inline-block;
    border-radius: 0.3rem;
    line-height: 1.4;
}

.hljs mark:not(.tag) {
    background: var(--hljs-mark-background-color);
    color: #fff;
}

.hljs mark.tag {
    /*background-color: #e9e9e9;
    color: inherit;*/
    background-color: var(--hljs-secondary-mark-background-color);
    color: var(--hljs-secondary-mark-color);
    line-height: 1.3;
    padding: 0 0.25rem;
}

.hljs .hljs-variable,
.hljs .hljs-template-variable,
.hljs .hljs-tag,
.hljs .hljs-name,
.hljs .hljs-selector-id,
.hljs .hljs-selector-class,
.hljs .hljs-regexp,
.hljs .hljs-deletion {
    color: var(--ts-gray-800);
}

.hljs .hljs-string,
.hljs .hljs-symbol,
.hljs .hljs-bullet,
.hljs .hljs-addition {
    color: var(--hljs-semantic-color);
}

.hljs .hljs-attribute {
    margin-right: 0.2em;
}

.hljs .hljs-important-class {
    background-color: var(--ts-primary-600);
    padding: 1px 3px;
    border-radius: 4px;
    color: #fff;
}

.hljs .hljs-important-class * {
    color: #fff;
}

code.hljs.javascript {
    color: #8e8e8e;
}

.hljs-comment {
    opacity: 0.9;
}

.hljs mark::selection,
.hljs mark a::selection {
    color: #fff;
    background: #014691;
}

@media (prefers-color-scheme: dark) {
    .hljs {
        --hljs-link-color: #a6a6f6;
        --hljs-semantic-color: #a6a6f6;
        --hljs-mark-background-color: #4f4fb1;

        --hljs-secondary-mark-color: #fff;
        --hljs-secondary-mark-background-color: #4c4c4c;
    }
}

body.is-dark .hljs {
    --hljs-link-color: #a6a6f6;
    --hljs-semantic-color: #a6a6f6;
    --hljs-mark-background-color: #4f4fb1;
    --hljs-secondary-mark-color: #fff;
    --hljs-secondary-mark-background-color: #4c4c4c;
}

body.is-light .hljs {
    --hljs-link-color: #503efc;
    --hljs-semantic-color: #503efc;
    --hljs-secondary-mark-color: #4a4a4a;
    --hljs-secondary-mark-background-color: #e9e9e9;
}