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:
parent
f2102daf00
commit
45f0bfa0f9
@ -218,12 +218,15 @@ const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolea
|
|||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
||||||
code {
|
code {
|
||||||
display: table;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
display: table-row;
|
display: block;
|
||||||
height: 1.3rem;
|
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 {
|
code {
|
||||||
counter-reset: step;
|
counter-reset: step;
|
||||||
counter-increment: step 0;
|
counter-increment: step 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
code .line::before {
|
code .line::before {
|
||||||
content: counter(step);
|
content: counter(step);
|
||||||
counter-increment: step;
|
counter-increment: step;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
padding-right: 1rem;
|
position: absolute;
|
||||||
display: table-cell;
|
left: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user