Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

269
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda