如何在同一个文本输入框中实现实时 Markdown 预览？

Question

我正在使用 QT Designer 和 Python 构建一个笔记 GUI。我正在设想使用简单的 Markdown 将笔记保存为 *.txt 文件。然而，对于 GUI，我希望主文本编辑框能够在您处于“编辑模式”并打字时实时渲染 Markdown。因此，如果您输入*italic*或**bold**，文本框会识别它并使其斜体或粗体化，而那些降价符号仍在文本中。退出“编辑模式”后，您将看到格式正确的注释预览，其中包含富文本，并且没有任何 Markdown 符号。如果有人熟悉Notable，我非常希望复制它（值得一提的是Bear应用程序，但其功能有所不同，因为它始终保持在“实时预览”模式）。

我正在尝试弄清楚如何使用 QT 和 Python 来解决这个问题，这是迄今为止我能想到的全部：

1. QT 网站上有一个示例QWebEngineView，演示了使用 进行实时预览，但它与普通文本框并排，而不是我想要的。

2. 我想知道这是否也可以通过某种语法突出显示来实现？所以从这个意义上说，我会构建更多的代码编辑器之类的东西？因此，QT 文本框将被配置（作为富文本或 HTML？我不知道），以便*(italic text)*在您输入第二个星号后，任何 的实例都会获得斜体格式。我想在语法突出显示定义中，我可以使用某种通配符来表示“这些降价符号之间有什么内容吗？”

有人对解决方案有任何建议吗？

Answer 1

由于 Qt 5.14 QTextEdit 支持 markdown 格式，因此您可以使用 2 个 QTextEdit 来显示不同的编辑模式。要交换 QTextEdit，您可以使用 QStackedWidget：

from PyQt5 import QtCore, QtGui, QtWidgets


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.stacked_widget = QtWidgets.QStackedWidget()
        self.setCentralWidget(self.stacked_widget)

        self.markdown_editor = QtWidgets.QTextEdit()
        self.markdown_viewer = QtWidgets.QTextEdit(readOnly=True)

        self.stacked_widget.addWidget(self.markdown_editor)
        self.stacked_widget.addWidget(self.markdown_viewer)

        foo_menu = self.menuBar().addMenu("&FooMenu")
        self.edit_action = foo_menu.addAction("&Edit")
        self.edit_action.setCheckable(True)
        self.edit_action.triggered.connect(self.handle_edit_mode)

    def handle_edit_mode(self):
        self.stacked_widget.setCurrentWidget(
            self.markdown_viewer
            if self.edit_action.isChecked()
            else self.markdown_editor
        )
        if self.stacked_widget.currentWidget() == self.markdown_viewer:
            self.markdown_viewer.setMarkdown(self.markdown_editor.toPlainText())


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)

    w = MainWindow()
    w.show()

    sys.exit(app.exec_())