.code-display-wrapper {
margin: 1.5em 0;
overflow: hidden; border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative; font-size: 14px;
line-height: 1.5;
} .code-display-wrapper code {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 14px;
line-height: 1.5;
white-space: pre; word-break: normal; margin: 0;
padding: 0;
} .line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: 0;
width: 3.5em; letter-spacing: -1px;
border-right: 1px solid rgba(0, 0, 0, 0.2);
user-select: none;
padding-left: 0.8em;
counter-reset: linenumber;
background-color: rgba(
240,
240,
240,
0.4
); padding-top: 1em; padding-bottom: 1em; box-sizing: border-box;
} .code-display-wrapper > code {
overflow: auto;
display: block;
padding: 1em;
padding-left: 5.3em; margin: 0;
box-sizing: border-box;
} .code-display-wrapper.line-numbers {
padding: 0;
} .line-numbers-rows > span {
display: block;
counter-increment: linenumber;
height: 1.5em; position: relative;
padding: 0;
margin: 0;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 1.4em; text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 1.5em; } .token {
display: inline-block;
vertical-align: top;
} .language-html .token.tag,
.language-markup .token.tag,
.language-html .token.attr-name,
.language-markup .token.attr-name,
.language-html .token.attr-value,
.language-markup .token.attr-value {
display: inline-block;
vertical-align: top;
} .line-highlight {
background: rgba(255, 255, 0, 0.2);
} .copy-code-button {
position: absolute;
top: 5px;
right: 5px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
z-index: 10;
opacity: 0.7;
transition: opacity 0.2s, background-color 0.2s;
}
.copy-code-button:hover {
opacity: 1;
background-color: #e9e9e9;
}
.copy-code-button.copy-success {
background-color: #4caf50;
color: white;
border-color: #43a047;
} @media (max-width: 600px) {
.copy-code-button {
font-size: 10px;
padding: 2px 5px;
}
}   .code-display-wrapper,
.code-display-wrapper pre,
.code-display-wrapper code { overflow: auto !important;
-webkit-overflow-scrolling: touch; pointer-events: auto;
scrollbar-width: none; -ms-overflow-style: none; } .code-display-wrapper {
overflow-x: auto;
overflow-y: visible;
max-width: 100%;
} .code-display-wrapper pre {
touch-action: auto !important;
overscroll-behavior: contain;
} .line-numbers .line-numbers-rows {
pointer-events: none;
user-select: none;
} .code-display-wrapper,
.code-display-wrapper pre {
height: auto !important;
min-height: auto !important;
max-height: none !important;
} .code-display-wrapper.scrollable {
max-height: 400px;
overflow-y: auto;
border: 1px solid #e1e1e1;
border-radius: 4px;
} .code-display-wrapper:hover {
overflow: auto !important;
} .code-display-wrapper::-webkit-scrollbar,
.code-display-wrapper pre::-webkit-scrollbar,
.code-display-wrapper code::-webkit-scrollbar {
display: none; width: 0px;
background: transparent;
}