How can I generate line number from css or javascript based on height of container

Question

I have a situation where I have to make something that looks like a code editor and to acheive this I have to use HTML, CSS and Js without any libraries.

I have achieved pretty much everything except the line numbers and I am not sure how to do it.

So far I have achieved this:

and this is what actually is my target:

supposing that I have this html structure:

<html>
    <head>
    </head>
    
    <body>
        <div class="lines"></div>
        <div class="code"></div>
    </body>
</html>

how do I populate lines based on the height of content in code using CSS or JavaScript?

this is amazing,but share your code for us to answer,(Dont share full code because some may be evil,share required code portion) — Neptotech -vishnu, Jan 23 '22 at 12:52
related if not duplicate: https://stackoverflow.com/q/64850121/8620333 — Temani Afif, Jan 23 '22 at 12:53
@TemaniAfif this is somewhat related to my question but the problem is I am generating all the special chars using CSS such as ```{}``` ```,``` and ```()``` etc also, in the sugested answer there is single `````` root element but I am using two separate divs. — Salman Malik, Jan 23 '22 at 12:57
my solution will simplify your idea because you don't need the 2 divs, only one div is needed since all the code I am adding is using a pseudo element — Temani Afif, Jan 23 '22 at 13:17
But there already are psuedo elements ```}``` is always on new line and is generated by CSS how will I add line number before that? — Salman Malik, Jan 23 '22 at 13:24

Dalibor · Accepted Answer · 2022-01-23T13:19:02.650

Here's something: (written fast, feel free to adjust CSS etc)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <style>
    #code {
        line-height: 15px;
    }
    .holder {
        display: flex
    }
    
    </style>
</head>
<body>

        <div class="holder">
            <div>
                <pre id="lines">
            </pre>
            </div>
            <div>
                <pre id="code">
                .aaa {
                   bbb
                }
                .ccc {
                   ddd
                }
                </pre>
            </div>
        </div>

</body>
    <script>
    const codeHeight = document.getElementById('code').offsetHeight;    
    const lines = Math.ceil(codeHeight / 15);
    let html = '';
    for (i = 1; i < lines; i++) {
        html += i + '<br>'
    }
    document.getElementById('lines').innerHTML = html;  
    </script>
</html>

Here's the JS fiddle: https://jsfiddle.net/4aowc26f/

Number 15 in calculation is due to 15px line height. Feel free to introduce variable for this one.

kudos, that was the most appropriate solution. though the context was missing from my problem, you got it exactly as I wanted. actually I am not using any `````` or `````` and the indents, symbols, special chars are generated using CSS only. This was most appropriate solution, that ```Math.ceil(codeHeight/15)``` worked like charm with little modification. — Salman Malik, Jan 23 '22 at 18:38

score 0 · Answer 2 · answered Jan 23 '22 at 12:55

0

you should make every line as a div <div><span>{line}</span> <span>some code</span> </div>

answered Jan 23 '22 at 12:55

elad BA

1,760
11
17

All the special chars are being generated using css, which means the start of block and end of block ```{}``` don't actaully exist in html which will cause a number to be missed. your answer is clever but it won't work in my case. – Salman Malik Jan 23 '22 at 12:59
The question then is why you render the special characters with CSS. The way this usually works is through a static analyzer (like Esprima for javascript) where you will tokenize and describe the parse tree (probably json). The rendering itself will then merely be an implementation detail, i.e. you pass the parse tree to the view, and it will render itself. – html_programmer Jan 23 '22 at 13:04
@html_programmer because I am not using `````` to write things. and html eliminates white spaces, this is why I have written CSS like ```.tab``` to add relative tabs in case a block is inside another block and so on. – Salman Malik Jan 23 '22 at 13:30

How can I generate line number from css or javascript based on height of container

2 Answers2