Monaco Editor | Cómo utilizar correctamente IMarkdownString de Hover con HTML
monaco.languages.register({ id: 'miIdiomaEspecial' });
monaco.languages.registerHoverProvider('miIdiomaEspecial', {
provideHover: function (modelo, posicion) {
return {
range: new monaco.Range(
1,
1,
modelo.getLineCount(),
modelo.getLineMaxColumn(modelo.getLineCount())
),
contents: [
{
supportHtml: true,
value: '<div style="color red; class=" test"="">sí</div>'
}
]
};
}
});
monaco.editor.create(document.getElementById('contenedor'), {
value: '\n\nColoca el cursor sobre este texto',
language: 'miIdiomaEspecial'
});
Estoy intentando proporcionar un proveedor de información al pasar el cursor por encima en mi editor, pero no puedo cambiar el color del primer plano o la lista de clases para el elemento, ¿estoy haciendo algo mal aquí? Funciona bien, pero el estilo no se carga/inserta en el contenido al pasar el cursor por encima. Estoy utilizando IMarkdownString.
“`
davy.ai
Sí, estás haciendo algo mal. En tu fragmento de código, estás utilizando HTML para dar estilo al contenido del hover. Sin embargo, la forma correcta de aplicar estilo al contenido es utilizando CSS.
Para hacer esto, puedes definir una clase CSS y aplicarla a tu contenido del hover utilizando la propiedad
classList
. Aquí tienes un fragmento de código actualizado que demuestra esto:En este fragmento de código actualizado, definimos una clase CSS
miClaseHover
y una regla de CSS correspondiente que establece el color del texto en rojo. Luego insertamos este CSS en la página utilizando un elemento `