riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

add line numbers to code editor

Browse source 
this is the sort of fancy stuff we can do now
This commit is contained in:
りき萌 2024-09-05 22:05:15 +02:00
parent 09a81ec032
commit 92e3b8fcb7
3 changed files with 95 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/index.css
View file

@ -169,15 +169,72 @@ rkgk-reticle-cursor {
/* Code editor */
rkgk-code-editor {
--gutter-width: 2.5em;
display: block;
position: relative;
width: 100%;
&>.layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
pointer-events: none;
display: flex;
flex-direction: column;
&>.line {
white-space: pre-wrap;
}
}
&>.layer-gutter {
user-select: none;
counter-reset: line;
color: transparent;
&>.line {
display: flex;
flex-direction: row;
counter-increment: line;
&::before {
display: block;
width: var(--gutter-width);
flex-shrink: 0;
padding-right: 0.5em;
box-sizing: border-box;
content: counter(line);
text-align: right;
color: var(--color-text);
opacity: 40%;
}
}
}
&>textarea {
display: block;
width: 100%;
width: calc(100% - var(--gutter-width));
margin: 0;
margin-left: var(--gutter-width);
padding: 0;
box-sizing: border-box;
overflow: hidden;
resize: none;
white-space: pre-wrap;
border: none;
overflow: hidden;
box-sizing: border-box;
}
}