How to use Markdown format in QML 5.14

Question

Recently Qt 5.14 was released. In this version they have added support for the Markdown format.

Added support for the Markdown format (including CommonMark and GitHub dialects) to Text and TextEdit as an alternative to HTML. This includes the GitHub checklist extension, allowing to toggle checkboxes in a TextEdit.

I expect that I can enter text in TextEdit or Text and my text will look like this. Same result you could see in Discord or StackOverflow.

But I have problem with this. I can't find any documentation or any references on how to use it. I have thought, that I can found information in TextEdit textFormat or Text textFormat, but there're only old html tags (they were replaced by Markdown format).

Here's some part of my code, if you need it. (Code can be bugged, because I haven't tested it after changed it.)

import QtQuick 2.14
import QtQuick.Controls 2.14

Item {
    width: 100
    height: 100

    Text { 
        id: messageText
        height: 50
        width: 100
        text: msgLine.text
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        textFormat: Text.StyledText
        font.pointSize: 13
        lineHeight: 1.15
        anchors.top: parent.top
    }

    TextEdit {
        id: msgLine
        height: 50
        width: 100
        anchors.top: messageText.bottom
        Text.RichText // I have changed this value to others
        verticalAlignment: Text.AlignVCenter
        TextEdit.WrapAtWordBoundaryOrAnywhere
     }
}

I want to ask if there is any documentation on how to use it or any example. Thanks in advance!

Answer 1

It seems to be a bug of the Qt documentation(QTBUG-80749), if you want to use markdown in Text or TextEdit then you must set TextEdit.MarkdownText in the textFormat property:

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14

Window {
    id: root
    visible: true
    width: 960
    height: 480
    QtObject{
        id: internals
        property string markdown_text: "*Italic*    **Bold**
# Heading 1
## Heading 2

[Link](http://a.com)

* List
* List
* List

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
"
    }

    RowLayout{
        anchors.fill: parent
        TextEdit{
            id: te_output
            Layout.fillWidth: true
            textFormat: TextEdit.MarkdownText
            text: internals.markdown_text
        }
        Text{
            id: t_output
            Layout.fillWidth: true
            textFormat: TextEdit.MarkdownText
            text: internals.markdown_text
        }
    }
}