代码片段：代码块限制最大高度

​​

代码片段 1

功能介绍

• 当代码块超过指定高度（这里设置为 800px），出现滚动条进行滚动
• 代码语言、代码块复制按钮和代码块菜单不跟随代码块滚动条滚动

缺点：不支持显示行号滚动

CSS 代码

/* ---------------------------代码块限制最大高度------------------------------*/
/* 限制代码块高度，设置超过高度，出现滚动条 */
.protyle-wysiwyg .code-block {
    overflow: hidden;
}

.protyle-wysiwyg .code-block .hljs {
    max-height: 800px;
    overflow: auto;
    padding-top: 32px !important;
    padding-bottom: 20px !important;

}

/* 调整代码块命名、别名等块属性位置 */
.protyle-wysiwyg .protyle-linenumber__rows {
    max-height: 852px;
    overflow: clip;
    height: 100%;
}

.protyle-wysiwyg .code-block .protyle-attr {
    top: -2px;
}


/* 代码块复制和菜单按钮 */
.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw {
    top: 17px;
}

/* 代码块复制按钮和菜单按钮的提示文字放在下方 */
.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::after {
    top: 100%;
    bottom: inherit;
    margin-top: 5px;
}

.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::before {
    top: 100%;
    bottom: inherit;
    rotate: 180deg;
    margin-top: -4px;
}

/* 导出pdf取消限制最大高度 */
#preview .protyle-wysiwyg .code-block .hljs {
    max-height: none;
}

/* ---------------------------代码块限制最大高度------------------------------*/

代码片段 2

支持行号滚动

缺点

• 横向滚动条只会在末尾出现
• 代码语言、代码块复制按钮和代码块菜单跟随代码块滚动条滚动

/* ---------------------------代码块限制最大高度------------------------------*/
/* 限制代码块高度，设置超过高度，出现滚动条 */
.protyle-wysiwyg .code-block {
    max-height: 800px;
    overflow: auto;

}

/* 防止因代码行号和代码渲染内容导致出现多重滚动条 */
.protyle-wysiwyg .hljs,
.protyle-linenumber__rows {
    height: max-content;
}

/* 调整代码块命名、别名等块属性位置 */
.protyle-wysiwyg .code-block .protyle-attr {
    top: -2px;
}

/* 代码块功能按钮：包括代码语言、复制和菜单按钮 */
.protyle-wysiwyg .code-block .protyle-action {
    /* 为了代码块复制按钮可以sticky，需要设置高度 */
    height: 100%;
    /* 取消top高度，否则会出现代码块会被撑开出现滚动条 */
    top: 0px !important;
    /* 需要禁止鼠标点击，否则浮在上面代码块上无法点击 */
    pointer-events: none !important;
}

/* 代码块语言 */
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    margin-top: 6px;
    position: absolute;
    top: 6px;
    position: sticky;
    /* 由于父元素禁止点击，所以要子元素允许点击 */
    pointer-events: all !important;
    align-self: flex-start;
}

/* 代码块复制和菜单按钮 */
.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw {
    /* 调整位置 */
    top: 17px;
    /* 代码块复制按钮sticky，不跟随滚动 */
    position: sticky;
    /* 由于父元素禁止点击，所以要子元素允许点击 */
    pointer-events: all !important;
}

/* 代码块复制按钮和菜单按钮的提示文字放在下方 */
.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::after {
    top: 100%;
    bottom: inherit;
    margin-top: 5px;
}

.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::before {
    top: 100%;
    bottom: inherit;
    rotate: 180deg;
    margin-top: -4px;
}

/* 导出pdf取消限制最大高度 */
#preview .protyle-wysiwyg .code-block {
    max-height: none;
}
/* ---------------------------代码块限制最大高度------------------------------*/

如何使用

见如何使用代码片段 (yuque.com)