Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

267
Vistas
Why does the line number appear in the wrong place after using the line-number plugin in Prismjs?

I use the following example:

<script setup lang="ts">
import Prism from 'prismjs';
import { onMounted } from 'vue';

const codeTest1 = `
function handle(t, s) {
  let sum = 0
  sum += t * 0.3
  if (s <= 20) {
    sum += s * 1.8
  } else {
    sum += 20 * 1.8 + (s - 20) * 2.5
  }

  return sum < 9 ? 9 : sum
}
`

onMounted(() => {
  Prism.highlightAllUnder(document)
})
</script>

<template>
  <pre class="line-numbers">
    <code class="language-js">{{ codeTest1 }}</code>
  </pre>
</template>

<style>
</style>

But it doesn't work as I expected: result

The demo use vite and vue-ts template. The prismjs's version is ^1.23.0

Can anyone tell me why this is happening?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda