Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

275
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!