Qt QML Text または TextEdit コントロールでマークダウンをレンダリングする

最近、Qt QML が Text{} で Markdown をレンダリングできることを発見しました コントロールします。このスニペットは、スクリーンショットとデモ QML アプリを含む方法を示しています。

Qt 5.14 は Text でマークダウンのサポートを追加しました と TextEdit コントロール:

• HTML の代替として、Markdown 形式 (CommonMark および GitHubdialects を含む) のサポートを Text および TextEdit に追加しました。これには、GitHub チェックリスト拡張機能が含まれており、TextEdit でチェックボックスを切り替えることができます。

textFormat プロパティはすでに基本的な HTML をレンダリングできましたが、5.14 以降では textFormat: TextEdit.Markdowntext を指定できます マークダウンをレンダリングするには:

TextEdit.MarkdownText: CommonMark plus the GitHub extensions for tables
and task lists (since 5.14)

私はマークダウンを多用しているので、単純な書式設定の HTML と比較して、これを使用するのは楽しいことです。

Text の両方の完全な QML の例を次に示します。 そして TextEdit . TextEdit に注意してください は、書き込み時にマークダウンを解析せず、設定したテキストをマークダウンとしてフォーマットするだけです。

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 820
    height: 480
    visible: true
    title: qsTr("Qt Markdown Example by Raymii.org")

    QtObject{
        id: markdown
        // not having tabs or spaces is important, otherwise
        // the markdown will not render.
        property string text: "*Italic*    **Bold**

# Heading 1

## Heading 2

[Link to raymii.org](https://raymii.org)


> quote

* List
* List

1. list 2
1. list 2

```
Code()->example
```

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

    "}

    Text {
        id: textedittext
        text: "QML TextEdit{}:"
        anchors.top: parent.top
        anchors.left: parent.left
    }

    Rectangle {
        id: textedit
        anchors.top: textedittext.bottom
        anchors.left: parent.left
        anchors.topMargin: 20
        anchors.leftMargin: 5
        width: 400
        height: 400
        border.color: "lime"

        TextEdit{
            anchors.fill: parent
            textMargin: 5
            textFormat: TextEdit.MarkdownText
            text: markdown.text
            wrapMode: Text.Wrap
        }
    }

    Text {
        id: texttext
        text: "QML Text{}:"
        anchors.top: parent.top
        anchors.left: textedit.right
    }

    Rectangle {
        id: text
        anchors.top: texttext.bottom
        anchors.left: textedit.right
        anchors.topMargin: 20
        anchors.leftMargin: 5
        width: 400
        height: 400
        border.color: "teal"


        Text{
            anchors.fill: parent
            textFormat: TextEdit.MarkdownText
            text: markdown.text
            fontSizeMode: Text.Fit
            wrapMode: Text.WordWrap
        }
    }
}