¿Cómo mostrar los números de línea para un bloque de código usando JavaScript?

Question

Aquí está la cosa. Utilizo 'Highlight.js' (un marcador de sintaxis automático basado en javascript) para el código de resaltado de sintaxis en mi sitio web. Pero no es compatible con los números de línea ni con el trazado de líneas de cebra (para líneas de código alternativas).

Mi bloque de código se envuelve en <pre><code> bloques de la siguiente manera:

<pre><code> 
&lt;script type=&quot;text/javascript&quot;&gt; 
// Say hello world until the user starts questioning 
// the meaningfulness of their existence. 
function helloWorld(world) { 
for (var i = 42; --i &gt;= 0;) { 
alert(&#39;Hello &#39; + String(world)); 
} 
} 
&lt;/script&gt; 
&lt;style&gt; 
p { color: pink } 
b { color: blue } 
u { color: &quot;umber&quot; } 
&lt;/style&gt; 
</code></pre> 

Y la salida tiene el siguiente aspecto:

Ahora quiero mostrar números de línea para el bloque de código dinámicamente usando JavaScript. ¿Cómo puedo hacer eso? (Además, si es posible, ¿cómo se muestra cebra-striping?)

Gracias.

PS: No se el JavaScript, por favor intente ser lo más claro posible. Haré lo mejor que pueda para entender. Gracias.

Answer 1

Se podría utilizar un marco alternativo, como http://alexgorbatchev.com/SyntaxHighlighter/

O echar un vistazo aquí y encontrar algo que suites. http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/

Answer 2

Los pasos básicos serían:

1. Tome el código HTML dentro del elemento.
2. Dividir por caracteres de nueva línea (\n).
3. Para cada cadena, agregue un número y un punto delante de ella.
4. Combine las cadenas de nuevo con caracteres de nueva línea.
5. Establezca la cadena como el HTML del elemento.

Sin embargo, esto estropearía el resaltado de sintaxis del marcador de sintaxis porque probablemente no reconocerá que el código tiene números de línea al frente. Por lo tanto, el marcador de sintaxis debe proporcionarle la funcionalidad de los números de línea.

Answer 3

Agregando una nueva respuesta a una pregunta anterior.

Quería mostrar los números de línea en el margen izquierdo como lo hace ace.js.

Mi solución tiene algunos detalles hacky, pero quería compartirlo de todos modos, porque resulta que los tramos de posición absoluta dentro de los tramos de posición relativa funcionan bastante bien para esto.

alentado por las respuestas anteriores y this answer about relative positioning without taking up space, solía:

var line = 1; 
code = code.replace(/^/gm, function() { 
    return '<span class="line-number-position">&#x200b;<span class="line-number">' + line++ + '</span></span>'; 
}); 

La expresión regular /^/gm "sustituye" al principio de cada línea con el palmo-dentro-palmo.

​ es un espacio de ancho cero, porque aparentemente Firefox parece tener problemas para decidir si desea poner un tramo de altura cero en la parte superior o inferior del carácter.

line-number-position y line-number son clases CSS como estos:

.line-number-position { 
    position: relative; 
    top: 0; 
} 

.line-number { 
    position: absolute; 
    text-align: right; 
    right: 17px; 
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; 
    font-size: 12px; 
} 

Sí, hay algunos números mágicos de allí para que coincida con el formato as, pero el punto es que poner un lapso de tamaño cero correspondientes ubicados en el comienzo de cada línea y utilícela como punto de referencia para agregar un tramo de posición absoluta en el margen izquierdo.

Funciona con Chrome, Safari, Firefox y Opera actuales.