fix: code block selection abnormal

- the reason is using display: table/table-row, which makes the selection behavior become table style.
- use display: flex/block to solve this problem, meanwhile the line number css also modified to fit the adjust
This commit is contained in:
fullex 2025-03-28 16:46:24 +08:00 committed by 亢奋猫
parent f2102daf00
commit 45f0bfa0f9

View File

@ -218,12 +218,15 @@ const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolea
padding: 1em;
code {
display: table;
display: flex;
flex-direction: column;
width: 100%;
.line {
display: table-row;
height: 1.3rem;
display: block;
min-height: 1.3rem;
width: 100%;
padding-left: ${(props) => (props.isShowLineNumbers ? '2rem' : '0')};
}
}
}
@ -234,14 +237,15 @@ const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolea
code {
counter-reset: step;
counter-increment: step 0;
position: relative;
}
code .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
padding-right: 1rem;
display: table-cell;
position: absolute;
left: 0;
text-align: right;
opacity: 0.35;
}