CSS 代码片段问题

我在论坛里找到了一个 css 代码，用来美化代码块。原本它应该表现得很好。（上面两张图）

但是很奇怪的是，对于另外两个代码块，一旦选中了【代码块】或者是【代码块上面的那个块】它就会发疯（如下两张图）

代码附在这里，不知有无大佬可以帮忙看看是因为什么导致了这个问题：

 pre code.hljs {
     display: block;
     overflow-x: auto;
     padding: 1em
 }

 code.hljs {
     padding: 3px 5px
 }

 .hljs-comment,
 .hljs-quote {
     color: #969896
 }

 .hljs-deletion,
 .hljs-name,
 .hljs-regexp,
 .hljs-selector-class,
 .hljs-selector-id,
 .hljs-tag,
 .hljs-template-variable,
 .hljs-variable {
     color: #d54e53
 }

 .hljs-built_in,
 .hljs-link,
 .hljs-literal,
 .hljs-meta,
 .hljs-number,
 .hljs-params,
 .hljs-type {
     color: #e78c45
 }

 .hljs-attribute {
     color: #e7c547
 }

 .hljs-addition,
 .hljs-bullet,
 .hljs-string,
 .hljs-symbol {
     color: #b9ca4a
 }

 .hljs-section,
 .hljs-title {
     color: #7aa6da
 }

 .hljs-keyword,
 .hljs-selector-tag {
     color: #c397d8
 }

 .hljs {
     background: #000;
     color: #eaeaea
 }

 .hljs-emphasis {
     font-style: italic
 }

 .hljs-strong {
     font-weight: 700
 }

 /* 代码块背景设置 */
 .b3-typography .code-block:not(pre), .protyle-wysiwyg .code-block:not(pre) {
     padding: 2em 1em 1.6em;
     margin: 1em 0;
     box-sizing: border-box;
     background-color: #282828;
 }

 .code-block::after {
     content: ' ';
     position: absolute;
     background: #fa625c;
     box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
     border-radius: var(--b3-border-radius-round);
     top: 10px;
     left: 15px;
     height: 12px;
     width: 12px;
     z-index: 1;
     border-radius: 6px;
 }


 .b3-typography .code-block:not(pre) .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block:not(pre) .protyle-action .protyle-action__language {
     font-size: 85%;
     color: #fff8ed;
     margin-top: -4px;
     align-self: center;
     margin-left: 75px;
 }

 .code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu {
     margin-top: -3px;
     color: #fff;
     background-color: var(--S-list-background);
 }