src/block/title-icon.scss

/* h1标签基本样式 */
%h1 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    mask: url(../../resources/h1.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h1);
    top: 0.2rem;
    margin-right: 0.2rem;
}

/* h1标签 */
[data-node-id].h1,
.protyle-preview h1 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h1标签 */
[data-node-id].h1::before,
.protyle-preview h1::before {
    @extend %h1;

    .li > & {
        /* 列表中适配 */
        top: unset;
    }
}

/* h1标签 */
[data-node-id].h1[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h1[fold="1"]::before {
    @extend %h1;
    height: 1.75rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.2rem !important;
}

/* h1标签文本 */
[data-node-id].h1 > div:nth-child(1),
.protyle-preview h1 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.95rem);
    min-width: 1px;
}

/* h2标签基本样式 */
%h2 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1.55rem;
    height: 1.55rem;
    mask: url(../../resources/h2.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h2);
    top: 0.2rem;
    margin-right: 0.2rem;
}

/* h2标签 */
[data-node-id].h2,
.protyle-preview h2 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h2标签 */
[data-node-id].h2::before,
.protyle-preview h2::before {
    @extend %h2;

    .li > & {
        /* 列表中适配 */
        top: 0.1rem;
    }
}

/* h2标签 */
[data-node-id].h2[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h2[fold="1"]::before {
    @extend %h2;
    height: 1.55rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.2rem !important;
}

/* h2标签文本 */
[data-node-id].h2 > div:nth-child(1),
.protyle-preview h2 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.75rem);
    min-width: 1px;
}

/* h3标签基本样式 */
%h3 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1.38rem;
    height: 1.38rem;
    mask: url(../../resources/h3.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h3);
    top: 0.2rem;
    margin-right: 0.2rem;
}

/* h3标签 */
[data-node-id].h3,
.protyle-preview h3 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h3标签 */
[data-node-id].h3::before,
.protyle-preview h3::before {
    @extend %h3;

    .li > & {
        /* 列表中适配 */
        top: 0.2rem;
    }
}

/* h3标签 */
[data-node-id].h3[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h3[fold="1"]::before {
    @extend %h3;
    height: 1.38rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.2rem !important;
}

/* h3标签文本 */
[data-node-id].h3 > div:nth-child(1),
.protyle-preview h3 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.58rem);
    min-width: 1px;
}

/* h4标签基本样式 */
%h4 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    mask: url(../../resources/h4.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h4);
    top: 0.15rem;
    margin-right: 0.2rem;
}

/* h4标签 */
[data-node-id].h4,
.protyle-preview h4 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h4标签 */
[data-node-id].h4::before,
.protyle-preview h4::before {
    @extend %h4;

    .li > & {
        /* 列表中适配 */
        top: 0.15rem;
    }
}

/* h4标签 */
[data-node-id].h4[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h4[fold="1"]::before {
    @extend %h4;
    height: 1.25rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.15rem !important;
}

/* h4标签文本 */
[data-node-id].h4 > div:nth-child(1),
.protyle-preview h4 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.45rem);
    min-width: 1px;
}

/* h5标签基本样式 */
%h5 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1.13rem;
    height: 1.13rem;
    mask: url(../../resources/h5.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h5);
    top: 0.1rem;
    margin-right: 0.2rem;
}

/* h5标签 */
[data-node-id].h5,
.protyle-preview h5 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h5标签 */
[data-node-id].h5::before,
.protyle-preview h5::before {
    @extend %h5;

    .li > & {
        /* 列表中适配 */
        top: 0.2rem;
    }
}

/* h5标签 */
[data-node-id].h5[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h5[fold="1"]::before {
    @extend %h5;
    height: 1.13rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.1rem !important;
}

/* h5标签文本 */
[data-node-id].h5 > div:nth-child(1),
.protyle-preview h5 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.33rem);
    min-width: 1px;
}

/* h6标签基本样式 */
%h6 {
    content: "";
    display: inline-flex;
    position: relative;
    width: 1rem;
    height: 1rem;
    mask: url(../../resources/h6.svg) no-repeat center center;
    mask-size: contain;
    background-color: var(--mk-block-header-h6);
    top: 0.1rem;
    margin-right: 0.2rem;
}

/* h6标签 */
[data-node-id].h6,
.protyle-preview h6 {
    display: inline-flex;

    span {
        display: inline;
        max-width: fit-content;
    }
}

/* h6标签 */
[data-node-id].h6::before,
.protyle-preview h6::before {
    @extend %h6;

    .li > & {
        /* 列表中适配 */
        top: 0.3rem;
    }
}

/* h6标签 */
[data-node-id].h6[fold="1"][data-type="NodeHeading"]::before,
.protyle-preview h6[fold="1"]::before {
    @extend %h6;
    height: 1rem !important;
    border-radius: unset;
    margin-top: unset;
    left: unset !important;
    top: 0.1rem !important;
}

/* h6标签文本 */
[data-node-id].h6 > div:nth-child(1),
.protyle-preview h6 > div:nth-child(1) {
    display: inline-flex contents;
    max-width: calc(100% - 1.2rem);
    min-width: 1px;
}