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: [ { supportHtml: true, value: '<div style="color red; class="test">yes</div>' } ] }; } }); monaco.editor.create(document.getElementById('container'), { value: '\n\nHover over this text', language: 'mySpecialLanguage' });Estoy tratando de proporcionar un HoverProvider para mi editor, pero parece que no puedo representar el elemento con un primer plano o una lista de clases diferente. ¿Estoy haciendo algo mal aquí? Funciona bien, pero el estilo no se cargó/insertó en el contenido flotante. Estoy usando IMarkdownString
El value no contiene un HTML válido. Le faltan dos puntos después del color y no está cerrando el atributo de style con una comilla. Debería ser: '<div style="color: red" class="test">yes</div>'
Respondí una pregunta similar aquí .
Solo se admite un subconjunto de etiquetas y atributos HTML en IMarkdownString . Solo el elemento span HTML admite el atributo de style y el CSS definido en el atributo de estilo debe alinearse con estas reglas específicas:
Solo se permiten las propiedades CSS color o background-color
Debe definirse en hexadecimal (no se permiten nombres de color)
Sin espacio entre el color: y el valor hexadecimal
Debe contener un punto y coma al final del valor hexadecimal
Si cambia la cadena HTML definida en la propiedad de value a
<span style="color:#ff0000;">yes<span>entonces debería funcionar y mostrar la palabra "sí" en rojo.
Si copia y pega el siguiente código en el parque infantil de Mónaco, debería verlo funcionando:
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: [ { supportHtml: true, value: '<span style="color:#ff0000;">yes</span>' } ] }; } }); monaco.editor.create(document.getElementById('container'), { value: '\n\nHover over this text', language: 'mySpecialLanguage' });