How to add color on specific words on QML Text

Question

Hello i would like to add different color on specific words of a string to be used in QML Text

Text {

    text: "Blue Red Yellow Green"

}

I know that you can add color to the whole text, but i would like to add specific color on specific words. is this possible? and how is it achieved?

Your original question is on Text and, the accepted answer is appropriate. However, your following up question is on TextInput/TextArea or TextEdit. That is covered under syntax highlighting, see https://stackoverflow.com/questions/14791360/qt5-syntax-highlighting-in-qml — Stephen Quan, Sep 07 '21 at 06:26

score 11 · Accepted Answer · answered Mar 05 '19 at 13:35

11

Text items can display both plain and rich text. For example you can have:

Text {
    text: "<font color=\"#0000FF\">Blue</font> <font color=\"#FF0000\">Red</font>"
}

answered Mar 05 '19 at 13:35

Nejat

Great answer sir, Thank you ! But i do have a follow up question, is there a way to do it in TextInput or TextArea too? I did try it but shows me the plain text version – Jake quin Mar 05 '19 at 13:42
2

@Jack You can not have rich text in `TextInput`. But it's stated in the Qt documentation that you can have rich text in `TextEdit` and `TextArea`. – Nejat Mar 05 '19 at 14:08
i tried using your string of text , and it would seem TextEdit and textArea show the plain text, i looked at the documentation and there seem to be no property that enable or disables it. any ideas? – Jake quin Mar 05 '19 at 14:29
4

@Jack You should set the property `textFormat: TextEdit.RichText`. – Nejat Mar 05 '19 at 14:36
Oh, that is my bad i missed that one. Thank you very much sir this is very helpful – Jake quin Mar 05 '19 at 15:45

1 Answers1