0
268
ViewsDesplazar el subrayado a la derecha
A raíz de esta cuestión de marcar una posición entre 2 caracteres, alguien sugirió utilizar la decoración de Monaco Editor. Probé el siguiente código en el patio de recreo .
(* 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; }Y devolvió esta salida:
Sin embargo,
Parece que el subrayado devuelto por
text-decoration-style: wavyes "más ondulado" que los subrayados normales que a menudo vemos en un editor como los subrayados amarillos aquí .Sería ideal si el subrayado se pudiera desplazar 0,5 caracteres a la derecha, entonces la posición entre
,y)estaría subrayada.
¿Alguien sabe cómo lograr esto (probablemente por CSS)?
2 answers
Answer question0
La propiedad css text-decoration-skip-ink: none; podría ayudar si el objetivo es hacer que el subrayado sea más visible. El subrayado de texto normalmente está cubierto por descendientes, es decir, partes de la letra que caen debajo de la línea. La propiedad skip-ink permite que el subrayado ondulado cubra el texto. Parece tener un buen soporte de navegador . Y aquí hay un enlace a la documentación .
El editor de Mónaco probablemente no sea una buena solución si todo lo que quiere hacer es subrayar algún texto.
Ejecute el fragmento de código a continuación para ver ejemplos con y sin 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>0
Sobre la base de la respuesta de @Roberto, podría usar el siguiente CSS para insertar contenido después de .myInlineDecoration , establecer el contenido en transparente y agregarle un subrayado (que es 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 */ }El Javascript es el siguiente:
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' } } ] );No estoy convencido de que sea la mejor solución (se siente bastante complicado usar CSS en lugar de confiar en Mónaco, pero no estoy seguro de cómo hacerlo únicamente en Mónaco)