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

270
Vistas
Shift the underline to the right

Following this question of marking a position between 2 characters, somebody suggested to use decoration of Monaco Editor. I tried the following code in the playground.

(* JavaScript: *)

var editor = monaco.editor.create(document.getElementById('container'), {
    value: "fg(23,)",
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(1, 6, 1, 7),
            options: { inlineClassName: 'myInlineDecoration' }
        }
    ]
);

(* CSS: *)

.myInlineDecoration {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}

And it returned this output:

enter image description here

However,

  1. It seems that the underline returned by text-decoration-style: wavy is "more wavy" than normal underlines we often see in an editor like the yellow underlines here.

  2. It would be ideal if the underline could be shifted by 0.5 character to the right, then the position between , and ) will be underlined.

Does anyone know how to achieve this (probably by CSS)?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The css property text-decoration-skip-ink: none; might help if the goal is to make the underline more visible. Text underline is normally covered by descenders, i.e., parts of the letter that drop below the line. The skip-ink property allows the wavy underline to cover the text. It seems to have good browser support. And here is a link to documentation.

The Monaco editor is probably not a good solution if all you want to do is underline some text.

Run the code snippet below for examples of with and without text-decoration-skip-ink.

.wavy1 {
  text-decoration: underline wavy red;
}

.wavy2 {
 text-decoration: underline wavy red;
 text-decoration-skip-ink: none;
}
<div style="font-size:2em;">

  fg(23<a class="wavy1">,</a>)  fg(23<a class="wavy2">,</a>)
  <br/>
  <span class="wavy1">jgpyq</span> <span class="wavy2">jgpyq</span>

</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Building on @Roberto's answer, you could use the following CSS to insert content after .myInlineDecoration, set the content itself to transparent and adding an underline to it (which is visible):

.myInlineDecoration {
   text-decoration: none; 
   position: relative; 
 }   

.myInlineDecoration:after {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    position: absolute;
    height: 1px;
    margin: 0 5px; /* adjust to move left and right */
    content: 'x';
    color: rgba(0, 0, 0, 0);
    left: 0;
    bottom: 13px; /* adjust to move up and down */
}

The Javascript is as follows:

var editor = monaco.editor.create(document.getElementById('container'), {
    value: "fg(23,)\ngh(45,)",
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(1, 6, 1, 7),
            options: { inlineClassName: 'myInlineDecoration' }
        },
        {
            range: new monaco.Range(2, 3, 2, 4),
            options: { inlineClassName: 'myInlineDecoration' }
        }
    ]
);

I'm not convinced it's the best solution (feels quite hacky using CSS rather than relying on Monaco - but then I'm not sure how to do it solely in Monaco)

about 4 years ago · Juan Pablo Isaza Denunciar
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