es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Monaco Editor | Cómo utilizar correctamente IMarkdownString de Hover con HTML

30 Jul, 2023 Programación 
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.
“`

Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(
                1,
                1,
                model.getLineCount(),
                model.getLineMaxColumn(model.getLineCount())
            ),
            contents: [
                {
                    value: 'yes',
                    isTrusted: true,
                    supportHtml: true
                }
            ]
        };
    }
});

// Define una clase CSS para el contenido del hover
const hoverClass = 'miClaseHover';
const hoverCss = `.${hoverClass} {
    color: red;
}`;

// Inserta el CSS en la página
const styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(hoverCss));
document.head.appendChild(styleElement);

monaco.editor.create(document.getElementById('container'), {
    value: '\n\nPasa el cursor sobre este texto',
    language: 'mySpecialLanguage',
    hover: {
        // Aplica la clase CSS al contenido del hover
        cssClassName: hoverClass
    }
});

    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 `

Comments are closed.