0
301
Vistas¿Cómo puedo generar un número de línea desde css o javascript según la altura del contenedor?
Tengo una situación en la que tengo que hacer algo que parezca un editor de código y para lograrlo tengo que usar HTML, CSS y Js sin bibliotecas.
He logrado casi todo excepto los números de línea y no estoy seguro de cómo hacerlo.
Hasta ahora he logrado esto: 
y esto es lo que en realidad es mi objetivo: 
suponiendo que tengo esta estructura html:
<html> <head> </head> <body> <div class="lines"></div> <div class="code"></div> </body> </html> 
¿Cómo completo las lines según la altura del contenido en code usando CSS o JavaScript?
2 Respuestas
Responde la pregunta0
Aquí hay algo: (escrito rápido, siéntase libre de ajustar 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>Aquí está el violín JS: https://jsfiddle.net/4aowc26f/
El número 15 en el cálculo se debe a una altura de línea de 15 px. Siéntase libre de introducir variables para este.
0
deberías hacer cada línea como un div <div><span>{line}</span> <span>some code</span> </div>